什么是Flex布局？
Flex 布局是弹性布局 是一种浏览器提倡的布局模型
特点就是布局网页更简单、灵活，还可以避免浮动脱标问题 非常的适合结构化布局
怎么使用？
在父元素上添加css样式 ****
display： flex
子元素可以自动的去挤压和拉伸
对齐方式有哪些？
有主轴和侧轴两种对齐方式
主轴对齐
修改主轴对齐方式属性：
justify-content
可以设置的属性值:
| 属性值 | 作用 |
|---|---|
| flex-start | 默认值，起点开始依次排序 |
| flex-end | 终点开始依次排序 |
| center | 沿主轴居中排序 |
| space-around | 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧 |
| space-between | 弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子之间 |
| space-evenly | 弹性盒子沿主轴均匀排列弹性盒子与容器之间间距相等 |
侧轴对齐
修改侧轴对齐方式属性:
align-items（添加到弹性容器）
align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
可以设置的属性值:
| 属性值 | 作用 |
|---|---|
| flex-start | 默认值,起点开始依次排序 |
| flex-end | 终点开始依次排序 |
| center | 沿侧轴居中排序 |
| stretch | 默认值,弹性盒子沿主轴线被拉伸至铺满容器 |
flex 的基本使用方法
伸缩比
属性: flex: 值
取值为 数值(整数) 只占用父盒子剩余尺寸
主轴方向
在flex 布局模型中,弹性盒子默认沿着水平方向排列
主轴默认是水平方向，侧轴默认是垂直方向
修改主轴方向属性
flex-direction
| 属性值 | 作用 |
|---|---|
| row | 行，水平（默认） |
| column | 列，垂直 |
| row-reverse | 行。从右向左 |
| column-reverse | 列，从下向上 |
弹性盒子换行
弹性盒子换行显示：
flex-wrap：wrap
调整行对齐方式
align-content (取值与 justify-content基本相同)
