单个项目在交叉轴上的对齐方式
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%