display: flex;

flex使用指令：
.box {
display: flex;
}

注：
1.行内元素变为块级元素
2.若子元素规定宽高，则按规定宽高显示。若所有子元素超过父容器，会压缩子容器
3.若子元素未规定宽高，则高度为父容器的高度；宽度由子元素的内容自动调整

弹性盒子基础

---

flex-direction

定义主轴方向：
.box {
display:flex;

flex-direction: row（从左往右ABC）;
flex-direction: row-reverse（倒序从左往右CBA）;
flex-direction: row（从上往下ABC）;
flex-direction: row（倒序从上往下CBA）;
}

弹性盒子交叉轴方向

---

justify-content

主轴内容排列方式：
.box {
display:flex;

flex: start;（紧靠主轴起始点）
flex: end;（紧靠主轴结束点）
flex: center;（在主轴上居中）
flex: space-around;（空白平均包裹每个子元素）
flex: space-between;（空白平均填充子元素中间）
flex: space-evenly;（空白和子元素平均分布）
}

弹性盒子换行

---

align-items

交叉轴内容排列方式（主轴为单行时）：
.box {
display:flex;

flex: start;（紧靠交叉轴起始侧）
flex: end;（紧靠交叉轴结束侧）
flex: center;（在交叉轴上居中）
flex: stretch;（子项目无固定尺寸时，拉伸交叉轴方向的尺寸至父容器尺寸）
}

弹性盒子交叉轴方向

---

align-content

交叉轴内容排列方式（主轴为多行时）：
.box {
display:flex;

flex: start;（紧靠交叉轴起始侧）
flex: end;（紧靠交叉轴结束侧）
flex: center;（在交叉轴上居中）
flex: space-between;（在交叉轴上两端对齐）
flex: space-around;（项目两侧间隙相等）
flex: space-evenly;（项目间隙均匀分布）
}

弹性盒子交叉轴方向

---

flex-wrap

控制是否换行：
.box {
display:flex;

flex-wrap: nowrap;（不换行，从左往右ABC，可能压缩）
flex-wrap: wrap;（换行）
flex-wrap: wrap-reverse;（换行且行数倒序）
}

弹性盒子换行

---

gap

弹性盒子伸缩：
.box {
display:flex;

gap: （如20px或20px 10px）;（行、列分别间距20px或行间距20px、列间距10px）
}

弹性盒子伸缩

---