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

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

嘬一口啊
嘬一口啊原创
2020年06月27日 23:01:511179浏览

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

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

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

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

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

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

flex-grow:0;默认值是0

flex:1;等同于flex:auto;

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

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

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

flex-shrink:0;默认不收缩

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

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

1. 设置尺寸的方法

  1. /*原始大小*/
  2. width:60px;
  3. /*设置基础宽度*/
  4. flex-basis:80px;
  5. /*设置最小宽度*/
  6. min-width:100px;

2. 三个尺寸的优先级

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

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

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

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

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

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议