From 77dd6c5f4ca5c244935126871f10d46dfec2a19a Mon Sep 17 00:00:00 2001 From: Irvin Date: Tue, 26 Oct 2021 21:16:58 +0800 Subject: mv .html to .md for css/flex-grow --- files/zh-cn/web/css/flex-grow/index.html | 128 ------------------------------- files/zh-cn/web/css/flex-grow/index.md | 128 +++++++++++++++++++++++++++++++ 2 files changed, 128 insertions(+), 128 deletions(-) delete mode 100644 files/zh-cn/web/css/flex-grow/index.html create mode 100644 files/zh-cn/web/css/flex-grow/index.md diff --git a/files/zh-cn/web/css/flex-grow/index.html b/files/zh-cn/web/css/flex-grow/index.html deleted file mode 100644 index cfc8dcdf50..0000000000 --- a/files/zh-cn/web/css/flex-grow/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: flex-grow -slug: Web/CSS/flex-grow -tags: - - CSS属性 - - CSS弹性盒 - - 布局 - - 网络 -translation_of: Web/CSS/flex-grow ---- -
{{CSSRef}}
- -

CSS属性 flex-grow设置了一个flex项主尺寸的flex增长系数。它指定了flex容器中剩余空间的多少应该分配给项目（flex增长系数）。

- -

主尺寸是项的宽度或高度，这取决于{{cssxref("flex-direction")}}值。

- -

剩余的空间是flex容器的大小减去所有flex项的大小加起来的大小。如果所有的兄弟项目都有相同的flex-grow系数，那么所有的项目将获得相同的剩余空间，否则将根据不同的flex-grow系数定义的比例进行分配。

- -

flex-grow 与其他的flex属性{{cssxref("flex-shrink")}}和{{cssxref("flex-basis")}}一起使用，通常使用{{cssxref("flex")}} 速记来定义，以确保所有的值都被设置。

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

更多属性和信息请参见使用 CSS 弹性盒子。

- -

语法

- -
CSS 属性值定义语法: {{csssyntax("flex-grow")}}
-
- -
/* <number> values */
-flex-grow: 3;
-flex-grow: 0.6;
-
-/* 全局 values */
-flex-grow: inherit;
-flex-grow: initial;
-flex-grow: unset;
- -

值

- -
-
<number>
-
参见 {{cssxref("<number>")}}。负值无效，默认为0。
-
-

正式语法

- - {{csssyntax}} -
-
- -

例子：

- -

HTML

- -
-
<h4>This is a Flex-Grow</h4>
-<h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</h5>
-<div id="content">
-  <div class="box" style="background-color:red;">A</div>
-  <div class="box" style="background-color:lightblue;">B</div>
-  <div class="box" style="background-color:yellow;">C</div>
-  <div class="box1" style="background-color:brown;">D</div>
-  <div class="box1" style="background-color:lightgreen;">E</div>
-  <div class="box" style="background-color:brown;">F</div>
-</div>
- -

CSS

- -
#content {
-  display: flex;
-
-  justify-content: space-around;
-  flex-flow: row wrap;
-  align-items: stretch;
-}
-
-.box {
-  flex-grow: 1;
-  border: 3px solid rgba(0,0,0,.2);
-}
-
-.box1 {
-  flex-grow: 2;
-  border: 3px solid rgba(0,0,0,.2);
-}
-
- -

结果

- -

{{EmbedLiveSample('Example', '700px', '300px', '', 'Web/CSS/flex-grow')}}

- -

规范

- - - - - - - - - - - - - - - - -
规范状态备注
CSS灵活包装盒布局模块{{Spec2('CSS3 Flexbox')}}初步定义
- -

{{cssinfo}}

- -

浏览器兼容性

- -

{{Compat("css.properties.flex-grow")}}

- -

参见

- - diff --git a/files/zh-cn/web/css/flex-grow/index.md b/files/zh-cn/web/css/flex-grow/index.md new file mode 100644 index 0000000000..cfc8dcdf50 --- /dev/null +++ b/files/zh-cn/web/css/flex-grow/index.md @@ -0,0 +1,128 @@ +--- +title: flex-grow +slug: Web/CSS/flex-grow +tags: + - CSS属性 + - CSS弹性盒 + - 布局 + - 网络 +translation_of: Web/CSS/flex-grow +--- +
{{CSSRef}}
+ +

CSS属性 flex-grow设置了一个flex项主尺寸的flex增长系数。它指定了flex容器中剩余空间的多少应该分配给项目（flex增长系数）。

+ +

主尺寸是项的宽度或高度，这取决于{{cssxref("flex-direction")}}值。

+ +

剩余的空间是flex容器的大小减去所有flex项的大小加起来的大小。如果所有的兄弟项目都有相同的flex-grow系数，那么所有的项目将获得相同的剩余空间，否则将根据不同的flex-grow系数定义的比例进行分配。

+ +

flex-grow 与其他的flex属性{{cssxref("flex-shrink")}}和{{cssxref("flex-basis")}}一起使用，通常使用{{cssxref("flex")}} 速记来定义，以确保所有的值都被设置。

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

更多属性和信息请参见使用 CSS 弹性盒子。

+ +

语法

+ +
CSS 属性值定义语法: {{csssyntax("flex-grow")}}
+
+ +
/* <number> values */
+flex-grow: 3;
+flex-grow: 0.6;
+
+/* 全局 values */
+flex-grow: inherit;
+flex-grow: initial;
+flex-grow: unset;
+ +

值

+ +
+
<number>
+
参见 {{cssxref("<number>")}}。负值无效，默认为0。
+
+

正式语法

+ + {{csssyntax}} +
+
+ +

例子：

+ +

HTML

+ +
+
<h4>This is a Flex-Grow</h4>
+<h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</h5>
+<div id="content">
+  <div class="box" style="background-color:red;">A</div>
+  <div class="box" style="background-color:lightblue;">B</div>
+  <div class="box" style="background-color:yellow;">C</div>
+  <div class="box1" style="background-color:brown;">D</div>
+  <div class="box1" style="background-color:lightgreen;">E</div>
+  <div class="box" style="background-color:brown;">F</div>
+</div>
+ +

CSS

+ +
#content {
+  display: flex;
+
+  justify-content: space-around;
+  flex-flow: row wrap;
+  align-items: stretch;
+}
+
+.box {
+  flex-grow: 1;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+.box1 {
+  flex-grow: 2;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+ +

结果

+ +

{{EmbedLiveSample('Example', '700px', '300px', '', 'Web/CSS/flex-grow')}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
CSS灵活包装盒布局模块{{Spec2('CSS3 Flexbox')}}初步定义
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ +

{{Compat("css.properties.flex-grow")}}

+ +

参见

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