Flex容器不换行需设flex-wrap: wrap，子项不收缩需检查flex-shrink和width，换行后对齐错乱应调整align-content，iOS兼容需加-webkit前缀及flex: 1 1 0。
Flex容器不换行？检查 flex-wrap 是否设为 wrap
默认情况下，display: flex 的容器会把所有子项强行挤在一行，哪怕内容溢出屏幕。这不是 bug，是 Flex 的默认行为 —— flex-wrap 默认值是 nowrap。移动端尤其容易踩这个坑，因为屏幕窄，子项一多就横向滚动或被压缩变形。
必须显式设置：
.container {
display: flex;
flex-wrap: wrap; /* 关键！ */
}
- 只写
display: flex不够，flex-wrap: wrap缺一不可 - 别用
flex-wrap: wrap-reverse除非真需要倒序换行，它会影响阅读流和可访问性 - 某些 UI 库（如 Tailwind）的
flex-row类默认也不带换行，得额外加flex-wrap或flex-wrap-wrap
子项不收缩？确认 flex-shrink 和宽度设置
即使开了 flex-wrap: wrap，如果某个子项设置了固定宽（比如 width: 200px）且容器总宽不够，它仍可能撑破布局、阻止换行。更隐蔽的是 flex-shrink: 0 —— 它会让子项拒绝缩小，导致“宁可溢出也不换行”。
典型修复方式：
.item {
flex: 1 1 auto; /* 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
min-width: 0; /* 防止文字撑开导致换行失效（尤其含长单词或 URL）*/
}
-
flex: 0 0 auto或flex-shrink: 0是常见换行失效原因 - 移动端建议用
flex-basis: 0+flex-grow: 1实现等分布局，比固定width更健壮 - 含英文长单词时，记得加
word-break: break-word或overflow-wrap: break-word，否则min-width: 0也不管用
换行后对齐错乱？留意 justify-content 和 align-content
单行时 justify-content 控制主轴对齐；换行后，多行之间的垂直间距和对齐由 align-content 决定。很多人只调 justify-content: center，结果第二行内容靠左、第一行居中，看起来像错位。
常用组合：
.container {
justify-content: center; /* 每行内部居中 */
align-content: flex-start; /* 行与行之间顶部对齐（默认值，常被忽略）*/
}
-
align-content在单行时无效，只有换行后才起作用 - 设成
stretch（默认）时，如果容器高度固定，行会拉伸填满；设成flex-start更符合移动端常见需求 - 避免同时设
align-items: center和align-content: center，后者会让所有行在交叉轴上居中堆叠，视觉上反而像没换行
iOS Safari 中换行异常？处理 min-width 和 -webkit- 兼容
iOS 15 之前版本对 flex-basis: auto 处理较僵硬，尤其配合 min-width: fit-content 时容易卡死不换行。另外，Safari 对 flex: 1 的解析偶尔和 Chrome 不一致。
立即学习“前端免费学习笔记（深入）”；
稳妥写法：
.container {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.item {
-webkit-flex: 1 1 0;
flex: 1 1 0;
min-width: 33.33%; /* 给个兜底最小宽，防 Safari 计算错误 */
}
- 加
-webkit-前缀不是过时做法，在 iOS 旧版 Safari 里仍有必要 - 用
flex: 1 1 0比flex: 1更可控，明确禁止子项按内容撑宽 - 如果子项是图片或按钮，记得设
max-width: 100%，否则可能突破容器导致换行失败
换行逻辑本身简单，但真正卡住人的往往是 flex-wrap 被覆盖、flex-shrink 被禁用，或者 iOS 里一个没写的 min-width。动手前先打开开发者工具，看 computed 样式里 flex-wrap 和 flex-shrink 的实际值，比猜更省时间。
