项目在主轴上的增长因子和收缩因子的设置和简写&尺寸的设置和优先级

单个项目在交叉轴上的对齐方式

align-self:flex-start;当前项目在交叉轴左端(开端)排列对齐

align-self:flex-end;当前项目在交叉轴右端(末端)排列对齐

algin-self:center;当前项目在交叉轴中间排列对齐

项目在主轴空间上的增长因子

增长因子计算:剩余空间/(除以)增长因子数 在按每个项目所占增长因子个数把增长因子分给每个项目 每个项目在原尺寸上加上分给的收缩因子数

flex-grow:0;默认值是0

flex:1;等同于flex:auto;

例:
/*给当前弹性项目设置两份增长因子*/
flex-grow:2;
/*给当前弹性项目设置0.5份增长因子*/
flex-grow:0.5;

设置项目在主轴空间上的收缩因子

`收缩因子计算:剩余空间/(除以)增长因子数 在按每个项目所占增长因子个数把增长因子分给每个项目 每个项目在原尺寸上减去分给的收缩因子数

flex-shrink:0;默认不收缩

/*当前盒子收缩因子为2份*/
flex-shrink:2;
/*当前盒子收缩因子为0.5份*/
flex-shrink:0.5;

原始尺寸/基础尺寸/最小尺寸的设置方法和优先级

1. 设置尺寸的方法

/*原始大小*/
width:60px;
/*设置基础宽度*/
flex-basis:80px;
/*设置最小宽度*/
min-width:100px;

2. 三个尺寸的优先级

原始尺寸 < 基础尺寸 < 最小尺寸

增长因子，收缩因子，基础尺寸属性的简写

flex: 放大因子 收缩因子 基础尺寸

flex:flex:0 0 auto; 禁止放大/禁止收缩 基础尺寸 等价于 flex:none

flex:0;等价于flex:0 0 0%