“ 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 CSS属性指定弹性项目的弹性增长因子。它指定项目应在flex容器内占用多少空间。弹性项目的弹性增长因子是相对于弹性容器中其他子项的大小的。

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

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