css3弹性盒子布局
1、 弹性布局：支持垂直方向排列，且可容纳多行内容。
2、 align-content：flex-start；表示所有项目在交叉轴方向上紧贴起始位置对齐，即默认的顶部对齐方式。
3、 底部对齐，内容整体贴靠容器下边缘。
4、 居中显示，文字在页面中垂直与水平均居中。
立即学习“前端免费学习笔记（深入）”；
5、 弹性布局：支持纵向排列，并兼容多行结构。
6、 align-content：space-between；表示项目在交叉轴方向上等距分布，首项与末项分别紧贴容器两端，中间各项间距一致。
7、 各元素间距均匀，首尾留白为中间间隔的一半，视觉效果稳重和谐。
8、 弹性布局：支持垂直排布，适用于多行内容场景。
9、 align-content：stretch；表示项目自动拉伸以完全填满交叉轴方向上的可用空间。
10、 垂直方向的自适应伸缩布局，各子元素高度不统一。
11、 元素沿主轴起始端对齐（通常为顶部），这是 flex-direction 为 column 时的默认对齐行为。
12、 底部对齐，内容整体下沉至容器底部。
13、 居中对齐，文字在视口内实现垂直与水平双重居中。
14、 垂直方向的动态伸缩布局，各子容器尺寸各异。
15、 按照文本基线（baseline）进行对齐，确保文字类内容视觉连贯。
16、 垂直方向的弹性伸缩布局，各子项高度存在差异。
17、 默认状态下，子元素会在交叉轴方向自动拉伸，以撑满整个容器高度。
