CSS3 flexbox調整垂直對齊元素的高度

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

，因爲沒有什麼比得上flex-basis屬性（在box-flex不能與2009年的Flexbox的性能做到這一點來自2009年草案的財產與來自模式的flex財產不同草案，因爲它只能接受一個浮點值而不是0-2整數和0-1長度）。

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

html, 
body, 
.container { 
    height: 100%; 
} 

.container { 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-direction: column; 
    -ms-flex-direction: column; 
    flex-direction: column; 
} 

.item { 
    background: #eee; 
    margin: 1px; 
} 

.item-1 { 
    -webkit-flex: 1 1 10%; 
    -ms-flex: 1 1 10%; 
    flex: 1 1 10%; 
} 

.item-2 { 
    -webkit-flex: 1 1 90%; 
    -ms-flex: 1 1 90%; 
    flex: 1 1 90%; 
}