目前HTML只用关注Flex弹性布局和Grid网格布局。 2022我认为禁用float布局了，float最多用在图文环绕，副作用太大。

一、弹性布局的概念

弹性布局是一种灵活的盒模型布局方式，在弹性布局中包含两种重要对象

一是弹性容器 二是被容器包含的弹性子元素 通过设置弹性容器的属性，能够指定弹性元素的排列方式，可以方便的实现响应式页面布局效果。默认情况下：

我们注意以下四点： １. 每个弹性容器都有两根轴: 主轴和交叉轴，两轴之间成 ９０ 度关系 ２. 每根轴都有起点和终点， 这对于元素的对齐非常重要 ３. 弹性容器中的所有子元素称为， 弹性元素永远沿主轴排列 ４.弹性元素也可以通过 ｄｉｓｐｌａｙ: ｆｌｅｘ 设置为另一个弹性容器形成嵌套

二、设置一个元素为弹性容器

将一个块级元素设置为弹性容器，只需要设置该元素的display值为flex。

.container{
   display: flex; 
}

我们学习弹性布局就是学习弹性容器和弹性子元素的属性

80%的精力放在弹性容器的属性上: flex-direction属性定义容器的主轴方向。 flex-warp属性决定主轴上一排放不下是否换行。 justify-content属性决定主轴方向上弹性子元素的对齐方式。 align-items属性用于设置弹性元素在交叉轴上的对齐方式。 align-content属性用于设置交叉轴方向上多行对齐方式，以一行为最小对齐单位。

三、弹性容器上的属性

3.1 flex-direction

测试用HTML代码

<div class="container s1">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
</div>

<div class="container s2" >
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
</div>

<div class="container s3" >
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
</div>

<div class="container s4">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
</div>

测试用CSS代码

.container{
        display: flex;
        margin: 30px;
        border: 2px solid orange;
        width: 400px;
}
.item{
        width: 50px;
        height: 50px;
        background-color: pink;
        line-height: 50px;
        text-align: center;
        font-size: 30px;
        border: 2px solid black;
}
.s1{flex-direction: row;}
.s2{flex-direction: row-reverse;}
.s3{flex-direction: column;}
.s4{flex-direction: column-reverse;}

3.2 flex-warp

样式代码参考以上，补充关键CSS代码：

.s1{ flex-wrap: nowrap;}		/* 默认值，不换行 */
.s2{ flex-wrap: wrap;}			/*换行，第一行在上方*/
.s3{ flex-wrap: wrap-reverse;}	/* 换行，第一行在下方 */

3.3 justify-content

.s1{ justify-content: flex-start; }
.s2{ justify-content: flex-end; }
.s3{ justify-content: center; }
.s4{ justify-content: space-between; }
.s5{ justify-content: space-around; }
.s6{ justify-content: space-evenly; }

3.4 align-items

.container{
        display: flex;
        flex-wrap: wrap;
        margin: 30px;
        border: 2px solid orange;
        width: 300px;
        height: 100px;
}

.container>div{
        width: 50px;
        height: 50px;
        background-color: pink;
        line-height: 50px;
        text-align: center;
        font-size: 30px;
        border: 2px solid black;
}

.container>div.a{
        height: 30px ;
        font-size: 20px ;
        line-height: 30px ;
}
.s4>div{
        /* 还原高度为自适应 */
        height: auto !important; 
}

.s1{align-items: flex-start;}
.s2{align-items: flex-end;}
.s3{align-items: center;}
.s4{align-items: stretch; }
.s5{align-items: baseline;}

3.5 align-content（建议初学者忽略）

.s4>div{
        height: auto;  /* 还原高度为自适应 */
}

.s1{align-content: flex-start;}
.s2{align-content: flex-end;}
.s3{align-content: center;}
.s4{align-content: stretch; }
.s5{align-content: space-between;}
.s6{align-content: space-around;}
.s7{align-content: space-evenly;}

四、弹性子元素上的属性（建议初学者忽略）

这里我就直接放几个关键的属性了，因为子元素上属性不常用。

order属性用来指定元素排序