From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/flex-wrap/index.html | 193 +++++++++++++++++++++++++++++++ 1 file changed, 193 insertions(+) create mode 100644 files/zh-cn/web/css/flex-wrap/index.html (limited to 'files/zh-cn/web/css/flex-wrap') diff --git a/files/zh-cn/web/css/flex-wrap/index.html b/files/zh-cn/web/css/flex-wrap/index.html new file mode 100644 index 0000000000..7fc3f1b342 --- /dev/null +++ b/files/zh-cn/web/css/flex-wrap/index.html @@ -0,0 +1,193 @@ +--- +title: flex-wrap +slug: Web/CSS/flex-wrap +tags: + - CSS3 + - Default value + - Flex + - flex-wrap +translation_of: Web/CSS/flex-wrap +--- +

{{ CSSRef("CSS Flexible Boxes") }}

+ +

概述

+ +

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

+ +

{{cssinfo}}

+ +

参考 使用 CSS 弹性盒子 查看更多的属性和信息

+ +

语法

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

取值

+ +

下面这些值是可以接受的:

+ +
+
nowrap
+
flex 的元素被摆放到到一行，这可能导致溢出 flex 容器。 cross-start  会根据 {{cssxref("flex-direction")}} 的值 相当于 start 或 before。
+
wrap
+
flex 元素 被打断到多个行中。cross-start 会根据 {{cssxref("flex-direction")}} 的值选择等于start 或before。cross-end 为确定的 cross-start 的另一端。
+
wrap-reverse
+
和 wrap 的行为一样，但是 cross-start 和 cross-end 互换。
+
+

语法格式

+
+
+ +
{{csssyntax}}
+
+ +

例子

+ +

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: 50%;
+}
+.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;
+}
+ +

结果

+ +

{{ EmbedLiveSample('Examples', '700px', '700px', '', 'Web/CSS/flex-wrap') }}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{ SpecName('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap') }}{{ Spec2('CSS3 Flexbox') }}                    
+ +

浏览器兼容性

+ + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Basic support28.029.012.011.0[1]17.09.0
+ + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox for Android (Gecko)AndroidEdgeIE PhoneOpera MobileSafari Mobile
Basic support52.04.412.011.012.19.2
+ +

参考

+ + -- cgit v1.2.3-54-g00ecf