flex-wrap: wrap 未生效的主因是父容器缺少 display: flex 或未设置 flex-wrap: wrap；子元素 white-space: nowrap、父容器宽度不足、flex-shrink: 0、justify-content: space-between 使用不当、align-items 默认 stretch 导致高度不一、gap/font-size 未响应式适配等也会导致换行失败。
flex-wrap: wrap 为什么没生效？
标签云换行失败，大概率是父容器没设 display: flex 或忘了加 flex-wrap: wrap。Flex 默认只在单行排列，不主动换行。
- 必须同时设置
display: flex和flex-wrap: wrap，缺一不可 - 如果子元素用了
white-space: nowrap（比如带span的标签），会强行撑宽容器，导致“看起来没换行” - 父容器宽度太小（比如被
max-width卡死）或子元素设置了flex-shrink: 0，也会抑制换行
justify-content: space-between 导致首尾间距过大
用 justify-content: space-between 做自动间距时，第一项贴左、最后一项贴右，中间空隙被均分——这在标签云里常显得头重脚轻，尤其当每行标签数不固定时。
- 改用
justify-content: flex-start+ 子元素加margin-right更可控 - 或者用
gap（推荐）：它只作用于 flex 项之间，不碰首尾边界，且支持响应式单位（如gap: 0.5rem） -
gap在 Safari 14.1+ 才完全稳定，旧版需加row-gap/column-gap回退
标签尺寸不一致时，换行后对齐错乱
文字长度不同、字体渲染差异、内边距不统一，都会让 flex 项高度参差，换行后出现“阶梯状”错位。
- 给所有标签加
align-items: flex-start（父容器上），避免默认的stretch拉伸 - 统一行高：
line-height: 1.5+height: auto，禁用固定height - 避免用
vertical-align，它在 flex 布局中无效 - 若需底部对齐（如图标+文字），改用
align-items: baseline并确保所有标签有相同基线锚点
响应式断点下 gap 和 font-size 失控
直接写死 gap: 12px 和 font-size: 14px，在小屏上容易挤成一团，大屏又太空旷。
立即学习“前端免费学习笔记（深入）”；
- 用相对单位：
gap: 0.75rem、font-size: clamp(0.75rem, 4vw, 1rem) - 避免在媒体查询里反复覆盖
gap，优先用clamp()或 CSS 自定义属性动态算 - 测试真机：iOS Safari 对
gap的 subpixel 渲染有时会跳变，建议最小gap不低于0.25rem
flex 标签云真正的难点不在布局逻辑，而在字体度量、行高继承和跨浏览器的 subpixel 行为——这些没法靠一个 flex-wrap 解决。
