“flex: 0 0 33%”中的“0 0”代表啥？

Posted 2023-03-06

【中文标题】“flex: 0 0 33%”中的“0 0”代表啥？

【英文标题】：What do the "0 0" in "flex: 0 0 33%" stand for?“flex: 0 0 33%”中的“0 0”代表什么？

【发布时间】：2018-05-08 22:07:48

【问题描述】：

我目前正在学习 flex，并在 Bootstrap 4 的列类中看到了这一行：

.col-md-4 
    flex: 0 0 33.3333%;

这两个0 0对应的属性是什么？

【问题讨论】：

简单阅读文档怎么样？例如developer.mozilla.org/en-US/docs/Web/CSS/flex¨ ... 还有一个很棒的教程：css-tricks.com/snippets/css/a-guide-to-flexbox

【参考方案1】：

来自MDN：

flex

这是设置flex-grow、flex-shrink 和flex-basis 的速记属性。

将它们视为关于元素应该增长或缩小多少的比例参数很有用。 0 0 33% 基本上只是表示“占三分之一”，不再“增长”或“缩小”，与其他元素成正比。

更详细的：

flex-grow

flex-grow CSS 属性指定弹性项目的弹性增长因子。它指定项目应占用的弹性容器内的空间量。弹性项目的弹性增长因子与弹性容器中其他子项的大小有关。

flex-shrink

flex-shrink CSS 属性指定弹性项目的弹性收缩系数。当弹性项目的默认宽度比弹性容器宽时，弹性项目将根据 flex-shrink 数字收缩以填充容器。

flex-basis

flex-basis CSS 属性指定弹性项目的初始主尺寸。除非使用 box-sizing 另有指定，否则此属性确定内容框的大小。

【讨论】：

完美。谢谢！如果可以的话，只是补充一点：你能解释一下为什么他们选择0 代替flex-grow 吗？在我的脑海中，我希望该项目以1 的规模增长，而不是0，这个0 让我认为该项目甚至不应该是可见的。

@DanielMoss，当您更熟悉这些属性时，您就会明白为什么 flex-grow 不能这样工作。在这种情况下，flex-grow: 1（或任何其他值）不会产生任何影响，因为flex-basis 已经消耗了所有可用空间。

@Michael_B 非常感谢。卡梅伦也是。选择这个作为答案。

这是一个很棒的演示，刚刚通过 Smashing 时事通讯进入我的收件箱。这是这些属性作用的一个很好的例子：codepen.io/shshaw/details/EbjvbQ/…