DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!
flex-grow
属性是 弹性盒布局模块 的子属性。
它定义了弹性项目在必要时增长的能力。它接受一个无单位的值,作为比例。它规定了项目应该占用弹性容器内部可用空间的多少。
.element {
flex-grow: 2;
}
例如,如果所有项目都将 flex-grow
设置为 1,则每个子项将在容器内部设置为相等的大小。如果您要为其中一个子项提供值 2,则该子项将占用其他子项的两倍空间。
语法
flex-grow: <number>
演示
以下演示显示了剩余空间是如何根据 flex-grow
的不同值计算的(请在 CodePen 上查看以更好地理解)。
所有项目都具有 flex-grow
值 1,除了第三个项目,它的 flex-grow
值为 2。这意味着当分配可用空间时,第三个弹性项目将拥有其他项目两倍的空间。
浏览器支持
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
10 1 11 | 全部 | 20+ | 22-28 2 29+ | 7-8 2 9+ | 12.1+ |
iOS | Chrome Android | Firefox Android | Android | Opera Mobile |
---|---|---|---|---|
7-8.4 2 9+ | 22-28 2 29+ | 90+ | 92+ | 12.1+ |
- 1 使用非标准名称
-ms-flex-positive
- 2 使用前缀
-webkit-
支持
Blackberry 浏览器 10+ 支持新语法。
有关如何混合语法以获得最佳浏览器支持的更多信息,请参阅 “使用 Flexbox” 或 DevOpera 的这篇文章。
所有 Safari 不支持 flex-grow
更新一下
Safari 6.1+ 支持 -webkit-flex-grow
https://w3schools.org.cn/cssref/css3_pr_flex-grow.asp
解释得非常完美。清晰明了。谢谢。
“例如,如果所有项目都将 flex-grow 设置为 1,则每个子元素将在容器内设置为相等的大小。如果要为其中一个子元素提供值 2,则该子元素将占用其他子元素的两倍空间。”
这不对吗?据我了解,flex-grow 分配可用空白,它不控制元素的最终宽度。如果没有任何子元素有任何内容,则 flex-grow 设置为 2 的子元素只会宽两倍。
您可以在 CodePen 示例中看到这一点;一旦您开始在一个 flex-item 框中输入更多文本,所有框的宽度都会发生变化。
至少在我看来,Flex-grow 分配可用空白,而不是绝对宽度。
那是正确的!您解释得非常清楚。
解释得很好!!!
嗨,很棒的解释!!!
我想创建一个分隔符来增加/减少两个 flex 元素,最好的方法是什么?
这是错误的。除非 flex-basis 为零,否则 Flex-grow 不会规定项目占用的空间比例。它规定了如果在考虑每个项目的宽度后存在额外空间,则项目使用的额外空间的比例大小。区别很大。