如何垂直对齐flex项目内的内容？

Question

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

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

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>

Answer 1

您可以使用webkit-align-items到m

-webkit-align-items:flex-end;  

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

Answer 2

您可以将容器上align-items的值从stretch切换为flex-end。也许这就是你正在寻找的东西。

＆＃13;

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但是因为你的实际问题是：

  

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

...然后你应该将flex项目变成嵌套的flex容器，并使内容与flex属性垂直对齐：

＆＃13;

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;