如何实现多行flexbox? [英] How do I implement a multi-line flexbox?
问题描述
尽管我的Googling,我发现了几个例子,如何实现多行flexboxes。我从例子中得到的代码都没有工作。我在一个flexbox中有三个元素,我想要第一个在顶部,第二个和第三个在底部一行。
< div class =flexbox>
< div id =element1>元素1< / div>
< div id =element2>元素2< / div>
< div id =element3>元素3< / div>
< / div>
我尝试过使用这些属性:
< pre class =lang-css prettyprint-override>
.flexbox {
width:300px;
display:box;
display:-webkit-box;
display:-moz-box;
box-lines:multiple;
flex-wrap:wrap;
}
#element1 {
width:100%;
}
并赋予它一个设置宽度,但它仍然不会换行,即使第一元件具有100%的宽度。
弹出框规格有更改,并且您使用的是旧语法。我相信的新规格目前只实现在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>
和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;
}
上面链接的spec页面有很多例子。
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.
<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?
The flex box spec has changed in 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
<div id="flexbox">
<div class="box">DIV 1</div>
<div class="box">DIV 2</div>
<div class="box">DIV 3</div>
</div>
and 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.
这篇关于如何实现多行flexbox?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!