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 maintain

Solution 1:

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>

Solution 2:

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>

Solution 3:

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>