flex-wrap

基线 广泛可用

此功能已相当成熟，可在许多设备和浏览器版本上运行。它自 2015 年 9 月.

报告反馈

试一试

该 flex-wrap CSS 属性设置弹性项目是否强制在一行上或可以换行到多行。如果允许换行，它会设置行的堆叠方向。

语法

该 flex-flow 属性简写可用于同时设置 flex-direction 和 flex-wrap 属性，分别定义弹性容器的主轴和交叉轴。
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;

css

值

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

nowrap

弹性项目被布局在一行中，这可能会导致弹性容器溢出。交叉起点等同于 inline-start 或 block-start，具体取决于 flex-direction 值。这是默认值。

wrap

弹性项目被分成多行。交叉起点等同于 inline-start 或 block-start，具体取决于当前的 书写模式 和 flex-direction 值。

wrap-reverse

正式定义

与 wrap 的行为相同，但交叉起点和交叉终点被反转。flex-wrap 属性被指定为从以下值中选择的单个关键字。
初始值应用于
弹性容器继承
否计算值
如指定动画类型

正式语法

flex-wrap = 
  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

该 flex-flow 属性简写可用于同时设置 flex-direction 和 flex-wrap 属性，分别定义弹性容器的主轴和交叉轴。
/* Common Styles */
.content,
.content1,
.content2 {
  color: #fff;
  font: 100 24px/100px sans-serif;
  height: 150px;
  width: 897px;
  text-align: center;
}

.content div,
.content1 div,
.content2 div {
  height: 50%;
  width: 300px;
}
.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;
}

html

规范

结果
CSS 弹性盒布局模块级别 1
# flex-wrap-property

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见