此类属性全部为项目属性
1、flex-grow:定义项目放大比例 默认为0(即使有剩余空间都不分配)。值为num;无单位
(1)项目没有给定宽度:
默认按照比例分配此时会造成宽度分配不均需要给所有项目加宽度width:0;
(2)项目给定宽度:
会分配剩余空间(宽度小于容器的前提下)
按照flex-grow: num;分配
!!!注意是分配剩余空间
2、flex-shrink:定义收缩比例 默认值为1(即使超出也不会超出会压缩)。值为num;无单位
算法:
加权综合(每个项目宽度自己的shrink 的总和)
收缩值(项目的宽度shrink/加权综合)
项目实际的宽度(项目初始宽度-收缩值)
!!!注意是压缩超出空间
例:
{ width: 100px; flex-shrink: 1; }
{ width: 200px; flex-shrink: 1; }
{ width: 200px; flex-shrink: 3; }//按照1:2:6(1*1:2*1:2*3)
3、flex-basis: 通俗的说就是宽度,
分配空间的时候要根据这一个值来进行计算,默认值auto(width属性或者内容撑开的宽度),也就是说,如果有这个属性,则按照这个属性分配,如果没有,按照width分配,width也没有,按内容撑开的宽度分配
优先级:
flex-basis > width > 无宽度(内容撑开)
4、复合属性flex: flex-grow flex-shrink flex-basis;
当容器宽度改变时,会根据给定的比例进行伸缩。
5、align-self 单独的项目在交叉轴上的对齐方式
属性值:stretch //默认值
flex-start //和默认值一样
center //居中
flex-end //主轴尾对齐
baseline //基线对其
注:如果要用baseline对齐,则这些项目都要有这个属性,是按照最大的字体的基线对齐