Flex布局简介
- Flex布局是一种浏览器提倡的布局模型
- Flex布局的网页更简单、灵活
- 避免浮动脱标的问题
兼容性搜索：https://caniuse.com/
Flex布局模型构成
作用：
- 基于Flex精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
- Flex布局非常适合结构化布局。
设置方式：父元素添加 display:flex，子元素可以自带的挤压或拉伸。
组成部分：弹性容器、弹性盒子、主轴、侧轴/交叉轴
水平排列：默认主轴在水平，弹性盒子都是沿着主轴排列。
主轴对齐方式
使用 justify-contenr调节元素在主轴的对齐方式。
常用属性：
- 居中效果：
justify-content:center;
- 间距在弹性盒子（子级）之间：
justify-content:soace-between;
- 所有地方的间距都相等：
justify-content:space-evenly;
- 间距加载子级的两侧
视觉效果：子级之间的距离是父级两头距离的2倍
justify-content:spance-around;
侧轴对齐方式
使用 align-items调节元素在侧轴的对齐方式
修改侧轴对齐方式属性：
- 添加到弹性容器：
align-items - 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）：
align-self
- 沿侧轴居中排列:
align-items: center;- 拉伸效果，默认值，现有状态，测试的时候去掉子级的高度
align-items: stretch;- 单独设置某个弹性盒子的侧轴对齐方式
.box div:nth-child(2) {
align-self: center;
}注意：当侧轴方向不给宽高值或者给 stetchi时，弹性盒子会自动拉伸到跟父级一样高。若给了高或拉伸后，弹性盒子的宽高为给出的宽高值或内容充满的值。
伸缩比
使用 flex属性修改弹性盒子伸缩比
语法：
flex:值；取值为整数值，按份计算，只占用父级剩余尺寸。
比如设置了2个盒子A和B，A盒子的取值为3，B盒子的取值为1，则表示把盒子剩余尺寸均分为：3+1=4份，A盒子占3份，B盒子占1份。
因为 Flex布局中都是是弹性盒子，所以伸缩比的好处是根据父级盒子的变化而变化，当浏览器窗口发生变化后，弹性盒子的尺寸也会随着父级容器变化后剩余的尺寸去继续计算。
此文是看完B站视频自己做的简单总结，内容较少，很多属性及语法也没进行过多介绍，更没有实例演示，推荐阅读阮一峰大佬的Flex布局教程：
