Align content of flex items to bottom

Question

Very simple, a container has to have its children stretched (as they are), but the content of the children divs has to be aligned to the bottom, same as flex-end but while maintaining the height.

Any ideas about how to do that?

Take a look at this pen: http://codepen.io/anon/pen/NAjRvo

.container {
  height: 100px;
  background: BurlyWood;
  display: flex;
  align-items: stretch;
}

.item{
  flex:1;
  margin: 4px;
  background: Crimson;
}

.item p {
  margin: 0;
  text-align: center;
}

<div class="container">
  <div class="item">
    <p>lorem</p>
  </div>
  
  <div class="item">
    <p>ipsum</p>
  </div>
  
  <div class="item">
    <p>dolor</p>
  </div>
</div>

Possible duplicate of [Align an element to bottom with flexbox](http://stackoverflow.com/questions/31000885/align-an-element-to-bottom-with-flexbox) — Randy, Jun 30 '16 at 14:20
The problem with fundamentally changing the question is that it invalidates all existing answers and creates a mess of confusion for people seeking help on this post. — Michael Benjamin, Jun 30 '16 at 14:29
Consider posting a new question. Also, this may help: http://stackoverflow.com/q/33944163/3597276 — Michael Benjamin, Jun 30 '16 at 14:30

score 4 · Accepted Answer · answered Jun 30 '16 at 14:11

4

Make the children flex-containers as well.. then align accordingly

.container {
  height: 100px;
  background: BurlyWood;
  display: flex;
}

.item{
  flex:1;
  margin: 4px;
  background: Crimson;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.item p {
  margin: 0;
  text-align: center;
}

<div class="container">
  <div class="item">
    <p>lorem</p>
  </div>
  
  <div class="item">
    <p>ipsum</p>
  </div>
  
  <div class="item">
    <p>dolor</p>
  </div>
</div>

Or similarly with flex-columns

.container {
  height: 100px;
  background: BurlyWood;
  display: flex;
}

.item{
  flex:1;
  margin: 4px;
  background: Crimson;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.item p {
  margin: 0;
  text-align: center;
}

<div class="container">
  <div class="item">
    <p>lorem</p>
  </div>
  
  <div class="item">
    <p>ipsum</p>
  </div>
  
  <div class="item">
    <p>dolor</p>
  </div>
</div>

answered Jun 30 '16 at 14:11

Paulie_D

107,962
13
142
161

This seems the best option. But, lets pretend I have more elements in the children div's, for example, and img and a p tag. With this method, both will be aligned to the bottom: http://codepen.io/anon/pen/NAjRvo – Chux Jun 30 '16 at 14:20
That would depend on how you want the other elements aligned. If you don't mention other elements we can't account for them. - BUT - http://codepen.io/Paulie-D/pen/JKNRvN for instance. – Paulie_D Jun 30 '16 at 14:22
yes, I know that. I tried to make the question simple, but I ended up with a too simple question ;) I have updated the question. – Chux Jun 30 '16 at 14:27
Please don't change the question that would invalidate existing answers. Ask a new question instead, – Paulie_D Jun 30 '16 at 14:28
Ok, ill do that. Thanks! – Chux Jun 30 '16 at 14:29
You should be aware that the new question is likely to have been asked already. Make sure you search carefully first. – Paulie_D Jun 30 '16 at 14:31
Of course I search first, is faster to find the answer than having to formulate the question and wait for the answer ;) – Chux Jun 30 '16 at 14:33
Generally though, in flexbox "center and bottom" requires positioning. There is no method within flexbox to do both at the same time - http://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties/33856609#33856609 – Paulie_D Jun 30 '16 at 14:35

score 1 · Answer 2 · edited May 23 '17 at 12:32

In addition to the keyword properties already mentioned, you can also use flex auto margins:

.container {
  height: 100px;
  background: BurlyWood;
  display: flex;
  align-items: stretch;
}
.item {
  flex: 1;
  margin: 4px;
  background: Crimson;
  justify-content: center;
  text-align: center;
  display: flex;             /* NEW */
}
.item p {
  margin: auto 0 0 0;        /* ADJUSTED */
}

<div class="container">
  <div class="item">
    <p>lorem</p>
  </div>
  <div class="item">
    <p>ipsum</p>
  </div>
  <div class="item">
    <p>dolor</p>
  </div>
</div>

Randy · Answer 3 · 2016-06-30T14:15:10.633

You can use position absolute for that.

In order to keep the text centered, you need left and right:0.

.container {
  height: 100px;
  background: BurlyWood;
  display: flex;
  align-items: stretch;
}

.item{
  flex:1;
  margin: 4px;
  background: Crimson;
  position:relative;
}

.item p {
  margin: 0;
  text-align: center;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
}

<div class="container">
  <div class="item">
    <p>lorem</p>
  </div>
  
  <div class="item">
    <p>ipsum</p>
  </div>
  
  <div class="item">
    <p>dolor</p>
  </div>
</div>

You could also use grow on one element, so the other will just take space that it requires. This is not a real clean solution in my eyes, but it works:

.container {
  height: 100px;
  background: BurlyWood;
  display: flex;
  align-items: stretch;
}

.item{
  flex:1;
  margin: 4px;
  background: Crimson;
  display:flex;
  flex-direction: column;
}

.item div {
  flex:1;
}

.item p {
  margin: 0;
  text-align: center;
}

<div class="container">
  <div class="item">
    <div>&nbsp;</div>
    <p>lorem</p>
  </div>
  
  <div class="item">
    <div>&nbsp;</div>
    <p>ipsum</p>
  </div>
  
  <div class="item">
    <div>&nbsp;</div>
    <p>dolor</p>
  </div>
</div>

Anyway to do that without position absolute? Just curious about flex and I thought it could be done "somehow" — Chux, Jun 30 '16 at 14:11
@Chux see update, however the other answer does a better job :) — Randy, Jun 30 '16 at 14:15

Align content of flex items to bottom

3 Answers3

Linked