flex-wrap 换行属性

最后更新：2026-09-13

flex-wrap flex-wrap 换行属性

flex-wrap 属性用于控制弹性容器内的项目是否换行显示。默认值为 nowrap，所有项目强制排列在一行内，可能导致项目被压缩或溢出容器。设置为 wrap 后，项目会自动换到下一行，这在响应式布局和多列卡片排列中非常实用。

分类
初始值	nowrap
继承	否
适用于
可动画
CSS 版本	CSS3
状态	标准

📝 语法

flex-wrap: nowrap | wrap | wrap-reverse;

⚙️ 取值

值	类型	描述
`nowrap \| wrap \| wrap-reverse`	关键字	弹性项目是否换行

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
flex-wrap	✓ v29	✓ v12	✓ v28	✓ v9	✓ v17
所有主流浏览器均支持

提示： wrap-reverse 不仅会换行，还会反转行的排列顺序，即第一行出现在底部，最后一行出现在顶部，但每行内的项目顺序保持不变。

重要： 当 flex-wrap: wrap 时，align-content 属性才会生效，用于控制多行之间的间距和对齐方式。单行情况下 align-content 不起作用。

❓ 常见问题

Qflex-wrap: wrap 时项目为什么会超出容器？

A子项设置了固定 flex-basis 或 width，且总宽超过容器时，换行后仍可能因 gap、padding、margin 或 box-sizing 导致溢出。可改用百分比宽度、calc() 计算，或 flex-basis: 0 配合 flex-grow 让子项自适应均分，避免超出。

Qnowrap 和 wrap 在响应式布局中如何选择？

Anowrap 适合导航栏、操作栏等必须单行显示的紧凑场景；wrap 适合卡片列表、标签云等希望随屏幕宽度自动换行的场景。响应式布局通常优先 wrap 让内容自然换行，配合固定 flex-basis 或 minmax 控制每项宽度，移动端体验更稳。

Qflex-wrap: wrap-reverse 和 wrap 的区别是什么？

A两者都允许换行，区别在换行后的排列方向。wrap 沿主轴向正向换行，新行排在下方（row 方向）；wrap-reverse 反转交叉轴方向，第一行从底部开始向上排，视觉顺序颠倒。wrap-reverse 用得少，且与 align-content 搭配时表现容易出乎意料，常规布局用 wrap 即可。