概述

CSS flex-wrap 指定 flex 元素单行显示还是多行显示 。如果允许换行,这个属性允许你控制行的堆叠方向。

初始值nowrap
适用元素flex containers
是否是继承属性
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

参考 使用 CSS 弹性盒子 查看更多的属性和信息

语法

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 的值 相当于 startbefore
wrap
flex 元素 被打断到多个行中。cross-start 会根据 flex-direction 的值选择等于startbeforecross-end 为确定的 cross-start 的另一端。
wrap-reverse
和 wrap 的行为一样,但是 cross-startcross-end 互换。

语法格式

nowrap | wrap | wrap-reverse

例子

element {
  flex-wrap: nowrap;
}

规范

Specification Status Comment
CSS Flexible Box Layout Module
flex-wrap
Candidate Recommendation  

浏览器兼容性

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 28.0 bug 939901 21.0-webkit 11.0 12.10 6.1-webkit
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support 28.0 bug 939901 4.4 11.0 12.10 7.0-webkit

参考

文档标签和贡献者

 此页面的贡献者: JX-Master, dongyu.zhang, lijim, fscholz, Go7hic, Sebastianz, FredWe
 最后编辑者: JX-Master,