From 6ff2c24b0e8919a0aa1907e552d6cbccbe883fae Mon Sep 17 00:00:00 2001 From: allo Date: Thu, 20 Jan 2022 09:09:18 +0800 Subject: mv to .md for zh-cn/web/css/flex-wrap --- files/zh-cn/web/css/flex-wrap/index.html | 192 ------------------------------- files/zh-cn/web/css/flex-wrap/index.md | 192 +++++++++++++++++++++++++++++++ 2 files changed, 192 insertions(+), 192 deletions(-) delete mode 100644 files/zh-cn/web/css/flex-wrap/index.html create mode 100644 files/zh-cn/web/css/flex-wrap/index.md (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 deleted file mode 100644 index f475ee79b3..0000000000 --- a/files/zh-cn/web/css/flex-wrap/index.html +++ /dev/null @@ -1,192 +0,0 @@ ---- -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
- -

参考

- - diff --git a/files/zh-cn/web/css/flex-wrap/index.md b/files/zh-cn/web/css/flex-wrap/index.md new file mode 100644 index 0000000000..f475ee79b3 --- /dev/null +++ b/files/zh-cn/web/css/flex-wrap/index.md @@ -0,0 +1,192 @@ +--- +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