Flex布局/弹性布局：
- 是一种浏览器提倡的布局模型
- 布局网页更简单、灵活
- 避免浮动脱标的问题
- 基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
- 任何一个元素都可以直接给宽度和高度一行显示
- display: flex; 开启弹性布局 给亲爸爸加 ，子元素可以自动的挤压或拉伸
组成部分
- 弹性容器
- 弹性盒子
- 主轴(默认主轴排列) x轴
- 侧轴 / 交叉轴 y轴
主轴对齐方式
justify-content 调节元素在主轴的对齐方式 添加到弹性容器-父级
justify-content:center 主轴居中排列
两侧没有间隙 space-between
justify-content: space-between;
间隙一样大 space-evenly
justify-content: space-evenly;
每个盒子都有间隙 2倍关系 space-around
justify-content: space-around;
右测开始
justify-content: flex-end;
侧轴对齐方式
align-items 调节元素在侧轴的对齐方式 添加到弹性容器-父级
align-self： 控制某个弹性盒子在侧轴的对齐方式 添加到弹性盒子-子级
align-items: stretch; 默认效果, 如果子元素不设置高度 弹性盒子沿着侧轴线被拉伸至铺满容器
align-items: center; 沿侧轴居中排列
align-items: flex-end; 终点开始依次排列
flex属性修改弹性盒子伸缩比
flex: 1;
- 只占用父盒子剩余尺寸
- 是给子盒子添加这个属性
圣杯布局
- 圣杯布局:左右固定 中间自适应 (左边固定 右边自适应)
- 两侧盒子写固定大小
- 中间盒子 flex: 1; 占满剩余空间
- 在flex眼中，标签不再分类。
- 简单说就是没有块级元素，行内元素和行内块元素
- 任何一个元素都可以直接给宽度和高度一行显示
- Flex不存在脱标的情况：也就是基本淘汰了浮动，更不用清除浮动
- 当然存在兼容性问题，如果不考虑兼容性可以大量使用，如果是移动端 则不用考虑直接flex
