flex缩写
flex: initial;是默认值,等价于flex: 0 1 auto,等价于
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
flex: 1;等价于
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
flex: none;等价于
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
flex: auto;等价于
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
flex: 100px;等价于
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;
flex: 1 3等价于
// 第1个值指flex-grow，第2个值根据值的类型不同表示不同的CSS属性
flex-grow: 1;
flex-shrink: 3;
flex-basis: 0%;
flex: 1 100px等价于
// 第1个值指flex-grow，第2个值根据值的类型不同表示不同的CSS属性
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;
结论
-
Flex布局中，一个flex子项的基础尺寸由
flex-basis、width等属性以及box-sizing盒模型共同决定 -
最终尺寸计算的优先级是：
最大最小尺寸限制 > 弹性增长或收缩 > 基础尺寸
width:100px+flex-basis:auto= 元素自身100px- content +
flex-basis:100px= max(content, flex-basis) = 大于等于100px- content +
width:100px+flex-basis:100px= content +flex-basis:100px= max(content, flex-basis) = 大于等于100px
flex-basis默认作用在content box上，box-sizing会有影响- 当一个元素同时被设置了
flex-basis(除值为 auto 外)和width(或者在flex-direction: column情况下设置了height),flex-basis具有更高的优先级。即flex-basis比width的优先级高，width在flex-basis为auto时候间接生效 flex-basis数值属性值(比如flex-basis: 100px)和width数值属性值不要同时使用flex-basis配合flex-grow等可以实现类似min-width、max-width的效果。
