css flex flex-basis属性

flex-basis表示子元素被放入flex容器之前的大小,即你想要的子元素大小而不是其真实大小,子元素最终的大小取决于flex容器的宽度。

设置了flex-basis属性后width属性将无效

A和B都设置了width为100px但是由于A设置了flex-basis为50px,所以A的宽度是50px

例子

max-width决定了子元素的最大宽度

A设置了flex-basis为1000px,max-width为100px所以A的宽度是100px

例子

min-width决定了子元素的最小宽度

A设置了flex-basis为20px,min-width为80px所以A的宽度是80px

例子