为.child元素添加宽度。如果你想每行都是4，我个人会在左边空白处使用百分比。

DEMO

.child {
    display: inline-block;
    background: blue;
    margin: 10px 0 0 2%;
    flex-grow: 1;
    height: 100px;
    width: calc(100% * (1/4) - 10px - 1px);
}

我相信这个例子比@dowomenfart更简单，更容易理解。

.child {
    display: inline-block;
    margin: 0 1em;
    flex-grow: 1;
    width: calc(25% - 2em);
}

在直接切到肉的同时，这实现了相同的宽度计算。计算起来更简单，由于其可扩展性和移动友好性，em成为了新的标准。

这是另一种方法。

你也可以用这种方式来实现:

.parent{
  display: flex;
  flex-wrap: wrap;
}

.child{
  width: 25%;
  box-sizing: border-box;
}

示例: https://codepen.io/capynet/pen/WOPBBm

还有一个更完整的样本: https://codepen.io/capynet/pen/JyYaba

你有弹性包装:包裹在容器上。这很好，因为它覆盖了默认值nowrap (source)。这就是为什么在某些情况下，物品不会被包装成网格的原因。

在这种情况下，主要问题是伸缩项目上的flex-grow: 1。

flex-grow属性实际上并不调整伸缩项的大小。它的任务是在容器(源)中分配空闲空间。所以不管屏幕大小有多小，每个项目都将获得相应比例的在线空闲空间。

更具体地说，容器中有8个伸缩项。使用flex-grow: 1，每一个都接收一行上1/8的空闲空间。因为你的项目中没有内容，它们可以收缩到零宽度，永远不会自动换行。

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

.parent { 显示:flex; flex-wrap:包装; ｝ .child { Flex: 10 21%;*/下面的/*解释 保证金:5 px; 身高:100 px; 背景颜色:蓝色; ｝ < div class = "父" > < div class = "孩子" > < / div > < div class = "孩子" > < / div > < div class = "孩子" > < / div > < div class = "孩子" > < / div > < div class = "孩子" > < / div > < div class = "孩子" > < / div > < div class = "孩子" > < / div > < div class = "孩子" > < / div > < / div >

使用flex简写中定义的flex-grow: 1，就不需要flex- base为25%，这实际上会导致每行有3个项。

由于flex-grow会消耗行上的空闲空间，因此flex-basis只需要足够大就可以强制换行。在这种情况下，如果采用21%的弹性计价制，就会有足够的空间放置页边距，但永远没有足够的空间放置第五项。

这里有另一种不使用calc()的方法。

// 4 PER ROW
// 100 divided by 4 is 25. Let's use 21% for width, and the remainder 4% for left & right margins...
.child {
  margin: 0 2% 0 2%;
  width: 21%;
}

// 3 PER ROW
// 100 divided by 3 is 33.3333... Let's use 30% for width, and remaining 3.3333% for sides (hint: 3.3333 / 2 = 1.66666)
.child {
  margin: 0 1.66666% 0 1.66666%;
  width: 30%;
}

// and so on!

这就是它的全部。你可以在尺寸上花点心思来获得更美观的尺寸，但这就是我们的想法。

欲了解更多细节，请点击此链接

.parent{ display: flex; flex-wrap: wrap; } .parent .child{ flex: 1 1 25%; /*Start Run Code Snippet output CSS*/ padding: 5px; box-sizing: border-box; text-align: center; border: 1px solid #000; /*End Run Code Snippet output CSS*/ } <div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> <div class="child">6</div> <div class="child">7</div> <div class="child">8</div> </div>