设置flex-wrap的Flex容器无法换行，求问题原因及解决方法

首先，你的代码其实已经具备换行能力，但换行的触发条件和你预期的可能不太一样，或者你测试时的容器宽度还没达到触发阈值。咱们来拆解一下：

原代码的问题分析 #

你给子元素设置了min-width: 200px，这意味着每个子元素的宽度永远不会低于200px，再加上flex-grow: 1会让子元素平分容器的剩余空间。这就导致：只有当容器的宽度小于「所有子元素min-width的总和」（这里是3×200=600px）时，Flex布局才会触发换行。如果你的测试场景中容器宽度一直≥600px，自然看不到换行效果。

另外，你写的flex-flow: row其实是多余的——Flex布局默认的方向就是横向排列，单独写flex-wrap: wrap就足够启用换行功能了。

修正方案：让换行触发更符合预期 #

如果你希望「当容器宽度不足以让所有子元素保持200px宽度时就自动换行」，推荐用flex-basis定义子元素的基础宽度，配合flex-shrink: 0防止子元素被压缩，这样能更精准地控制换行时机。修正后的代码如下：

CSS代码 #

.box {
  width: 1100px;
  max-width: 100%;
  display: flex;
  box-sizing: border-box;
  flex-wrap: wrap; /* 启用换行，方向默认横向 */
}

.box > div {
  border: 1px solid #aaa;
  flex: 1 0 200px; /* 等价于 flex-grow:1, flex-shrink:0, flex-basis:200px */
  box-sizing: border-box;
}

HTML代码（保持不变） #

<div class="box">
  <div> Boite 1 </div>
  <div> Boite 2 </div>
  <div> Boite 3 </div>
</div>

修正后代码的效果解释 #

• flex-basis: 200px：给每个子元素设置初始宽度为200px；
• flex-shrink: 0：确保子元素不会被压缩到200px以下；
• flex-grow: 1：让换行后的子元素自动填满容器的宽度；
• 触发换行的时机：当容器宽度小于当前子元素总基础宽度时，就会自动换行。比如容器宽度为500px时，会先放下两个子元素（各占250px，因为flex-grow:1平分空间），第三个子元素换行后占满整个容器宽度。

另一种可选方案（保留min-width） #

如果你坚持想用min-width，可以给子元素加上flex-shrink: 0，同样能达到类似效果：

.box > div {
  border: 1px solid #aaa;
  min-width: 200px;
  flex-grow: 1;
  flex-shrink: 0;
  box-sizing: border-box;
}

这种写法和前面的区别是：如果子元素的内容宽度超过200px，min-width不会限制它的扩展，而flex-basis会以200px为基础宽度再扩展。

总结 #

你原代码没看到换行，大概率是测试时容器宽度还≥600px，Flex布局觉得能放下所有子元素，所以没触发换行。用上面的修正方案调整后，就能在容器宽度不足以容纳所有200px子元素时自动换行，符合你的需求。

内容的提问来源于stack exchange，提问作者Entretoize