Flex 列表不换行

Question

我有一个看似简单的要求，一个固定大小<ul />的 items列表<div />。列表中的项目应该从左到右布局，填充可用空间，然后再换行到下一行。

这是基本的 HTML

<ul class="list-unstyled d-flex">
  <li><div class="list-box"></div></li>
  <li><div class="list-box"></div></li>
  <li><div class="list-box"></div></li>
  ......
</ul>

这个类.d-flex很简单：

.d-flex {
    display: flex !important;
}

这个类.list-box只控制盒子的大小。

发生的情况是这些框从左到右排列在一行中，如果屏幕宽度的框太多，则会<ul />获得一个水平滚动条。

这是一个工作示例：

<ul class="list-unstyled d-flex">
  <li><div class="list-box"></div></li>
  <li><div class="list-box"></div></li>
  <li><div class="list-box"></div></li>
  ......
</ul>

.d-flex {
    display: flex !important;
}

为什么不<li />包裹？

Answer 1

您需要将flex-wrapclass 与d-flex. 代码笔

<ul class="list-unstyled d-flex flex-wrap">
  <li><div class="list-box"></div></li>
  <li><div class="list-box"></div></li>
  <li><div class="list-box"></div></li>
  ......
</ul>

关于柔性包装

CSS flex-wrap 属性指定了 flex 项目是强制在一行中还是可以在多行中换行。如果允许环绕，则此属性还使您能够控制线堆叠的方向。