flex-wrap

概述

CSS flex-wrap 描述了flex 条目行的是被强制放在一行中或者是被放在多个行上 。如果允许换行，这个属性允许你控制行的堆叠方向。

参考 Using CSS flexible boxes 查看更多的属性和信息

语法

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

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

取值

下面这些值是可以接受的:

nowrap

flex的元素被摆放到到一行，这可能导致溢出flex容器。 cross-start  会根据 flex-direction 的值 相当于start 或before。

wrap

flex 元素 被打断到多个行中。cross-start  会根据 flex-direction 的值 相当于start 或before。cross-end 为cross-start 的相对值

wrap-reverse

和wrap的表现一样但是 cross-start和cross-end 交替排列。

语法格式

nowrap | wrap | wrap-reverse

例子

element {
  flex-wrap: nowrap;
}

规范

浏览器兼容性

• Desktop
• Mobile

参考

• Using CSS flexible boxes