CSS 弹性盒布局

阐述

是 CSS 语言中第一个专门为布局设计的部分，它的核心概念在于在一个方向上安排一系列的块状元素，使得它们能够根据一定规则分配该维度的空间。相关的属性有：

display: flex
flex-direction：主轴的方向
justify-content：内容在主轴上对齐的方式
align-content：内容在交叉轴上对齐的方式
align-items：每一个主轴上的项目在交叉轴上对齐的方式
- 主轴和交叉轴共同的属性：flex-start, flex-end, center
- 主轴特有的属性：space-between, space-around, space-evenly
- 交叉轴特有的属性：baseline, stretch
align-self：覆盖某个元素在交叉轴上对齐的方式

在基础布局以外，还可以 CSS 弹性盒伸缩，并且可以用 margin 给不同的元素分组，用 gap 在主轴的元素之间添加分隔。

.wrapper {
	display: flex
}