弹性布局
弹性布局专门用来处理一维内容的布局。对于侧边栏模板，弹性布局是个理想的布局模型。
弹性布局的特性：
可以按行或按列排列。
遵从文档的书写模式（ Writing mode ）。
默认在单行展示，但也可以设置换行。
布局中的物品可以在视觉上重新排列，而非依照 DOM 。
空间会弹性分配给物品们，物品们的空间会随着父元素空间变大变小。
使用 Box Alignment 属性，可以在物品和弹性行周围分配空间。
物品可以在轴线上进行对齐。
主轴和交叉轴
主轴 由 flex-direction 属性设置，即布局方向。主轴的开始和结尾叫做 main-start 和 main-end 。
交叉轴 和主轴相交叉（若主轴为 row ，则交叉轴为 column ）。同样，交叉轴的开始和结尾叫做 cross-start 和 cross-end 。
可以在交叉轴上做两件事：
你可以单独地移动物品，或者所有物品来与弹性容器一同相互对齐；
如果设置了换行，你可以对其控制所分配空间大小。
创建一个 flexbox 容器
在父元素上：
.container {
display: flex;
}
一旦父元素为 flex ，子元素将成为 flex 物品（ item ）。
这里存在这些初始值：
物品按行排列；
不换行；
不会自行填充整个容器；
从容器的开头排列。
布局方向
可以设置容器的 flex-direction 属性为 row row-reverse column column-reverse 。
以上属性值逻辑上与本地语言书写模式及书写方向是一致的。
使用 "-reverse" 会导致访问性（ Accessibility ）问题。
自动换行
可以设置容器的 flex-wrap 属性来让容器中的物品根据容器宽度自动换行：
.container {
display: flex;
flex-wrap: wrap;
}
flex-wrap 的初始值为 nowrap ，当没有空间的时候会直接溢出。在空间限制下，物品会压缩自己的空间，直到 min-content 值。
不要期望
flex-wrap能起到 grid 布局的作用。
flex-direction 和 flex-wrap 可以缩写在 flex-flow 里：
.container {
display: flex;
flex-flow: column wrap;
}
空间分配
物品会默认自行舒展开，且不会强行填充可用空间，这是因为有初始值 flex: initial; ，即：
flex-grow: 0;不能空间扩展flex-shrink: 1;可以收缩flex-basis: auto;基础大小
还有一些关键字：
flex: auto;，等价于：flex-grow: 1;允许空间扩展flex-shrink: 1;可以收缩flex-basis: auto;基础大小
flex: 1;每个物品空间都是平均的flex: none;既不会扩展，也不会收缩
flex-grow flex-shrink 均为权值，扩展或紧缩的空间会按权值分配。
flex-basis 则可以是长度，或者关键字 auto 。如果设置为 0 ，内容的空间将不会得到扩展。
flex 属性是三个属性的简写，即 flex: flex-grow flex-shrink flex-basis; 。
排列顺序
可以在物品上指定 order 属性确定物品位置，初始值为 0 。
使用
order会导致访问性（ Accessibility ）问题。
对齐方式
空间分配（行在容器中的对齐方式）
justify-content主轴上分配空闲空间有这些属性值：
flex-start向 main-start 靠，开头留白center居中，两端留白flex-end向 main-end 靠，开头留白stretch拉伸物品大小space-between物品间留白space-around物品四周留白space-evenly物品间留白，包括两端
更多可以看 justify-content - MDN 。
align-content交叉轴（行间）上分配空间默认值为
stretch拉伸。使用别的值可能需要先设置flex-wrap，同时可能需要设置align-items来取消交叉轴上物品的拉伸。有这些属性值：
flex-start向 cross-start 靠，开头留白center居中，两端留白flex-end向 cross-end 靠，开头留白stretch拉伸物品大小space-between物品间留白space-around物品四周留白
place-content为前两者简写，一致则只写一个。place-content: justify-content, align-content;
对齐方式（行内上物品对齐方式）
align-self：在交叉轴上自身的对齐方式（用在物品上）align-items：在交叉轴上（行内）对齐所有物品（用在容器上）
可以用边距属性来分割行内物品：
.box:nth-child(3) {
margin-inline-start: auto;
}
综上，可以这样居中一个元素：
#root {
height: 10em;
display: flex;
justify-content: center;
align-items: center;
}
间距
可以用 row-gap column-gap gap 设置固定间距。