目录
Flex布局（弹性布局）的特点
Flex布局模型构成
组成部分
主轴对齐方式
修改主轴方向
弹性盒子换行
侧轴对齐方式
子盒子水平垂直居中：
使用flex属性修改弹性盒子伸缩比
通过flex实现圣杯布局
小结
Flex布局（弹性布局）的特点
1.浏览器提倡的布局模型，页面渲染性很高。
2.布局简单，方便。
3.可以避免浮动脱标的问题。
4.兼容性高（不兼容低版本的浏览器）
Flex布局模型构成
设置方式：
给父元素设置display:flex,子元素可以自动的挤压或拉伸；
组成部分
1.弹性容器（父级，添加了display:flex的盒子）
2.弹性盒子（子级）
3.主轴（默认水平）
4.侧轴 / 交叉轴（默认垂直）
主轴对齐方式
justify-content（添加到弹性容器-父级里）：
修改主轴方向
flex-direction：
主轴默认是水平方向（x轴）
侧轴默认是垂直方向 (y轴)
弹性盒子换行
flex-wrap：
wrap-reverse的效果：
<!DOCTYPE html><html lang="en"><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>Document</title></head><body><div class="main"><div>son1</div><div>son2</div><div>son3</div><div>son4</div><div>son5</div><div>son6</div></div></body></html>
<style>.main {width: 200px;height: 200px;border: 1px solid #c3c3c3;display: flex;flex-wrap: wrap-reverse;}.main div {width: 50px;height: 50px;background-color: red;}.main div:nth-child(odd) {background-color: pink;}</style>
侧轴对齐方式
修改侧轴对齐方式属性：
align-items（添加到弹性容器-父级 控制所有弹性盒子）
align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子-子级 控制某个弹性盒子）：
侧轴多行对齐方式：
align-content： 属性和justify-content差不多可以借鉴上面主轴对齐方式
子盒子水平垂直居中：
<!DOCTYPE html><html lang="en"><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>Document</title></head><body><div class="box"><div class="son"></div></div></body></html>
<style>.box {display: flex;justify-content: center;align-items: center;width: 150px;height: 150px;margin: 100px auto;background-color: pink;}.son {width: 50px;height: 50px;background-color: purple;}</style>
使用flex属性修改弹性盒子伸缩比
注意事项：
1.只占用父盒子剩余的尺寸
2.是给子盒子添加这个属性
属性：flex：值；（取值要是整数，占用父级剩余尺寸的份数）
通过flex实现圣杯布局
圣杯布局就是左右两边大小固定不变，中间宽度自适应。
核心就是左右两边设置固定大小的盒子，中间盒子flex:1让中间的盒子自适应沾满剩余的空间。
<!DOCTYPE html><html lang="en"><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>Document</title></head><body><div class="top"><div></div><div></div><div></div></div></body></html>
<style>.top {display: flex;}.top div {width: 50px;height: 50px;background-color: red;}/* 圣杯布局（中间自适应 两杯固定） */.top div:nth-child(2) {flex: 1;background-color: pink;}</style>
小结
1. 在flex中，标签不用再分类了
没有块级元素，行内元素和行内块元素。任何一个元素都可以直接给高度和宽度一行显示。
2.flex不存在脱标的问题
