1、 Flex布局是什么?
弹性布局
2、 Flex布局有哪些属性?
默认特性：从左到右，从上到下，行，行间距
<div class="container">
<div class="items1">1</div>
<div class="items2">2</div>
<div class="items3">3</div>
</div>
1. display: flex;
设置给 container，开启 Flex 布局
2. flex-direction
设置给 container，控制排布方向，默认 row，主轴水平，左边开始；column 是主轴垂直，上边开始；加 -reverse 是另一边开始
3. flex-wrap
设置给 container，控制排满是否换行，默认 nowrap，不换行；wrap 是 item 的宽度和超出 container 主轴方向宽度时换行（默认从左往右满后，往下换行）；加 -reverse 是交换交叉轴换行方向
4. justify-content
设置给 container，控制主轴的对齐方式:
- 默认 flex-start，左对齐；
- flex-end 右对齐，
- center 居中，
- space-between 两边对齐，item 间隔相等；
- space-around 每个 item两边间隔相等，相邻 item 间隔【叠加】；
- space-evenly 每个 item两边间隔相等，相邻 item 间隔【重合】
5. align-items
设置给 container，控制交叉轴的对齐方式:
-
默认 stretch，对不明确高度的 item，盛满容器高度；
-
flex-start 交叉轴起点对齐；
-
flex-end 交叉轴终点对齐；
-
center 交叉轴中点对齐；
-
baseline 以 item 的第一行文字的基线对齐
6. align-content
设置给 container，控制多行 item 在交叉轴的对齐方式，单行无意义（必须搭配 flex-wrap），
- 默认 stretch 轴线占满交叉轴；
- flex-start/start 交叉轴起点对齐，
- flex-end/end 交叉轴终点对齐，
- center 交叉轴中点对齐，
- space-between 交叉轴两边对齐，轴线之间间隔相等；
- space-around 每个轴线两边间隔相等，相邻轴线间隔叠加；
- space-evenly 每个 item 均匀分布，相邻 item 间隔和边框距离相等
7. order
设置给 item，控制排列顺序，数值越小，排列越靠前，默认值为0
8. flex-grow
设置给 item，控制 item 扩张占据剩余空间的能力，设置值的按比例吞噬占据；当设置为0时，不扩张
9. flex-shrink
设置给 item，控制 item 在 container 空间不足时候缩小的比例，默认为1；当设置为0时，不压缩
10. flex-basis
设置给 item，控制 item 的初始大小，默认为 auto，大小会根据实际内容而定，单位支持百分比、像素值或其他单位
11. flex
设置给 item，等分效果
```
.item {
flex: 1; // 等分
flex: 2; // 等分占2份
flex: 300px; // 固定宽度300px
}
```
flex 是 flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。
```
// 一些简写
.item {
flex: auto;
/* 等价于 ↓ */
flex: 1 1 auto;
flex: 1;
/* 等价于 ↓ */
flex: 1 1 0%;
flex: 1 1;
/* 等价于 ↓ */
flex: 1 1 0%;
flex: 100px;
/* 等价于 ↓ */
flex: 1 1 100px;
flex: 0%; // 不建议直接写0
/* 等价于 ↓ */
flex: 1 1 0%;
}
```
12. gap, row-agp, column-gap
设置给 container，控制 item 之间的最小间隙，对于两边分的布局，只在空间变小时生效。
```
.container {
gap: 10px 20px;
/* 等价于 ↓ */
row-gap: 10px;
column-gap: 20px;
}
```
13. align-self
设置给 item，控制跟其他 item 不一样的 align-items 效果
