“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容器内的空间量。 flex项的flex增长因子是相对于flex-container中其他子项的大小。

flex-shrink

  

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

flex-basis

  

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