flex-wrap 默认 nowrap 是溢出问题根源，需显式设 wrap/wrap-reverse 实现折行；配合 flex-direction、align-content、gap 及 calc 宽度可构建响应式流式布局，垂直主轴下 wrap 控制列延伸而非换行。
flex-wrap 默认是 nowrap，不换行——这是绝大多数溢出布局问题的根源。想让子项自动折行，必须显式设为 wrap 或 wrap-reverse。
标签云、动态菜单这类宽度不确定的横向列表
当项目数量或文字长度不可控时，flex-wrap: wrap 能避免内容被压缩或撑破容器。
- 常见错误：只设
display: flex却没加flex-wrap，导致小屏幕下导航栏文字重叠或水平滚动 - 注意
flex-direction: row（默认）下，新行会堆叠在上一行下方；若需顶部对齐，配合align-content: flex-start - 如果项目有固定宽高（如图标+文字按钮），建议用
min-width防止过窄换行
响应式网格卡片布局（非 Grid 的轻量替代）
不用 grid 也能实现“每行最多 N 个”的流式卡片，关键靠 flex-wrap + 子项等宽控制。
- 典型写法：
.grid { display: flex; flex-wrap: wrap; gap: 16px; }，子项用flex: 0 0 calc(33.333% - 10.666px)控制三列（减去 gap 影响） - 别依赖
justify-content: space-between来“均分”，它无法解决最后一行不满时的对齐问题；换行后需额外处理末行对齐（如用伪元素占位） -
flex-wrap: wrap-reverse在某些瀑布流变体中有用——比如希望新增卡片从顶部插入，旧卡片往下推
垂直方向主轴下的多列布局（flex-direction: column）
当主轴是垂直方向时，flex-wrap 控制的是“列是否向右延伸”，而非上下换行。
立即学习“前端免费学习笔记（深入）”；
- 设
flex-direction: column; flex-wrap: wrap;后，容器高度受限时，子项会从左到右生成新列（类似报纸排版） - 此时
align-content控制列之间的垂直间距，justify-content反而控制单列内项目的对齐 - 容易踩坑：未设明确
height或max-height，容器无限拉伸，wrap不触发
真正难的不是记住三个值，而是意识到：只要子项总尺寸可能超过容器主轴空间，就必须检查 flex-wrap 是否生效——尤其在组件复用、响应式断点切换、或动态插入 DOM 后。
