CSS flex布局flex-flow:row wrap换行不生效原因及解决方法

flex-flow: row wrap本身配置没有问题，换行失效和子项设置了flex属性没有必然联系，核心原因是flex子项默认开启了收缩规则：

• flex是flex-grow（拉伸系数）、flex-shrink（收缩系数）、flex-basis（基础宽度）三个属性的简写，当你使用双值语法比如flex: 2 200px时，未显式声明的flex-shrink会取默认值1；没有设置flex属性的普通div，默认flex值为0 1 auto，flex-shrink同样为1。
• 只要flex-shrink值大于0，当容器宽度不足以放下所有子项时，浏览器会优先按比例压缩所有子项的宽度，把所有元素挤在同一行，根本不会触发换行阈值判断，这就是换行失效的本质原因。

不需要删除子项上的flex属性，只要关闭子项的自动收缩规则即可，flex-grow的自动拉伸分配效果会正常保留，不会影响换行逻辑：

• 全局给所有flex子项添加flex-shrink: 0，禁止子项被压缩；如果是用flex简写属性声明的规则，补全第三个参数为0即可，比如把flex: 2 200px改为flex: 2 0 200px。
• 计算换行触发宽度时需要把子项的外边距算入总宽度：你给div设置了margin:5px，每个子项左右各占5px外边距，单元素额外占10px水平空间，当容器宽度小于当前行所有子项的flex-basis+水平外边距总和时，就会自动触发换行。
• 注意不要给子项设置width: 100%这类撑满整行的宽度值，除非你需要该元素单独占一行，否则会强制把其余元素挤到下一行。

span {
    display: flex;
    flex-flow: row wrap;
    border: 1px solid black;
    height: 400px;
    justify-content: space-around;
}

div {
    width: 200px;
    height: auto;
    background-color: pink;
    margin: 5px;
    flex-shrink: 0; /* 新增：禁止子项收缩 */
}

div:nth-of-type(even) {
    flex: 2 0 200px; /* 显式设置收缩系数为0 */
    height: 50%;
    align-self: center;
    background-color: crimson;
}

.block2 {
    flex: 4 0 200px; /* 显式设置收缩系数为0 */
}

.block4 {
    flex: 1 0 100px; /* 显式设置收缩系数为0 */
    height: 25%;
    align-self:center;
}

div:first-child {
    order: -1
}

div:nth-of-type(even) {
    order: -2
}
div:last-child {
    order: 2
}

修改后子项会严格按照设置的order排序，宽度不足时自动换行，同时保留flex-grow对每行剩余空间的分配效果。

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