flex-grow,flex-shrink,flex-basis及flex

flex-grow:默认值0;分配剩余空间的扩张比例;

flex-basis:默认值auto;倘若设置了此属性,那么计算剩余空间之前要优先减去此属性,且它的层级比width高,会将width覆盖。

有一点需要注意,如果flex-basis和width其中有一个是auto,那么另外一个非auto的属性优先级会更高。(也就是非auto的会覆盖auto的)。

flex-shrink:默认值1;分配多余的空间压缩比例。

设为0则代表无论如何都不压缩此子盒子。

flex:flex-grow flex-shrink flex-basis;默认计算值为 0 1 auto
当flex取值为none,则计算值为 0 0 auto
当flex取值为auto,则计算值为 1 1 auto
当flex取值为一个非负数字,则该数字为flex-grow的值,计算值为 非负数字 1 0%
当flex取值为一个长度或百分比,则该值为flex-basis的值,计算值为 1 1 该长度或百分比
当flex取值为两个非负数字,则分别视为flex-grow flex-shrink的值,计算值为 两个非负数字 0%
当flex取值为一个非负数字和一个长度或百分比,则分别视为flex-grow flex-basis的值,计算值为 非负数字 1 长度或百分比

猜你喜欢

转载自www.cnblogs.com/xinyouhunran/p/10135699.html