弹性盒模型

开启弹性盒模型

 .main{ width:3"rem";
        height:5"rem";
        background:"red";
		 display: flex;
    	 justify-content:space-around;
     	 align-items: center;
        }

根据主轴上的位置变化
对齐方式：
flex-start: 开始位置 (默认值)
flex-end: 结束位置
center: 中心位置
space-around: 两端对齐 (元素到边框的距离是 元素之间的一半)
space-between: 两端对齐 (元素到边框之间没有距离)

flex-direction 主轴的方向 ：
row（默认值）：从左到右。
row-reverse： 从右到左
column：从上到下
column-reverse：从下到上
flex-direction: column-reverse;

align-items:交叉轴上的对齐方式 （规定所有的子元素）
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项⽬的第⼀⾏⽂字的基线对齐。
stretch（默认值）：如果项⽬未设置⾼度或设为auto，将占满整个容器的⾼ 度。

  .main>div{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: cyan;
            text-align: center;
            line-height: 100px;
        }

元素的排序
需要将当前层级的每一个元素都排列
否则： 排序的元素和未排序的元素 将按照两套排序规则走

   .box:nth-child(1){
             order: 3;
        }
        .box:nth-child(2){
            order: 2;
        }
        .box:nth-child(3){
            order: 1;
        }

flex 的收缩 默认是按照等比 超出的部分/元素总个数 = 每个元素要收缩的面积

      .main>div:nth-child(1){
            flex-shrink: 2;
        }
        .main>div:nth-child(2){
            flex-shrink: 1;
        }
        .main>div:nth-child(3){
            flex-shrink: 1;
        }
        .main>div:nth-child(4){
            flex-shrink: 0.5;
        }
        .main>div:nth-child(5){
            flex-shrink: 0.5;
        }

来源：CSDN

作者：weixin_46174967

链接：https://blog.csdn.net/weixin_46174967/article/details/104122832