flex-grow

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

flex-grow 属性是 弹性盒布局模块 的子属性。

它定义了弹性项目在必要时增长的能力。它接受一个无单位的值,作为比例。它规定了项目应该占用弹性容器内部可用空间的多少。

.element {
  flex-grow: 2;
}

例如,如果所有项目都将 flex-grow 设置为 1,则每个子项将在容器内部设置为相等的大小。如果您要为其中一个子项提供值 2,则该子项将占用其他子项的两倍空间。

语法

flex-grow: <number>

演示

以下演示显示了剩余空间是如何根据 flex-grow 的不同值计算的(请在 CodePen 上查看以更好地理解)。

所有项目都具有 flex-grow 值 1,除了第三个项目,它的 flex-grow 值为 2。这意味着当分配可用空间时,第三个弹性项目将拥有其他项目两倍的空间。

浏览器支持

IEEdgeFirefoxChromeSafariOpera
10 1
11
全部20+22-28 2
29+
7-8 2
9+
12.1+
iOSChrome AndroidFirefox AndroidAndroidOpera Mobile
7-8.4 2
9+
22-28 2
29+
90+92+12.1+
来源:caniuse
  • 1 使用非标准名称 -ms-flex-positive
  • 2 使用前缀 -webkit- 支持

Blackberry 浏览器 10+ 支持新语法。

有关如何混合语法以获得最佳浏览器支持的更多信息,请参阅 “使用 Flexbox”DevOpera 的这篇文章

更多信息