Html 如何实现多行 flexbox？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12683595/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I implement a multi-line flexbox?
提问by zakdances
Despite my Googling, I've found few examples on how to implement multiple line flexboxes. None of the code I've gotten from examples has worked. I have three elements inside a flexbox and I want the first to be on top and the second and third to be on the bottom row.
尽管我在谷歌上搜索，但我发现很少有关于如何实现多行 flexbox 的示例。我从示例中得到的代码都没有奏效。我在 flexbox 中有三个元素，我希望第一个在顶部，第二个和第三个在底行。
<div class="flexbox">
<div id="element1">element 1</div>
<div id="element2">element 2</div>
<div id="element3">element 3</div>
</div>
I've tried using these properties:
我试过使用这些属性：
.flexbox {
width: 300px;
display: box;
display: -webkit-box;
display: -moz-box;
box-lines: multiple;
flex-wrap: wrap;
}
#element1 {
width: 100%;
}
and giving it a set width but it still won't wrap, even if the first element has a width of 100%. Am I missing certain vendor prefixes or is my syntax wrong?
并给它一个设置的宽度，但它仍然不会换行，即使第一个元素的宽度为 100%。我是否缺少某些供应商前缀或我的语法错误？
采纳答案by Rob
The flex box spec has changedin the last few months and you are using the old syntax. The new spec I believe is only currently implemented only in Chrome Canary and to some extent in latest chrome. (It's a little buggy) box-lines multiple is gone so to achieve this vertical layout there are a few ways. Using -webkit-flex-direction:column; so
弹性盒规范在过去几个月发生了变化，您正在使用旧语法。我认为新规范目前仅在 Chrome Canary 中实现，并且在某种程度上在最新的 chrome 中实现。（这是一个小错误）多条框线不见了，因此有几种方法可以实现这种垂直布局。使用 -webkit-flex-direction:column; 所以
<div id="flexbox">
<div class="box">DIV 1</div>
<div class="box">DIV 2</div>
<div class="box">DIV 3</div>
</div>
and css :
和CSS：
#flexbox {
display: -webkit-flex;
-webkit-flex-direction: column;
width: 500px;
height: auto;
min-height: 200px;
}
#flexbox .box {
-webkit-flex: 1;
}
Using wrapping:
使用包装：
-webkit-flex-wrap: wrap;
and setting your direction to:
并将您的方向设置为：
-webkit-flex-direction: row;
So
所以
<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;
}
There's a whole bunch of examples on the spec page linked above.
上面链接的规范页面上有一大堆示例。
回答by Jayampathy Wijesena
Use the flex-directionattribute.
使用flex-direction属性。
.container { flex-direction: row | row-reverse | column | column-reverse; }
.container { flex-direction: row | row-reverse | column | column-reverse; }
refer flowing article : http://fend-tricks.com/flexbox-intro/
参考流动文章：http: //fend-tricks.com/flexbox-intro/
