html - 使用 flexbox，如何使元素列表跨越两列？

Question

使用 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 吗？如何从显示在另一列的列表中获取其余元素？

Answer 1

ì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 可能出现的问题的好帖子:

• Remove space (gaps) between multiple lines of flex items when they wrap