flex-wrap: wrap 是让弹性容器支持多行布局的属性，当子项总宽超容器时自动换行而非压缩溢出；需配合父容器明确宽度才能生效，且须搭配 justify-content 和 align-content 精确控制对齐与行间距。

flex-wrap: wrap 是什么，为什么它能解决换行问题

弹性容器默认不换行，所有子项强行挤在一行，超出容器就溢出或压缩。设置 flex-wrap: wrap 后，容器变成“多行弹性布局”，当子项总宽度超过容器时，自动把后续子项挪到下一行，而不是硬缩放或隐藏。

注意：仅设 flex-wrap: wrap 不够——父容器得有明确宽度（比如 width: 300px 或 max-width），否则浏览器可能按内容撑开，看不出“换行”效果。

不写 wrap 会遇到哪些典型表现

• 子元素被压缩变形，flex-basis 失效，文字挤成一团
• 横向滚动条意外出现（尤其在移动端 WebView 中）
• 使用 overflow: hidden 后内容被截断，但开发者误以为是子项样式问题
• 调试时看到子项的 computed width 远小于设定值，其实是 flex-shrink 在默默起作用

wrap 和 wrap-reverse 的实际区别在哪

flex-wrap: wrap 从上到下新增行，新行在旧行下方；flex-wrap: wrap-reverse 则从下到上新增行，第一行反而在最底部。这在某些翻转布局（如聊天消息气泡、倒序日志流）里有用，但多数场景用 wrap 就够了。

关键点：两者都不影响单行内子项的排列顺序（那由 flex-direction 控制），只决定“换行后新行的位置”。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

示例：

display: flex;<br>flex-wrap: wrap;<br>flex-direction: row;

等价于常见横向列表换行；若改成 flex-direction: column，则变成“列满换新列”，此时 wrap 表现为从左到右新增列。

配合 justify-content 和 align-content 才算完整控制

只加 flex-wrap: wrap 只解决“要不要换”，不解决“换完怎么排”。容易忽略的是：justify-content 控制**每行内**的主轴对齐，而 align-content 才控制**行与行之间**的交叉轴间距。

• 想让多行内容顶部对齐且行间留空？用 align-content: flex-start + gap: 8px
• 需要每行都居中，但行与行之间也居中分布？justify-content: center + align-content: center
• 设了 align-content 却没效果？大概率因为只有一行——该属性只在多行时生效

性能提示：频繁增删子项时，flex-wrap 触发的重排开销略高于单行 flex，但现代浏览器优化得不错，不用刻意回避。

真正容易卡住的地方是：忘了给父容器设 min-width 或 box-sizing: border-box，导致 padding/border 挤占可用空间，换行点比预期更早出现。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！