Flexbox：每行4个项目

您已经

flex-wrap:wrap

在容器上了。很好，因为它会覆盖默认值

nowrap

source。这是在某些情况下项目无法包装形成网格的原因。

在这种情况下，主要问题在于

flex-grow: 1

伸缩项目。

该

flex-grow

属性实际上并没有设置弹性项目的大小。它的任务是在容器源中分配可用空间。因此，无论屏幕尺寸有多小，每一项都会在行中获得一定比例的可用空间。

更具体地说，您的容器中有八个flex项目。使用

flex-grow:1

，每个人将获得行中1/8的可用空间。由于您的项目中没有内容，因此它们可以缩小到零宽度并且永远不会包装。

解决方案是在项目上定义宽度。尝试这个：

.parent {  display: flex;  flex-wrap: wrap;}.child {  flex: 1 0 21%;   margin: 5px;  height: 100px;  background-color: blue;}<div >  <div ></div>  <div ></div>  <div ></div>  <div ></div>  <div ></div>  <div ></div>  <div ></div>  <div ></div></div>

使用简写中的

flex-grow: 1

定义，

flex

不需要为

flex-basis

25％，由于边距，实际上每行将导致三项。

由于

flex-grow

将消耗行上的可用空间，因此

flex-basis

只需要足够大即可执行换行。在这种情况下，使用

flex-basis:21%

，有足够的空间留出边距，但没有足够的空间容纳第五个项目。