Question

是否可以使.item-1高度灵活并调整.item-2高度？例如：

如果.item-1身高为10%，则.item-2身高为90%
如果.item-1身高为11%，则.item-2身高为89%

因此，根据.item-1的内容，我们应该调整它的大小。

HTML

<div class="container">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
</div>

CSS

html,
body,
.container {
    height: 100%;
}
.container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-flow: column;
    -moz-flex-flow: column;
    -ms-flex-flow: column;
    flex-flow: column;
}
.item {
    background: #eee;
    margin: 1px;
}
.item-1 {
  -webkit-box-flex: 3 3 100%;
  -moz-box-flex: 3 3 100%;
  -webkit-flex: 3 3 100%;
  -ms-flex: 3 3 100%;
  flex: 3 3 100%;
}
.item-2 {
  -webkit-box-flex: 1 1 100%;
  -moz-box-flex: 1 1 100%;
  -webkit-flex: 1 1 100%;
  -ms-flex: 1 1 100%;
  flex: 1 1 100%;
}

JSFiddle：http://jsfiddle.net/vpetrychuk/SYZtg/2

Answer 1

您无法使用2009 Flexbox属性执行此操作，因为没有与flex-basis属性相当的内容（2009草稿中的box-flex属性与{{1}不同来自现代草案的属性，因为它只能接受单个浮点值而不是0-2个整数和0-1个长度。）

http://codepen.io/cimmanon/pen/AGLge

flex

CSS3 flexbox调整垂直对齐元素的高度

1 个答案: