将flex项目的内容对齐到底部 [英] Align content of flex items to bottom

问题描述

很简单，容器必须让它的孩子伸展（像他们一样），但是孩子的div的内容必须和底部对齐，和flex-end一样，但保持高度。

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?

看看这支笔：
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>

推荐答案

让子项弹性容器也一样。

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>

flex-columns

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>

这篇关于将flex项目的内容对齐到底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！