使用 flexbox,如何使元素列表跨越两列?
例如:
2 toyota
1 mazda
8 audi
4 nissan
7 bmw
9 lexus
上面的内容是:
2 toyota 7 bmw
1 mazda 9 lexus
8 audi
4 nissan
HTML:
<div class="container">
<div class="item">2 toyota</div>
<div class="item">1 mazda</div>
<div class="item">8 audi</div>
<div class="item">4 nissan</div>
<div class="item">7 bmw</div>
<div class="item">9 lexus</div>
</div>
CSS:
.container {
display: flex;
flex-direction: column;
height: 200px;
}
我需要在元素类上使用 flex-basis 吗?如何从显示在另一列的列表中获取其余元素?
最佳答案
ìtem
将在没有剩余空间容纳所有内容时换行到一个新列中,因此在这种情况下,要在第 4 个之后强制中断,请给它们一个 50px 的高度.
此外,要允许它们换行,您还需要添加 flex-wrap: wrap
。
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 200px;
}
.container .item {
flex-basis: 50px;
}
<div class="container">
<div class="item">2 toyota</div>
<div class="item">1 mazda</div>
<div class="item">8 audi</div>
<div class="item">4 nissan</div>
<div class="item">7 bmw</div>
<div class="item">9 lexus</div>
</div>
这是一篇处理 future 可能出现的问题的好帖子:
关于html - 使用 flexbox,如何使元素列表跨越两列?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45591674/