要使CSS子元素在主轴方向对齐，必须确保父元素设置display: flex以启用Flex布局，正确使用justify-content属性并确认flex-direction定义的主轴方向，同时排除float、position、固定宽度或外边距等干扰样式，否则对齐将失效。
当CSS子元素在主轴方向无法对齐时，通常是因为父容器没有正确设置为Flex布局，或者justify-content属性未生效。要使用justify-content控制主轴排列，必须确保父元素是弹性盒子（Flexbox）容器。
确认父元素启用了Flex布局
只有设置了display: flex或display: inline-flex的容器，justify-content才会起作用。
justify-content但没写display: flex，属性无效。
- 给父元素添加
display: flex - 检查是否有拼写错误，如
dispaly或flexbox（正确应为display: flex）
正确使用 justify-content 控制主轴对齐
justify-content用于定义子元素在主轴（默认为横轴）上的对齐方式。主轴方向由flex-direction决定。
-
justify-content: flex-start—— 默认，左对齐 -
justify-content: flex-end—— 右对齐 -
justify-content: center—— 居中对齐 -
justify-content: space-between—— 两端对齐，中间间距相等 -
justify-content: space-around—— 间隔环绕每个元素 -
justify-content: space-evenly—— 元素间和边缘间距完全相等
检查主轴方向是否符合预期
主轴不一定是水平方向。通过flex-direction可以改变主轴方向。
立即学习“前端免费学习笔记（深入）”；
-
flex-direction: row—— 主轴为水平（从左到右） -
flex-direction: row-reverse—— 水平反向（从右到左） -
flex-direction: column—— 主轴为垂直（从上到下） -
flex-direction: column-reverse—— 垂直反向
column，那么justify-content控制的是垂直方向的对齐。
排除其他样式干扰
某些样式可能影响对齐效果，比如子元素设置了固定宽度、外边距（margin）、浮动（float）或定位（position）。
- 避免子元素使用
float或position: absolute，它们会脱离Flex布局流 - 检查是否有
width或min-width导致子元素撑满容器，影响排列 - 清除不必要的
margin，特别是margin: auto可能覆盖justify-content
基本上就这些。只要确保父元素是Flex容器、正确设置justify-content、明确主轴方向，并排除干扰样式，子元素就能顺利在主轴上对齐。不复杂但容易忽略细节。
