如何垂直对齐弹性项目内的内容？答案

【问题标题】：How to vertically align the content inside flex items?如何垂直对齐弹性项目内的内容？
【发布时间】：2012-12-10 07:49:21
【问题描述】：

我有一个包含两个子弹性项目的弹性框标题。这些弹性项目又拥有自己的孩子。

有没有办法覆盖弹性项目的垂直对齐方式，使其子项在底部对齐？

div.flexbox {
  display: flex;
  align-items: stretch; /* cross axis */
  justify-content: space-between; /* main axis */
  flex-flow: row wrap;
  border-bottom: 1px solid #ddd;
  min-height: 100px;
}

.item-1, .item-2 {
  padding: 10px;
}

.item-1 {
  width: 30%;
  position: relative;
}

.item-2 {
  width: 60%;
}

<div class="flexbox">
  <div class="item-1">
    <span>I want to be aligned at the bottom of item-1</span>
  </div>

  <div class="item-2">
    <span>I want to be aligned at the bottom of item-2</span>
  </div>
</div>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

你可以使用 webkit-align-items 来 m

-webkit-align-items:flex-end;

http://jsfiddle.net/5N2km/1/

【讨论】：

在这种情况下我不能这样做，因为我希望弹性项目拉伸：jsfiddle.net/5N2km/2。我想要的是让弹性项目的孩子在底部对齐。也许我也应该制作 item-1 和 item-2 flexbox，然后在它们上应用 align-items flex-end，如下所示：jsfiddle.net/5N2km/3?
是的，使项目也 flexbox 并应用 'align-items' 将起作用，正如您在此 jsfiddle.net/5N2km/3 中所展示的那样

【解决方案2】：

您可以将容器上的align-items 的值从stretch 切换为flex-end。也许这就是你要找的。p>

div.flexbox {
  display: flex;
  align-items: flex-end;  /* adjusted */
  justify-content: space-between;
  flex-flow: row wrap;
  border: 1px solid black;
  min-height: 100px;
  padding: 5px;
}

.item-1, .item-2 {
  padding: 10px;
  border: 1px dashed red;
}

.item-1 {
  width: 30%;
  position: relative;
}

.item-2 {
  width: 60%;
}

<div class="flexbox">
  <div class="item-1">
    <span>I want to be aligned at the bottom of item-1</span>
  </div>

  <div class="item-2">
    <span>I want to be aligned at the bottom of item-2</span>
  </div>
</div>

但是由于您的实际问题是：

有没有办法覆盖弹性项目的垂直对齐方式以便它们的子项在底部对齐？

...那么您应该将 flex 项放入嵌套的 flex 容器中，并将内容与 flex 属性垂直对齐：

div.flexbox {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-flow: row wrap;
  border: 1px solid black;
  min-height: 100px;
  padding: 5px;
}

.item-1, .item-2 {
  display: flex;          /* new */
  align-items: flex-end;  /* new */
  padding: 10px;
  border: 1px dashed red;
}

.item-1 {
  width: 30%;
  position: relative;
}

.item-2 {
  width: 60%;
}

<div class="flexbox">
  <div class="item-1">
    <span>I want to be aligned at the bottom of item-1</span>
  </div>

  <div class="item-2">
    <span>I want to be aligned at the bottom of item-2</span>
  </div>
</div>

【讨论】：