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-grow/index.html | 132 +++++++++++++++++++++++++++++++ 1 file changed, 132 insertions(+) create mode 100644 files/zh-cn/web/css/flex-grow/index.html (limited to 'files/zh-cn/web/css/flex-grow') diff --git a/files/zh-cn/web/css/flex-grow/index.html b/files/zh-cn/web/css/flex-grow/index.html new file mode 100644 index 0000000000..a1f96403f6 --- /dev/null +++ b/files/zh-cn/web/css/flex-grow/index.html @@ -0,0 +1,132 @@ +--- +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