Flex布局下标签云换行需设flex-wrap: wrap，用gap控制均匀间距，配合white-space: normal和word-break: break-word处理长文本，再以clamp()实现响应式字体缩放。
Flex布局下标签云换行不生效？检查flex-wrap是否设为wrap
默认display: flex容器是单行的，即使子项超出容器宽度也不会自动换行。标签云要“流式”堆叠，必须显式开启换行能力。
-
flex-wrap: nowrap（默认值）→ 所有标签强行挤在一行，可能溢出或被截断 -
flex-wrap: wrap→ 子项按需换行，形成多行“云”状分布 -
flex-wrap: wrap-reverse→ 换行但方向倒置（少用，容易误判视觉顺序）
别只写display: flex就以为完事了——漏掉flex-wrap: wrap是标签云布局失败最常见原因。
标签间距不均匀？用gap代替margin
给每个标签加margin-right或margin-bottom看似简单，但最后一项会多出多余空白，且换行后行尾/行首对不齐。CSS gap是专为Flex（和Grid）设计的间隙控制属性，它只作用于项目之间，不作用于容器边缘。
-
gap: 8px→ 行内和行间都是8px，干净对齐 - 若兼容性要求高（如需支持IE），改用
margin+:not(:last-child)限定，但代码变冗余 - 避免同时用
gap和margin，否则间距叠加导致失控
示例：
div.tags { display: flex; flex-wrap: wrap; gap: 6px; }
立即学习“前端免费学习笔记（深入）”；
标签文字过长撑破容器？用flex-shrink和min-width协同控制
默认Flex子项flex-shrink: 1，但纯文本标签在窄容器里仍可能因内容过长而破坏换行节奏，尤其含长英文单词或URL时。
- 给标签加
flex-shrink: 1（默认已有，可不写）+min-width: max-content防止过度压缩 - 更稳妥：加
overflow: hidden+text-overflow: ellipsis+white-space: nowrap，但会牺牲换行能力 - 推荐折中方案：
white-space: normal+word-break: break-word，让长词在边界处软换行
关键点：不要只依赖flex-basis或width，文本流特性必须配合white-space和word-break一起调。
响应式标签云缩放失衡？优先用rem或clamp()控制字体大小
标签云常随容器缩放，但直接写font-size: 14px会导致小屏下文字密度过高、大屏下稀疏。用相对单位才能保持密度一致。
-
font-size: clamp(0.75rem, 2.5vw, 1rem)→ 在0.75rem到1rem间随视口平滑缩放 - 避免用
%或em基于父级缩放，容易嵌套放大失控 - 如果用
rem，确保根字号html { font-size: ... }本身也做了媒体查询适配
真正难的不是让标签换行，而是换行后每行高度一致、字距呼吸感合理、小屏不重叠大屏不空洞——这些细节全靠gap、flex-shrink、word-break和clamp()四者咬合到位。
