flex-wrap

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

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

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

初始值	NOWRAP
适用于	柔性容器
遗传	没有
媒体	视觉
计算值	作为指定
动画类型	离散的
规范的顺序	形式语法定义的独特的非模糊顺序

语法

flex-wrap属性指定为从下面的值列表中选择的单个关键字。

值

接受下列值：

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

形式语法

nowrap | wrap | wrap-reverse

实例

HTML

<h4>This is an example for flex-wrap:wrap </h4>
<div class="content">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:nowrap </h4>
<div class="content1">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:wrap-reverse </h4>
<div class="content2">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

CSS

/* Common Styles */
.content,
.content1,
.content2 {
    color: #fff;
    font: 100 24px/100px sans-serif;
    height: 150px;
    text-align: center;
}

.content div,
.content1 div,
.content2 div {
    height: 50%;
    width: 50%;
}
.red {
    background: orangered;
}
.green {
    background: yellowgreen;
}
.blue {
    background: steelblue;
}

/* Flexbox Styles */
.content {
    display: flex;
    flex-wrap: wrap;
}
.content1 {
    display: flex;
    flex-wrap: nowrap;
}
.content2 {
    display: flex;
    flex-wrap: wrap-reverse;
}

结果

规范

Specification	Status	Comment
CSS Flexible Box Layout ModuleThe definition of 'flex-wrap' in that specification.	Candidate Recommendation

浏览器兼容性

Feature	Firefox (Gecko)	Chrome	Edge	Internet Explorer	Opera	Safari
Basic support	28.0	29.0	12.0	11.01	17.0	9.0

Feature	Firefox for Android (Gecko)	Android	Edge	IE Phone	Opera Mobile	Safari Mobile
Basic support	52.0	4.4	12.0	11.0	12.1	9.2