使用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;
}

我需要在项目类上使用灵活的基础吗？如何从显示在另一列上的列表中获取其余的项？

Answer 1

当没有空间让所有的人都适应的时候，ìtem将进入一个新的列，所以在这种情况下，为了在第4节之后强制中断，给他们一个50 to的高度。

此外，要允许它们包装，还需要添加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>

​

这里有一篇关于未来可能出现的问题的很好的文章：

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