justify-content 控制主轴对齐（水平或垂直），align-items 控制交叉轴对齐（垂直或水平）；两者均需父容器为 flex 且有明确尺寸，配合 center 值可实现完全居中。
justify-content 控制的是主轴方向的对齐
主轴方向由 flex-direction 决定：默认是 row（从左到右），此时主轴是水平方向，justify-content 就管左右对齐；设成 column 后主轴变成垂直方向，它就管上下对齐。
常用值有：flex-start（默认，靠主轴起点）、center（居中）、flex-end（靠终点）、space-between（首尾贴边，中间等距）。
注意：justify-content 对单个子元素生效的前提是——父容器有足够剩余空间。如果子元素宽度占满容器（比如 width: 100%），再设 justify-content: center 也看不出效果。
align-items 控制的是交叉轴方向的对齐
交叉轴永远垂直于主轴。主轴是水平方向时，交叉轴就是垂直方向，align-items 管上下对齐；主轴是垂直方向时，它就管左右对齐。
立即学习“前端免费学习笔记（深入）”；
关键点：
