Flexbox: 4 items per row这个问题的出现的原因是当子元素数量不足4个时，会出现空白的空间，导致子元素不具有响应式。为了解决这个问题，可以使用flex布局，并设置flex-wrap属性为wrap。然后给子元素设置宽度为25%并使用box-sizing属性设置为border-box。

具体的解决方法如下所示：

.parent{
  display: flex;
  flex-wrap: wrap;
}
.child{
  width: 25%;
  box-sizing: border-box;
}

可以通过以下链接查看一个示例：https://codepen.io/capynet/pen/WOPBBm

如果有少于4个子元素，以上解决方案也适用，并且不会出现空白的空间。这个解决方案相对于其他使用flex设置的解决方案更加简洁。

你可以通过以下链接查看一个更完整的示例：https://codepen.io/capynet/pen/JyYaba

Flexbox: 4个项目每行的问题出现的原因是容器上设置了flex-wrap: wrap。这是很好的，因为它覆盖了默认值nowrap。这就是为什么在某些情况下项目不会换行形成网格的原因。

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

flex-grow属性实际上不会调整项目的大小。它的任务是在容器中分配自由空间。所以无论屏幕尺寸有多小，每个项目都会在行上获得一个比例部分的自由空间。

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

解决方法是在项目上定义一个宽度。可以尝试以下代码：

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

flex-grow: 1在flex缩写中定义，不需要flex-basis为25%，因为由于边距的存在，实际上会导致每行只有三个项目。

由于flex-grow会占用行上的自由空间，flex-basis只需要足够大以强制换行。在这种情况下，flex-basis: 21%有足够的空间容纳边距，但永远不会有足够的空间容纳第五个项目。

我喜欢这个解决方法，因为它对我有效，但是“足够的空间”让我感到有点不安。是否存在某种微小的窗口或情况，这个“估计”可能会让我失望？

什么情况？在大多数布局中，都存在一些极端情况可能会导致问题。这些情况通常通过成本效益分析而不会发生或几乎不会发生。例如，在上面的解决方法中，如果您使用非常大的边距，布局可能会破裂。如果这是一个问题，那么应该在问题中提出。

“如果您使用非常大的边距，布局可能会破裂”这是一个我想避免的场景的例子。我不关心实用性，满足我对完美的喜爱。有没有更精确的方法？

您还可以使用flex: 1 0 calc(25% - 10px);

这种方法更常用的是通过父元素的填充和负边距来处理，这将允许您实际使用完整的25%的flex-basis。这是大多数网格库在过去实现的方法。

很棒的答案！我使用的一个小改进是使用margin: 2%;而不是固定的像素数，以防止在小设备/分辨率上项目跳到新行。不同的项目宽度的一般公式是(100 - (4 * box-width-percent)) / 8%。

如果有人忘记了，这里的flex属性是以下属性的缩写：flex-grow: 1; flex-shrink: 0; flex-basis: 21%;

我还喜欢处理换行和动态边距的另一种方法是使用+选择器，然后使用nth-child选择想要换行的位置。例如：.child+.child { margin-left: 2% }然后.child:nth-child(3n +1) { margin-left: 0%; }或类似的方法。

您还可以查看这种方法：stackoverflow.com/a/45038018/3448527

每次我使用flex来做一些很酷的东西时，我都感到非常感激，因为我们不再处于Web开发的黑暗时代。

Flexbox是一种用于创建灵活的布局的CSS属性。在这个问题中，用户想要实现每行显示4个子元素的布局。然而，在尝试使用Flexbox时，他们遇到了一些问题。

问题的原因是，子元素没有设置宽度。解决方法是给子元素添加一个宽度属性。用户建议使用百分比来设置子元素的左边距，以便在每行始终显示4个元素。

以下是用户提供的示例代码：

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

用户尝试了这个方法并做了一些微小的修改。然而，这个方法并没有解决他们的问题。他们指出，他们不能使用百分比作为边距，因为边距必须是固定宽度。这意味着之前选择的23%不起作用，因为它没有考虑到固定边距。

然后，有人提出使用calc函数来解决问题。他们给出了一个示例代码：

'calc(100% * (1/4) - 10px - 1px)'

这个方法解决了问题，并实现了每行显示4个子元素的布局。

然而，其他一些用户提出了一些问题。其中一个问题是关于响应式设计的。他们希望避免在子元素上设置固定宽度。另一个问题是如何实现每行显示两个元素的布局。

问题的原因是子元素没有设置宽度。解决方法是使用calc函数来计算子元素的宽度。尽管这种方法解决了问题，但它可能不适用于所有情况，特别是在响应式设计中。