2

Styling form elements is a well-known pain.

I would like to have the text of a given <button> display in the bottom-right hand corner of that button.

Using flexbox with a <div> this as straightforward as:

div {
display: flex;
justify-content: flex-end;
align-items: flex-end;
}

But with the <button> it is rather less straightforward.

The really peculiar thing is that the <button> does acknowledge justify-content: flex-end; but not align-items: flex-end;.

Example of align-items failing to override native styles of <button>:

div {
background-color: rgb(191, 191, 191);
}

div, button {
display: flex;
float: left;
width: 130px;
height: 100px;
margin-right: 12px;

justify-content: flex-end;
align-items: flex-end;
}
<div>Div (flex)</div>
<button>Button (flex)</button>

Is there any way I can get align-items: flex-end; to work with the button, or is there any alternative way to have the text of a given <button> display in the bottom-left hand corner of that button?

Browser: I am using Firefox 57.0.4

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Rounin
  • 27,134
  • 9
  • 83
  • 108
  • 1
    Buttons can be block-level just fine. Wherever you're reading that from is making it up. I should point out that you're floating all the divs and buttons so the inline-level declarations become moot anyway. – BoltClock Jan 09 '18 at 17:12
  • 1
    *"The really peculiar thing is that the ` – Michael Benjamin Jan 09 '18 at 17:16
  • 1
    Yeah, I mean floating is taking away the inline layout - showing how flex behavior is identical across blocks and inlines isn't as effective when you're not allowing the inlines to be inline ;) – BoltClock Jan 09 '18 at 17:20
  • 1
    When you're dealing with `justify-content` and values such as `left` and `right`, you've gone beyond flexbox. These values are defined in a different spec (CSS Box Alignment) and are intended to apply to all box models, not just flexbox (which has the proprietary `flex-start` and `flex-end`) – Michael Benjamin Jan 09 '18 at 17:23
  • 1
    damn, was about to answer and they closed the question... this is actually a really good topic. From what I could experience, button doesn't accept a `align-items` declaration, but for most cases you can fake it by switching the axis and justify-content. In this particular case, `flex-direction:column; justify-content:flex-end` does the trick. – Facundo Corradini Jan 09 '18 at 17:25
  • 1
    The reason `justify-content` works in block layout with `left` and `right`, and `align-items` doesn't, could be an implementation issue. This is all very new. – Michael Benjamin Jan 09 '18 at 17:25
  • Thanks for your help, Michael - I updated the question from (default) `justify-content: left;` to non-default `justify-content: flex-end` to really hone in on the issue that one declaration is working while the other is not. – Rounin Jan 09 '18 at 17:28
  • You're welcome. If your question is not about why `button` content doesn't respect flex properties, you should vote to re-open. – Michael Benjamin Jan 09 '18 at 17:30
  • No, we're good - I'm satisfied that, in this instance, I'll need to use another element instead of ` – Rounin Jan 09 '18 at 17:41
  • 1
    @Rounin it's unlikely that the question will be re-opened... but please check the answer I provided above and let us know if it works for you. Bottom-left should be `flex-direction:column; justify-content:flex-end`, top-left: `justify-content: flex-start; flex-direction:column;` – Facundo Corradini Jan 09 '18 at 17:42
  • 1
    guys check the pen I just made... https://codepen.io/facundocorradini/pen/RxQMep I was able to position the content in the four different corners by just changing the `flex-direction` and `align-items`, which for whatever reason works when there's no `justify-content` declared – Facundo Corradini Jan 09 '18 at 17:53
  • Thank you @FacundoCorradini - yes I tried it. (When I saw it in your comment above I thought that it had the potential to be a nifty hack.) But it doesn't seem to work on ` – Rounin Jan 09 '18 at 17:54
  • 1
    Check your codepen in Firefox, @FacundoCorradini. – Rounin Jan 09 '18 at 17:55
  • 1
    @Rounin I was at it right now, experimenting and reporting as I go... It looks awful in firefox, works perfectly in Chrome... and believe it or not, it works perfectly in IE. Think I'm having the weirdest dream. – Facundo Corradini Jan 09 '18 at 17:58

0 Answers0