flex容器主轴方向由flex-direction决定：默认row时主轴水平（左→右），column时主轴垂直（上→下）；交叉轴则始终与主轴垂直。
flex容器的两个主轴方向怎么理解
flex布局里有主轴（main axis）和交叉轴（cross axis），justify-content管主轴对齐，align-items管交叉轴对齐。主轴方向由flex-direction决定：默认是row（从左到右），这时主轴水平、交叉轴垂直；设成column就反过来。
justify-content常用值和实际效果
这个属性只在容器上生效，影响所有直接子元素在主轴上的分布方式：
-
flex-start：默认值，子项挤在主轴起点（比如row时靠左） -
center：居中对齐，注意是整行/整列居中，不是单个元素自身居中 -
space-between：首尾贴边，中间等距，但首尾项之间空隙比首/尾到容器边缘大一倍 -
space-around：每个子项两侧留相同间距，视觉上首尾项看起来“缩进”了一半 -
space-evenly：所有间隙（包括首尾到容器边缘）完全相等，最均匀但兼容性稍差（IE不支持）
align-items控制的是“单行内”的垂直（或水平）对齐
它作用于交叉轴，且只对单行 flex 项目生效（多行需用 align-content）。常见值：
-
stretch：默认值，子项拉伸填满交叉轴（高度/宽度），除非设置了固定尺寸或min-height等限制 -
center：子项在交叉轴上居中（row时垂直居中，column时水平居中） -
flex-start/flex-end：对齐到交叉轴起点或终点 -
baseline：按第一行文字基线对齐，适合含文本的混合高度元素
注意：align-items不会改变主轴位置，也不会让子项自身内容居中——那是text-align或margin: auto的事。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的细节和典型陷阱
几个实战中高频出问题的地方：
- 父容器没设
height时，align-items: center在flex-direction: row下可能“没反应”，因为交叉轴（垂直方向）高度由内容撑开，没有富余空间可居中 -
justify-content对单个子项无效（除非该子项用了margin: auto，此时它会独占剩余空间） - 当
flex-wrap: wrap且有多行时，align-items仍只作用于每行内部，跨行对齐要用align-content - 某些旧版 Safari 对
space-evenly支持不稳定，生产环境建议加回退（如space-around）
真正要让一个 flex 子元素在容器中完全居中，通常得同时设justify-content: center和align-items: center，而且容器本身得有明确的宽高或约束范围。
