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

Question

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

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

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

Answer 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 另有指定，否则此属性确定内容框的大小。