html - 如何垂直对齐 flex 元素中的内容？

Question

我有一个 flexbox header ，其中包含两个子 flex 元素。这些 flex 元素又拥有自己的 child 。

有没有办法覆盖 flex 元素的垂直对齐方式，以便它们的子项在底部对齐？

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/