flex-wrap 是控制 Flex 容器主轴是否换行的属性，默认 nowrap 会导致溢出，设为 wrap 后依据 flex-basis 和间距自动折行；常见溢出原因包括 flex-basis 过大、父容器宽度固定、文本不折行或 flex-shrink 被禁用。
flex-wrap 是什么，为什么它能解决溢出
flex-wrap 是 Flexbox 布局中控制主轴是否换行的属性，默认值是 nowrap——所有子元素强行挤在一行，超出容器就溢出。设为 wrap 后，Flex 容器会主动把放不下的子项“折”到下一行，从而避免横向滚动或内容被裁剪。
关键点在于：它只响应主轴方向（由 flex-direction 决定）的空间不足，且换行判断基于子项的 flex-basis + margin/padding/border，不是单纯看内容宽度。
常见错误现象：
- 设置了 flex-wrap: wrap 但依然溢出
- 换行后子项高度参差不齐，出现大量空白
- 在小屏幕下换行不及时，文字被截断
为什么设置了 wrap 还溢出？检查这几点
-
flex-basis 设得太大（比如 flex-basis: 100% 或固定 300px），导致单个子项就占满整行，没机会“让位”给换行
- 父容器
min-width 或 width 被设死（如 width: 600px），而子项总最小宽度 > 600px，wrap 也救不了
- 子项有
white-space: nowrap 或 overflow: hidden，文本不折行，撑宽了自身，间接导致换行失效
- 忘了给子项设
flex-shrink: 1（默认是 1，但如果显式设成 0 就无法压缩，容易卡住换行）
flex-basis 设得太大（比如 flex-basis: 100% 或固定 300px），导致单个子项就占满整行，没机会“让位”给换行 min-width 或 width 被设死（如 width: 600px），而子项总最小宽度 > 600px，wrap 也救不了 white-space: nowrap 或 overflow: hidden，文本不折行，撑宽了自身，间接导致换行失效 flex-shrink: 1（默认是 1，但如果显式设成 0 就无法压缩，容易卡住换行）示例：这个组合大概率溢出
.container { display: flex; flex-wrap: wrap; width: 400px; }
.item { flex: 0 0 220px; } /* 不缩放、不增长、固定 220px → 两个就超了 */
配合 flex-wrap 的实用布局模式
- 卡片列表（响应式网格）：
flex-basis: calc(33.333% - 12px) + margin: 6px，再配 flex-wrap: wrap，比 CSS Grid 更易兼容老浏览器
- 标签云：
.tag { flex: 0 0 auto; margin: 4px; }，让每个标签按内容自适应宽度，自动换行堆叠
- 表单行内元素（如 label + input + button）：
flex-wrap: wrap + flex-direction: column 可在窄屏强制垂直排列
flex-basis: calc(33.333% - 12px) + margin: 6px，再配 flex-wrap: wrap，比 CSS Grid 更易兼容老浏览器 .tag { flex: 0 0 auto; margin: 4px; }，让每个标签按内容自适应宽度，自动换行堆叠 flex-wrap: wrap + flex-direction: column 可在窄屏强制垂直排列 注意：flex-wrap: wrap-reverse 会把新行堆在上面，适合需要“底部对齐”的场景（比如聊天气泡列表），但多数时候用不到。
换行后对齐和间隙怎么调
换行后，多行之间的对齐靠 align-content（不是 align-items）：
-
align-content: flex-start（默认）：各行顶部对齐，下方留空 -
align-content: center：各行居中堆叠，上下留空 -
align-content: stretch：各行拉满容器高度（需父容器有明确高度）
行间/项间间隙推荐用 gap（现代浏览器支持良好）：
.container { display: flex; flex-wrap: wrap; gap: 8px 12px; }
比用 margin 更干净——不用处理首尾项额外间距，也不怕换行后 margin 折叠。
换行逻辑本身不复杂，但真正卡住人的往往是子项的 flex 缩放行为和文本折行策略，这两处不调好，flex-wrap 就像有钥匙打不开锁。
立即学习“前端免费学习笔记（深入）”；
