CSS3 flexbox调整垂直对齐元素的高度 [英] CSS3 flexbox adjust height of vertically aligned elements
问题描述
是否可以使 .item-1
高度灵活并调整 .item-2
height?例如:
Is it possible to make .item-1
height flexible and adjust .item-2
height? For example:
- 如果
.item-1
height为10%然后
.item-2
height为90%
- 如果
.item-1
height为11%
,则.item -2
height为89%
- if
.item-1
height is10%
then.item-2
height is90%
- if
.item-1
height is11%
then.item-2
height is89%
根据 .item-1
的内容,我们应该调整它的大小。
So depending on the content of the .item-1
we should resize it.
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
JSFiddle: http://jsfiddle.net/vpetrychuk/SYZtg/2
推荐答案
您无法使用2009年的Flexbox属性,因为没有可比的 flex-basis
属性( box-flex
属性与现代草案中的 flex
属性不同,因为它只能接受单个浮点值而不是0-2个整数和0-1个长度)。
You can't do this with the 2009 Flexbox properties because there is nothing comparable to the flex-basis
property (the box-flex
property from the 2009 draft is not the same thing as the flex
property from the modern draft, as it can only accept a single floating point value rather than 0-2 integers and 0-1 lengths).
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%;
}
这篇关于CSS3 flexbox调整垂直对齐元素的高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!