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 |
浏览器兼容性
参见
- CSS 弹性盒子指南：flex 布局的基本概念
- CSS 弹性盒子指南：掌握弹性物件的包装