flex-wrap

在此页

句法
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

见 Using CSS flexible boxes for more properties and information.

句法

flex-wrap: nowrap; /* Default value */
flex-wrap: wrap;
flex-wrap: wrap-reverse;
/* Global values */
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: unset;

flex-wrap property is specified as a single keyword chosen from the list of values below.

值

The following values are accepted:

nowrap: The flex items are laid out in a single line which may cause the flex container to overflow. The cross-start is either equivalent to start or before depending on the flex-direction value. This is the default value.
wrap: The flex items break into multiple lines. The cross-start is either equivalent to start or before depending flex-direction value and the cross-end is the opposite of the specified cross-start .
wrap-reverse: Behaves the same as wrap but cross-start and cross-end are permuted.

形式定义

初始值	`nowrap`
适用于	flex containers
继承	no
计算值	如指定
动画类型	discrete

形式句法

nowrap | wrap | wrap-reverse

范例

Setting flex container wrap values

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

Results

规范

规范	状态	注释
CSS Flexible Box Layout Module The definition of 'flex-wrap' in that specification.	候选推荐

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`flex-wrap`	Chrome 完整支持 29	Edge 完整支持 12	Firefox 完整支持 28	IE 部分支持 11 注意事项部分支持 11 注意事项注意事项 Partial support due to large number of bugs present. See Flexbugs .	Opera 完整支持 17	Safari 完整支持 9	WebView Android 完整支持 4.4	Chrome Android 完整支持 29	Firefox Android 完整支持 52	Opera Android 完整支持 18	Safari iOS 完整支持 9	Samsung Internet Android 完整支持 2.0

图例

完整支持
部分支持
见实现注意事项。
要求使用供应商前缀或不同名称。

另请参阅

CSS Flexbox Guide: Basic Concepts of Flexbox
CSS Flexbox Guide: Mastering wrapping of flex items

元数据

最后修改： Aug 5, 2020

CSS
CSS 参考
CSS 的灵活框布局
指南
特性
1. flex
2. flex-basis
3. flex-direction
4. flex-flow
5. flex-grow
6. flex-shrink
7. flex-wrap
8. order

在此页

句法

值