如何垂直对齐Flex项目内的内容？ [英] How to vertically align the content inside flex items?

问题描述

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

有没有办法来重写flex项目的垂直对齐，以便他们的孩子在底部对齐？ data-console =falsedata-console =false> div class =snippet-code>

div.flexbox {display：flex; align-items：stretch; / * cross axis * / justify-content：space-between; / *主轴* / flex-flow：换行; border-bottom：1px solid #ddd; item-1，.item-2 {padding：10px;}。item-1 {width：30％; min-height：100px;} position：relative;}。item-2 {width：60％;}

 < div class =flexbox> < div class =item-1> < span>我想要在项目1的底部对齐< / span> < / DIV> < div class =item-2> < span>我想在第2项的底部对齐< / span> < / div>< / div>  

解决方案

结束;

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

I have a flexbox header that contains two child flex items. These flex items in turn have their own children.

Is there a way to override the vertical alignment of the flex items so that their children are aligned at the bottom?

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>

解决方案

You can use webkit-align-items to m

-webkit-align-items:flex-end;  

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

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