Html Flex列表没有包装

我有一个看似简单的要求，一个固定大小的物品清单。在换行到下一行之前，列表中的项目应该从左到右布局，以填充可用空间

下面是基本的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>

类

.list box

只控制框的大小

发生的情况是框从左到右排列成一行，如果屏幕宽度的框太多，

将获得一个水平滚动条

这里有一个：

。列表框{
高度：100px；
宽度：100px；
边框：1px纯黑；
保证金：2倍；
}

引导程序4灵活列表

您需要将

flex-wrap

类与

d-flex

一起使用

......

关于Flex wrap

CSS flex wrap属性指定是否强制使用flex项 成一行或可以包装成多行。如果包装 如果允许，此属性还允许您控制中的方向 哪些线是堆叠的

---

您需要将

flex-wrap

类与

d-flex

一起使用

......

关于Flex wrap

CSS flex wrap属性指定是否强制使用flex项 成一行或可以包装成多行。如果包装 如果允许，此属性还允许您控制中的方向 哪些线是堆叠的

---

简单的回答是，默认情况下，flexbox布局中的项目不会换行。该属性的默认值为

nowrap

。将其设置为

wrap

将使项目按照您的意愿进行包装

.d-flex{
显示：flex！重要；
柔性包裹：包裹；/*添加此*/
}

---

或者，您可以完全取消flexbox布局。只需将列表项设置为

内联块

。它们将一个接一个地放置，并根据需要换行

.my list{
填充：0；
列表样式类型：无；
}
.我的名单李{
显示：内联块；
}
.列表框{
高度：100px；
宽度：100px；
边框：1px纯黑；
保证金：2倍；
}

bootstrap4灵活列表

简单的回答是，默认情况下，flexbox布局中的项目不会包装。该属性的默认值为

nowrap

。将其设置为

wrap

将使项目按照您的意愿进行包装

.d-flex{
显示：flex！重要；
柔性包裹：包裹；/*添加此*/
}

---

或者，您可以完全取消flexbox布局。只需将列表项设置为

内联块

。它们将一个接一个地放置，并根据需要换行

.my list{
填充：0；
列表样式类型：无；
}
.我的名单李{
显示：内联块；
}
.列表框{
高度：100px；
宽度：100px；
边框：1px纯黑；
保证金：2倍；
}

bootstrap4灵活列表

此处解释：此处解释：最好添加

flex wrap

类，并将

flex wrap

属性设置为

wrap

的值。指出你引用的是谁也很好。看看bootstrapThanks使用的

flex-wrap

class的代码，我知道这很简单。。。这里有一个带有附加类的fork:sorry@Justastudent。最好添加

flex-wrap

类，并将

flex-wrap

属性设置为

wrap

。指出你引用的是谁也很好。看看bootstrapThanks使用的

flex-wrap

class的代码，我知道这很简单。。。这里有一个附加类的fork：sorry@Justastudent。

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

<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>