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号后强行休息，给它们一个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>

以下是处理未来可能出现问题的精彩文章：

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

使用flexbox，如何将项目列表跨越两列？

1 个答案: