flex-wrap: wrap 是多列自动换行的首选方案，它使子项在容器宽度不足时自然折行，对齐可控、间距一致，比 inline-block 更可靠，尤其适合响应式场景。
flex-wrap: wrap 是多列自动换行的首选方案
当容器宽度不足以容纳所有子项时，flex-wrap: wrap 能让 flex 项目自然折行，且保持对齐可控、间距一致。它比 inline-block 更可靠，尤其在响应式场景下。
关键点：
- 父容器必须设为
display: flex，否则flex-wrap不生效 - 默认是
flex-wrap: nowrap，需显式声明wrap - 配合
justify-content和align-content可精确控制每行/整体的对齐方式 - 子项无需设置
vertical-align或margin-right等 hack，避免空白间隙问题
.container { display: flex; flex-wrap: wrap; gap: 12px; /* 推荐用 gap 替代 margin */ } .item { flex: 0 0 200px; /* 每项最小宽度 200px，不放大不缩小 */ }inline-block 换行容易掉坑：空白字符、对齐、垂直间隙
display: inline-block 确实能实现多列流式布局，但实际中常因 html 中的换行符和空格被渲染为 4px 左右的空白间隙，导致列数错乱或最后一列被挤到下一行。
常见应对方式（都不理想）：
立即学习“前端免费学习笔记（深入）”；
- HTML 中删掉元素间的换行和空格（可读性差）
- 父容器设
font-size: 0，子项再重设font-size（影响继承、易遗漏） - 子项设
vertical-align: top（解决基线对齐偏差，但不解决水平间隙） - 用负
margin抵消间隙（脆弱，响应式下易失效）
而且 inline-block 无法像 flex 那样统一控制跨行后的垂直对齐或行间距。
什么时候还可能用 inline-block？
极少数兼容老浏览器（如 IE9 及以下）且无 js 增强的静态列表场景。现代项目中，若已用 Flexbox 布局体系，混用 inline-block 会增加维护成本和意外行为。
注意：inline-block 元素默认按文本基线对齐，若子元素高度不一，会出现底部参差；而 flex 默认是 align-items: stretch，更利于统一高度控制。
flex-wrap 的隐藏代价：flex-basis 计算依赖内容与盒模型
flex-wrap 是否换行，取决于 flex-basis（或 width） + gap + 容器 padding 的总和是否超限。容易忽略的是：
-
box-sizing必须为border-box，否则 padding/border 会撑出容器导致意外换行 - 如果子项含不定宽内容（如长单词、未设
word-break的英文），可能撑破设定的flex-basis -
gap在旧版 safari（-webkit-gap 前缀
换行逻辑是“逐项尝试放入当前行”，不是按列数切分——所以第一行塞得下 5 个，第二行只剩 2 个，是完全正常的。