如何实现多行FlexBox?
题
尽管我的谷歌曲,我发现了一些关于如何实现多行Flexboxes的示例。我从例子中得到的代码都没有工作。我有三个元素在FlexBox内,我希望第一个将在顶部和第二个和第三个中位于底部行上。
<div class="flexbox">
<div id="element1">element 1</div>
<div id="element2">element 2</div>
<div id="element3">element 3</div>
</div>
.
我尝试过使用这些属性:
.flexbox {
width: 300px;
display: box;
display: -webkit-box;
display: -moz-box;
box-lines: multiple;
flex-wrap: wrap;
}
#element1 {
width: 100%;
}
.
并给出一个设置宽度,但它仍然不会包装,即使第一元素的宽度为100%。我缺少某些供应商的前缀,还是我的语法错误?
解决方案
flex box spec有在过去几个月里更改了,您正在使用旧语法。我认为目前只在Chrome金丝雀和某种程度上实现了新的规格。(这是一点点越野车)盒子线已经消失了,以实现这种垂直布局有几种方式。使用-webkit-flex方向:列;所以
<div id="flexbox">
<div class="box">DIV 1</div>
<div class="box">DIV 2</div>
<div class="box">DIV 3</div>
</div>
.
和css:
#flexbox {
display: -webkit-flex;
-webkit-flex-direction: column;
width: 500px;
height: auto;
min-height: 200px;
}
#flexbox .box {
-webkit-flex: 1;
}
.
使用包装:
-webkit-flex-wrap: wrap;
.
并将方向设置为:
-webkit-flex-direction: row;
.
所以
<div id="flexbox">
<div class="box">DIV 1</div>
<div class="box">DIV 2</div>
<div class="box">DIV 3</div>
<div class="box">DIV 4</div>
<div class="box bigger">DIV 5</div>
<div class="box">DIV 6</div>
</div>
#flexbox {
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-flex-wrap: wrap;
width: 500px;
height: auto;
min-height: 200px;
}
#flexbox .box {
-webkit-flex: 130px 1;
}
#flexbox .box.bigger {
-webkit-flex: 330px 1;
}
.
在上面链接的规格页面上有一系列例子。
其他提示
使用flex-direction
属性。
.container { flex-direction: row | row-reverse | column | column-reverse; }
不隶属于 StackOverflow