View in EnglishAlways switch to English

flex-wrap

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年9月.

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

尝试一下

flex-wrap: nowrap;

flex-wrap: wrap;

flex-wrap: wrap-reverse;

<section>  <div>    <div>Item One</div>    <div>Item Two</div>    <div>Item Three</div>    <div>Item Four</div>    <div>Item Five</div>    <div>Item Six</div>  </div></section>

#example-element {  border: 1px solid #c5c5c5;  width: 80%;  display: flex;}#example-element > div {  background-color: rgba(0, 0, 255, 0.2);  border: 3px solid blue;  width: 60px;  margin: 10px;}

参考flex 布局的基本概念查看更多的属性和信息。

语法

css

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: unset;

flex-wrap 属性可指定为以下取值列表中的任意一个关键字。

取值

flex-wrap 属性接受以下取值：

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`
适用元素	弹性容器
是否是继承属性	否
计算值	as specified
动画类型	离散值

形式语法

flex-wrap =
nowrap|
wrap|
wrap-reverse

示例

设置 flex 容器堆叠形式

HTML

html

<h4>这是一个关于 flex-wrap:wrap 的例子</h4><div>  <div>1</div>  <div>2</div>  <div>3</div></div><h4>这是一个关于 flex-wrap:nowrap 的例子</h4><div>  <div>1</div>  <div>2</div>  <div>3</div></div><h4>这是一个关于 flex-wrap:wrap-reverse 的例子</h4><div>  <div>1</div>  <div>2</div>  <div>3</div></div>

CSS

css

/* 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;}