flex容器中justify-content控制主轴（默认row为水平）整体对齐，align-items控制交叉轴（row时为垂直）对齐，单个项目可用align-self覆盖align-items，但无justify-self需用margin实现水平单独调整。
flex容器的justify-content控制水平对齐
主轴方向默认是 row，所以 justify-content 管的是左右对齐。它只作用于容器内所有项目整体在主轴上的位置，不改变单个项目大小。
-
justify-content: flex-start—— 默认值，贴左对齐（注意不是text-align: left，后者对文字生效，这个对整个 flex 项目生效） -
justify-content: center—— 居中，但前提是容器有足够宽度，否则看不出效果 -
justify-content: space-between—— 首尾项目贴边，中间等距；如果只有两个项目，就是左右各一个，中间空隙最大 -
justify-content: space-around—— 每个项目两侧留相同间隙，视觉上比space-between更“松散” - 别用
text-align试图控制 flex 项目的水平位置——它完全无效
align-items决定垂直对齐，但要注意交叉轴方向
当 flex-direction: row（默认）时，交叉轴是垂直方向，align-items 就管上下对齐；如果改成 column，那它就管左右了。很多人卡在这儿，调了半天没反应，其实是没意识到轴变了。
-
align-items: stretch—— 默认值，项目高度拉满容器（除非设置了固定高或min-height） -
align-items: center—— 垂直居中，最常用，比如按钮里图标和文字对齐 -
align-items: flex-start—— 顶部对齐，适合左上角堆叠式布局 -
align-items: baseline—— 按文字基线对齐，适合混合文本与图标时保持视觉一致 - 如果某个项目自己设了
margin-top或vertical-align，会被忽略——flex 下这些属性失效
单个项目用align-self覆盖容器默认对齐
align-self 是加在 flex 项目（子元素）上的，优先级高于容器的 align-items。它不适用于 justify-content 的对应项（没有 justify-self），所以水平方向想单独调，得靠 margin 或包装一层。
-
align-self: center可让某一个 item 在交叉轴上居中，其余按容器规则走 -
align-self: flex-end常用于右对齐某个按钮，比如表单末尾的「提交」按钮 - 设为
align-self: auto会恢复继承容器的align-items值 - 注意：
align-self对display: inline元素无效，必须是块级或 flex 项目本身
垂直居中文字+图片时容易漏掉的关键点
很多人写 display: flex; align-items: center; 后发现文字还是偏下，不是因为代码错，而是没关掉行高干扰或图片默认对齐方式。
立即学习“前端免费学习笔记（深入）”；
- 图片默认是
vertical-align: baseline，哪怕在 flex 容器里，如果父容器没清掉字体相关属性，仍可能影响基线计算 - 给容器加
font-size: 0;再给文字单独设字号，能彻底规避空白符和行高带来的额外空间 - 图片加
height: auto;和max-width: 100%;，避免因尺寸过大撑开容器导致align-items: center失效 - 如果文字用了
line-height，且值大于字体大小，它会把内容“吊”在行高中间，和 flex 的居中逻辑叠加后反而错位
