From 73dd03ffb8bf50ea4d269900958ec3ba949ae229 Mon Sep 17 00:00:00 2001 From: allo Date: Thu, 20 Jan 2022 10:06:36 +0800 Subject: sync with english version for css.flex-wrap --- files/zh-cn/web/css/flex-wrap/index.md | 242 +++++++++++++-------------------- 1 file changed, 97 insertions(+), 145 deletions(-) (limited to 'files/zh-cn/web') diff --git a/files/zh-cn/web/css/flex-wrap/index.md b/files/zh-cn/web/css/flex-wrap/index.md index f475ee79b3..3ebe1c4f7b 100644 --- a/files/zh-cn/web/css/flex-wrap/index.md +++ b/files/zh-cn/web/css/flex-wrap/index.md @@ -2,191 +2,143 @@ title: flex-wrap slug: Web/CSS/flex-wrap tags: - - CSS3 - - Default value - - Flex - - flex-wrap + - CSS + - CSS Flexible Boxes + - CSS Property + - Reference + - recipe:css-property translation_of: Web/CSS/flex-wrap --- -

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

+{{CSSRef}} -

概述

+## 概述 -

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

+[CSS](/zh-CN/docs/Web/CSS) 的 **`flex-wrap`** 属性指定 flex 元素单行显示还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。 -

{{cssinfo}}

+{{EmbedInteractiveExample("pages/css/flex-wrap.html")}} -

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

+参考 [flex 布局的基本概念](/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) 查看更多的属性和信息。 -

语法

+## 语法 -
flex-wrap: nowrap;  /* Default value */
+```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` 属性可指定为以下取值列表中的任意一个关键字。 -

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

+### 取值 -
-
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 互换。
-
-

语法格式

-
-
+`flex-wrap` 属性接受以下取值： + +- `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** 互换。 + +### 形式定义 + +{{cssinfo}} + +### 形式语法 {{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 */
+## 示例
+
+### 设置 flex 容器堆叠形式
+
+#### HTML
+
+```html
+
这是一个关于 flex-wrap:wrap 的例子

+

+  
1

+  
2

+  
3

+

+
这是一个关于 flex-wrap:nowrap 的例子

+

+  
1

+  
2

+  
3

+

+
这是一个关于 flex-wrap:wrap-reverse 的例子

+

+  
1

+  
2

+  
3

+

+```
+
+#### CSS
+
+```css
+/* Common Styles */
 .content,
 .content1,
 .content2 {
-    color: #fff;
-    font: 100 24px/100px sans-serif;
-    height: 150px;
-    text-align: center;
+  color: #fff;
+  font: 100 24px/100px sans-serif;
+  height: 150px;
+  width: 897px;
+  text-align: center;
 }
 
 .content div,
 .content1 div,
 .content2 div {
-    height: 50%;
-    width: 50%;
+  height: 50%;
+  width: 300px;
 }
 .red {
-    background: orangered;
+  background: orangered;
 }
 .green {
-    background: yellowgreen;
+  background: yellowgreen;
 }
 .blue {
-    background: steelblue;
+  background: steelblue;
 }
 
 /* Flexbox Styles */
 .content {
-    display: flex;
-    flex-wrap: wrap;
+  display: flex;
+  flex-wrap: wrap;
 }
 .content1 {
-    display: flex;
-    flex-wrap: nowrap;
+  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
- -

参考

- - + display: flex; + flex-wrap: wrap-reverse; +} +``` + +#### 结果 + +{{EmbedLiveSample('设置_flex_容器堆叠形式', '700px', '700px')}} + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- CSS 弹性盒子指南：[flex 布局的基本概念](/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) +- CSS 弹性盒子指南：[掌握弹性物件的包装](/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items) -- cgit v1.2.3-54-g00ecf