flex-wrap

flex-wrap 属性是 弹性盒布局模块 的一个子属性。 它定义了弹性项目是否强制在一行内排列，或者是否可以换行。 如果设置为多行，它还定义了交叉轴，该轴决定了新行堆叠的方向，有助于响应式布局行为，无需使用 CSS 媒体查询。

.flex-container {
  flex-wrap: wrap;
}

提醒：交叉轴是垂直于主轴的轴。 它的方向取决于主轴方向。

语法

flex-wrap: nowrap | wrap | wrap-reverse

• 初始值： nowrap
• 应用于： 弹性容器
• 继承： 否
• 计算值： 指定值
• 动画类型： 离散

值

flex-wrap: nowrap; /* Default value */
flex-wrap: wrap;
flex-wrap: wrap-reverse;

/* Global values */
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: revert;
flex-wrap: revert-layer;
flex-wrap: unset;

• nowrap（默认）： 单行，可能会导致容器溢出
• wrap： 多行，方向由 flex-direction 定义
• wrap-reverse： 多行，与 flex-direction 定义的方向相反

演示

在以下演示中

• 红色列表设置为 nowrap
• 黄色列表设置为 wrap
• 蓝色列表设置为 wrap-reverse

flex-direction 设置为默认值：row。

浏览器支持

有关如何混合语法以获得最佳浏览器支持的更多信息，请参阅我们关于 “使用 Flexbox” 的文章。

相关指南

相关技巧

其他资源

• CSS 弹性盒模型级别 1 (W3C)
• flex-wrap (MDN)
• 使用 CSS 中的 flex-wrap 提高响应能力 (DigitalOcean)

相关