作者:bj韩式尕伙 | 来源:互联网 | 2023-01-07 14:36
我目前正在学习flex,并在Bootstrap 4的列类中看到了这一行:
.col-md-4 {
flex: 0 0 33.3333%;
}
两者的对应属性是0 0
什么?
1> Cameron Hurd..:
从MDN:
flex
这是一个速记属性,设置flex-grow
,flex-shrink
和flex-basis
。
将它们视为元素应增长或缩小多少的比例论证很有用。0 0 33%
基本上只是意味着“占三分之一”,而不再与其他元素成比例地“增长”或“缩小”。
更详细地:
flex-grow
flex-grow CSS属性指定弹性项目的弹性增长因子。它指定项目应在flex容器内占用多少空间。弹性项目的弹性增长因子是相对于弹性容器中其他子项的大小的。
flex-shrink
flex-shrink CSS属性指定弹性项目的弹性收缩系数。当弹性项目的默认宽度大于弹性容器时,弹性项目将根据弹性收缩编号收缩以填充容器。
flex-basis
flex-basis CSS属性指定弹性项目的初始主要尺寸。除非另外使用box-sizing来指定,否则此属性确定内容框的大小。