弹性盒模型

最新推荐文章于 2024-11-23 20:50:42 发布

原创最新推荐文章于 2024-11-23 20:50:42 发布 · 113 阅读

0 ·

CC 4.0 BY-SA版权

本文深入讲解了CSS弹性盒模型的使用方法，包括主轴和交叉轴的对齐方式、元素排序及收缩规则，帮助读者掌握Flex布局的精髓。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开启弹性盒模型

 .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;
        }