将flex项目的内容对齐到底部

Question

非常简单，一个容器必须使其子元素被拉伸（因为它们是这样的），但是子元素div的内容必须与底部对齐，就像flex-end一样，但同时保持高度不变。

你有什么办法吗？

看看这个代码片段：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>

- Chux

---

可能是使用flexbox将元素对齐到底部的重复问题。 - Randy

基本上改变问题的问题在于它使所有现有的答案无效，并为寻求此帖子上的帮助的人们创造了混乱的局面。 - Michael Benjamin

考虑发布一个新的问题。此外，这可能会有所帮助：https://dev59.com/FpHea4cB1Zd3GeqPp347 - Michael Benjamin

Answer 1

使子元素也成为flex容器，然后根据需要对齐。

.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>

或者同样地使用弹性列。

.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>

- Paulie_D

---

这似乎是最好的选择。但是，假设我在子div中有更多元素，例如img和p标签。使用此方法，两者都将对齐到底部：http://codepen.io/anon/pen/NAjRvo - Chux

是的，我知道。我试图让问题简单化，但最终变得太过简单了 ;) 我已经更新了问题。 - Chux

请不要更改问题，这会使现有的答案失效。相反，请提出一个新问题。 - Paulie_D

好的，我会做到。谢谢！ - Chux

你应该意识到新问题很可能已经被问过了。确保你先仔细搜索一下。 - Paulie_D

Answer 2

除了已经提到的关键字属性外，您还可以使用自适应边距：

.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>

- Michael Benjamin

Answer 3

你可以使用绝对定位来实现这个。

为了保持文本居中，你需要设置 left 和 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>

---

你也可以在一个元素上使用grow，这样另一个元素就会占据它所需的空间。在我看来，这不是一个非常干净的解决方案，但它能够起到作用：

.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>

- Randy

---

有没有不用 position absolute 的方法？我对 flex 感到好奇，想知道是否可以“某种方式”实现。 - Chux

@Chux，请看更新，不过另一个答案做得更好 :) - Randy