这是我参与「第五届青训营」伴学笔记创作活动的第 7 天
Flex 布局（弹性布局）
基本概念
- 百分比布局（流式布局）：宽度自适应（百分比形式）、高度固定
- 浮动布局：如果父级盒子没有高度，会出现高度坍塌的情况，但可以通过清除浮动解决；
flex 布局：可以完成浮动的功能，但不会出现高度坍塌的现象
- flex 布局（弹性布局）是一种浏览器提倡的布局模型，可以避免浮动高度坍塌现象
- flex 布局的设置方式：给父元素（直系父亲）添加 display:flex，其子元素可以自动的挤压或拉伸
- 父元素叫弹性容器，子元素叫弹性盒子；
- 弹性盒子都是沿着主轴排列，默认情况下（可以修改），主轴为水平方向
主轴对齐方式
使用 justify-content 调节元素在主轴的对齐方式
| 属性值 | 作用 |
|---|---|
| flex-start | 默认值，起点开始依次排列 |
| flex-end | 重点开始依次排列 |
| center | 沿主轴居中排列 |
| space-around | 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧子集之间的距离是父级两头距离的两倍 |
| space-between | 弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子之间 |
| space-evenly | 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等 |
侧轴对齐方式
使用 align-items 调节元素在侧轴的对齐方式（align-items 添加到弹性容器、align-self 控制某个弹性盒子在侧轴的对齐方式，添加到弹性盒子）
| align-items align-self属性值 | 作用 |
|---|---|
| flex-start | 默认值（子集盒子有固定高度），起点开始依次排列 |
| flex-end | 终点开始依次排列 |
| center | 沿侧轴居中排列 |
| stretch | 默认值，弹性盒子沿主轴线被拉伸至铺满容器（在子集盒子没有固定高度时生效的默认值） |
- 如果弹性盒子（子集）没有固定高度，默认值为 stretch（拉伸至与弹性容器父级一样高）；如果明确 align-self 属性为 center，那么高度为内容高度
- 如果弹性盒子（子集）没有固定宽度，那么宽度为内容宽度
伸缩比
使用 flex 属性修改弹性盒子伸缩比（只占用父盒子剩余尺寸）
主轴方向
使用 flex-direction 改变弹性容器主轴方向
| 属性值 | 作用 |
|---|---|
| row | 行，水平（默认值） |
| column | 列，垂直 |
| row-reverse | 行，从右至左 |
| column-reverse | 列，从下至上 |
弹性盒子多行排列
使用 flex-wrap 实现弹性盒子多行排列效果
- 当弹性容器的宽度不够弹性盒子（有固定宽度）一行排列时，弹性盒子仍然会一行排列，但弹性盒子的宽度会变化（自动缩放，每个弹性盒子宽度一样）
- flex：wrap；多行排列，不会自动缩放 flex：nowrap；不多行排列，自动缩放宽度
- 调整行对齐方式：align-content 取值和 justify-content 一致
