Flexbox：每行 4 个项目

容器上有 flex-wrap: wrap。这很好，因为它会覆盖默认值 nowrap (source)。这就是项目在 some cases 中不换行形成网格的原因。

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

flex-grow 属性实际上并不调整弹性项目的大小。它的任务是在容器 (source) 中分配可用空间。所以无论屏幕尺寸多小，每个项目都会收到成比例的部分可用空间就行了。

更具体地说，您的容器中有八个弹性项目。使用 flex-grow: 1，每个人都会获得 1/8 的可用空间。由于您的项目中没有内容，它们可以缩小到零宽度并且永远不会换行。

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

.parent { 显示：弹性；弹性包装：换行； } .child { 弹性：1 0 21%; /* 下面解释 */ margin: 5px;高度：100px；背景颜色：蓝色； }

在 flex 简写中定义 flex-grow: 1 后，flex-basis 无需为 25%，由于边距，这实际上会导致每行三个项目。

由于 flex-grow 将占用行上的可用空间，因此 flex-basis 只需大到足以强制执行换行即可。在这种情况下，使用 flex-basis: 21%，边距有足够的空间，但没有足够的空间容纳第五个项目。

---

为 .child 元素添加宽度。如果您希望每行总是 4 个，我个人会在 margin-left 上使用百分比。

DEMO

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

---

这是另一种方法。

您也可以通过这种方式完成它：

.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

---

我会这样做，使用负边距和计算排水沟：

.parent {
  display: flex;
  flex-wrap: wrap;
  margin-top: -10px;
  margin-left: -10px;
}

.child {
  width: calc(25% - 10px);
  margin-left: 10px;
  margin-top: 10px;
}

演示： https://jsfiddle.net/9j2rvom4/

替代 CSS 网格方法：

.parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

演示： https://jsfiddle.net/jc2utfs3/

---

有关更多详细信息，您可以关注此Link

.parent{ 显示：弹性；弹性包装：换行； } .parent .child{ 弹性：1 1 25%; /*开始运行代码片段输出CSS*/ padding: 5px; box-sizing：边框框；文本对齐：居中；边框：1px 实心#000； /*End Run Code Snippet output CSS*/ }

---

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

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

这在直接切肉的同时完成了相同的宽度计算。由于其可扩展性和移动友好性，数学计算要容易得多，em 就是 new standard。

---

.parent-wrapper { 高度：100%;宽度：100%；边框：1px纯黑色； } .parent { 显示：弹性；字体大小：0；弹性包装：换行；右边距：-10px；边距底部：-10px； } .child { 背景：蓝色；高度：100px；弹性增长：1；弹性收缩：0；弹性基础：计算（25% - 10px）； } .child:nth-child(even) { 边距：0 10px 10px 10px;背景颜色：石灰； } .child:nth-child(odd) { 背景色：橙色； } < /head>

;)

---

Flex wrap + 负边距

为什么选择 flex 与 display: inline-block？

Flex 为元素大小提供了更大的灵活性

内置白色间距折叠（请参阅 3 个宽度正好为 33% 的内联块 div 不适合父级）

为什么是负边距？

要么使用 SCSS 或 CSS-in-JS 处理边缘情况（即列中的第一个元素），要么设置默认边距并稍后去掉外边距。

执行

https://codepen.io/zurfyx/pen/BaBWpja

<div class="outerContainer">
    <div class="container">
        <div class="elementContainer">
            <div class="element">
            </div>
        </div>
        ...
    </div>
</div>

:root {
  --columns: 2;
  --betweenColumns: 20px; /* This value is doubled when no margin collapsing */
}

.outerContainer {
    overflow: hidden; /* Hide the negative margin */
}

.container {
    background-color: grey;
    display: flex;
    flex-wrap: wrap;
    margin: calc(-1 * var(--betweenColumns));
}

.elementContainer {
    display: flex; /* To prevent margin collapsing */
    width: calc(1/var(--columns) * 100% - 2 * var(--betweenColumns));
    margin: var(--betweenColumns);
}

.element {
    display: flex;
    border: 1px solid red;
    background-color: yellow;
    width: 100%;
    height: 42px;
}

---

你可以试试这个

.parent-wrapper { 高度：100%;宽度：100%；边框：1px纯黑色； } .parent { 显示：网格；字体大小：0；网格模板列：25% 25% 25% 25%； } .child { 背景：蓝色；弹性增长：1；高度：100px；边距：10px；边距底部：0； } .child:last-child { margin-bottom: 10px; }

https://jsfiddle.net/samet19/gdntwLhb/

---

这是不使用 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!

这里的所有都是它的。您可以花哨的尺寸来获得更美观的尺寸，但这就是我们的想法。

---