尽管我使用谷歌搜索,但我发现很少有关于如何实现多行 flexbox 的示例。我从示例中获得的所有代码均无效。我在 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 规范有 changed在过去的几个月中,您使用的是旧语法。我认为新规范目前仅在 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;
}
上面链接的规范页面上有一大堆示例。
关于html - 如何实现多行 flexbox?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12683595/