当flex项被强制为新行时，它如何保持相同的尺寸？

Question

我有一个有3个孩子的弹性容器。每个孩子都设置了min-width和.container{ display: flex; flex-flow: row wrap; justify-content: space-between; margin-right: -10px; } .child{ flex-grow: 1; max-width: 450px; min-width: 350px; margin-top: 10px; margin-right: 10px; background: blue; height: 400px; }，这样当屏幕尺寸发生变化时，我可以让它们看起来不错，而不需要太多努力。

<div class="container">
  <div class="child">
    test content
  </div>
  <div class="child">
    test content
  </div>
  <div class="child">
    test content
  </div>
</div>

{{1}}

问题在于，当屏幕变得如此之小以至于其中一个孩子被迫进入新行时，它与其上面的其他2个孩子的大小不同：

是否有强迫新行上的孩子与其兄弟姐妹一样宽度？

小提琴：https://jsfiddle.net/1ekdkbvk/

Answer 1

最后一个插槽中的隐形弹性项目可能适合您。

将此代码添加到CSS：

.container::after {
    content: "";
    flex-grow: 1;
    max-width: 450px;
    min-width: 350px;
}

DEMO

<强>更新

我忘了添加一条规则，这会导致伪元素右侧略微溢出。

.container::after {
    content: "";
    flex-grow: 1;
    max-width: 450px;
    min-width: 350px;
    margin-right: 10px;        /* to match the other flex items */
}

REVISED DEMO

此相关帖子中的详细信息： Properly sizing and aligning the flex item(s) on the last row

Answer 2

从flex-grow: 1;移除.child即可解决您的问题。

.child{
  max-width: 450px;
  min-width: 350px;
  margin-top: 10px;
  margin-right: 10px;
  background: blue;
  height: 400px;
}

<强> Working Fiddle

或其他解决方案：

将flex-basis: 100%;用于.child。

<强> Fiddle