相信大家都看过
flex:6
这样的布局,但是不知其所以然,这里就来分析一下
flex-basis
性默认值是auto
,如果有flex-basis
属性,项目设置的宽和高就会自动忽略,而根据flex-basis
属性来设置大小,当然这只是对主轴方向有效,也就是只对宽和高中一个有效。。flex-grow
属性是和flex-basis
一起搭配使用,如果flex-basis
来布局后,仍然有剩余空间就根据flex-grow
大小来分配空间,flex-shrink
和flex-grow
的默认值是0,是0的情况下就不会占用或者缩小来适应容器的改变。。flex:6
就是指flex-basis
为0%,flex-shrink:1
flex-grow:6
的情况,三个属性一般很少分开写,大部分都是这样的书写格式flex:flex-grow flex-shrink flex-basis
。。。