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 class="default-example" id="default-example">
<div class="transition-all" id="example-element">
<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 互换。
形式定义
形式语法
flex-wrap =
nowrap |
wrap |
wrap-reverse
示例
设置 flex 容器堆叠形式
HTML
html
<h4>这是一个关于 flex-wrap:wrap 的例子</h4>
<div class="content">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
<h4>这是一个关于 flex-wrap:nowrap 的例子</h4>
<div class="content1">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
<h4>这是一个关于 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
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;
}
结果
规范
| Specification |
|---|
| CSS Flexible Box Layout Module Level 1 # flex-wrap-property |
浏览器兼容性
Loading…
参见
- CSS 弹性盒子指南：flex 布局的基本概念
- CSS 弹性盒子指南：掌握弹性物件的包装