目的：能够使用Flex布局模型灵活、快速的开发网页
Flex布局/弹性布局：
是一种浏览器提倡的布局模型
布局网页更简单、灵活
避免浮动脱标的问题
作用：
基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
Flex布局非常适合结构化布局（比如移动端界面）
设置方式
父级元素添加 display: flex； ，子元素可以自动的挤压或拉伸
组成部分
弹性容器（一般父级元素）
弹性盒子（子级盒子）
主轴
侧轴（交叉轴）
子级盒子对齐方式
通过轴对齐方式修改，更变子盒排齐方式。
主轴对齐
修改主轴对齐方式的属性：justify-content（添加到弹性容器-父级 ）
主轴的对齐方式：
默认效果,从起点开始依次排列（一般左往右）的依次排列
justify-content: flex-start;
！：粉红色为父级盒子背景色。
终点开始依次排列（一般右往左）
justify-content: flex-end;
主轴让内容居中，重要
justify-content: center;
让未占空间均匀分布在相邻子盒（包括相邻子盒子之间）与父级之间（空白）
1.让我们的子盒子比例2:1平分父级盒子（子盒子之间空白比两边子盒子与父级盒子之间空白比2:1）
justify-content: space-around;
2.让我们的子盒子1:1平分父级盒子的宽度（子盒子之间空白比两边子盒子与父级盒子之间空白比1:1）
justify-content: space-evenly;
让未占空间均匀分布在相邻子盒之间（空白）
justify-content: space-between;
侧轴（交叉轴）
修改主轴对齐方式属性:
align-items:（添加到弹性容器-父级 ）
align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子-子级）
侧轴的对齐方式：
默认效果 侧轴拉伸（子盒子若没有设置高height）
stretch
align-items: stretch;
侧轴对齐方式 父级左上角对齐
flex-start
align-items: flex-start;
侧轴底部对齐
flex-end
align-items: flex-end;
侧轴居中对齐,重要
center
align-items: center;
倾斜摆放和align-self展示
<!DOCTYPE html><html lang="ch-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>倾斜摆放和align-self展示</title><style>.box{width: 600px;height: 400px;margin: 0 auto;background-color: pink;/* 父级盒子变弹性容器 */display: flex;}.box .son1{width: 200px;height: 100px;background-color: aqua;/* 在弹性容器侧轴左上对齐 */align-self: flex-start;}.box .son2{width: 200px;height: 100px;background-color: red;/* 在弹性容器侧轴居中 */align-self: center;}.box .son3{width: 200px;height: 100px;background-color: blue;/* 在弹性容器侧轴底部对齐 */align-self: flex-end;}</style></head><body><div class="box"><div class="son1">1</div><div class="son2">2</div><div class="son3">3</div></div></body></html>
进阶——主轴方向改变
主轴默认是水平方向, 侧轴默认是垂直方向
修改主轴方向属性: flex-direction
