Chux Chux - 5 months ago 12
CSS Question

Align content of flex items to bottom

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>




Answer

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>

Comments