有没有办法改变垂直对齐的项目里面弹性项目？ [英] Is there a way to change the vertical-align of items inside flex-items?

问题描述

所以我有一个flexbox标题，包含两个子项flex。这些flex项目又有自己的孩子。

So 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-align of the flex-items so that their children are aligned at the bottom?

JSFiddle 这里（可能无法在Safari和

JSFiddle here (might not work in Safari and FF. Tested in latest version of Chrome).

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

CSS

CSS

div.flexbox {
  display: -webkit-flex;
  -webkit-align-items: stretch; /* cross axis */
  -webkit-justify-content: space-between; /* main axis */
  -webkit-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%;
}​

推荐答案

align-items to m

You can use webkit-align-items to m

-webkit-align-items:flex-end;  

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

这篇关于有没有办法改变垂直对齐的项目里面弹性项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！