flex-wrap: wrap必须与display: flex同时使用才生效，缺一则不换行；常见原因包括容器无宽度、子项white-space: nowrap、flex-shrink: 0或min-width: auto阻止收缩；gap更推荐但IE11需降级为margin。
flex-wrap: wrap 必须和 display: flex 同时存在才生效，缺一不可；只写它等于没写。
为什么写了 flex-wrap: wrap 还是不换行
这不是属性失效，而是 Flex 上下文根本没建立起来：
-
display: flex缺失——最常见疏漏，flex-wrap只在 Flex 容器内起作用 - 容器没设宽度（如
width: 100%或max-width），Flex 默认撑宽自己，没有“换行依据” - 子标签含
white-space: nowrap（某些 UI 库重置样式默认加了），文字不折行，标签无法压缩 - 子标签设了
flex-shrink: 0或min-width: auto，拒绝收缩，硬顶着不换
用 gap 还是 margin 控制标签间距
gap 更干净、语义明确，但有兼容性边界：
- 现代项目（Chrome/Firefox/Safari/Edge ≥ 2024）：直接用
gap: 8px，无需兜底 - 需兼容 IE11 或老版 Safari（≤14.1）：改用
margin-right: 8px; margin-bottom: 8px，再加:last-child { margin-right: 0; } - 绝对别用
:first-child { margin-left: 0; }——换行后第二行第一个标签会被误清，导致错位 -
gap不参与子项盒模型计算，不会影响justify-content对齐逻辑；margin会触发重排，且首尾处理容易出错
标签文字过长或尺寸不一时怎么避免错位
错位本质是基线对齐与弹性行为冲突：
立即学习“前端免费学习笔记（深入）”；
- 加
align-items: flex-start让所有标签顶部对齐，避开默认的stretch - 子项统一设
margin: 0; box-sizing: border-box，防止 padding/margin 累计偏差 - 长文本标签建议用
white-space: normal; word-break: break-word，比nowrap + ellipsis更适配中英文混排 - 慎用
flex: 1或flex-grow: 1——它会让小标签被拉宽，破坏云状分布感 - 若用
min-width控制单个标签最小尺寸（如min-width: 80px），注意 IE11 在总宽略超容器时可能整行卡住不换，此时可降级为flex-basis: 120px; flex-shrink: 1
真正难的不是写出能换行的代码，而是让不同长度、不同字号、不同内容密度的标签，在各种视口下都保持视觉均衡——这需要同时约束容器行为、子项弹性、文字断行和间距逻辑，少一个环节就容易在某个屏幕尺寸上突然崩掉。
