要使CSS子元素在主轴方向对齐，必须确保父元素设置display: flex以启用Flex布局，正确使用justify-content属性并确认flex-direction定义的主轴方向，同时排除float、position、固定宽度或外边距等干扰样式，否则对齐将失效。
当CSS子元素在主轴方向无法对齐时，通常是因为父容器没有正确设置为Flex布局，或者
属性未生效。要使用
控制主轴
排列
，必须确保父元素是弹性盒子（Flexbox）容器。
确认父元素启用了Flex布局
只有设置了
或
的容器，
才会起作用。
常见错误：只写了但没写，属性无效。
给父元素添加
检查是否有拼写错误，如
或
（正确应为
）
正确使用 justify-content 控制主轴对齐
用于定义子元素在主轴（默认为横轴）上的对齐方式。主轴方向由
决定。
—— 默认，左对齐
—— 右对齐
—— 居中对齐
—— 两端对齐，中间间距相等
—— 间隔环绕每个元素
—— 元素间和边缘间距完全相等
检查主轴方向是否符合预期
主轴不一定是水平方向。通过
可以改变主轴方向。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
—— 主轴为水平（从左到右）
—— 水平反向（从右到左）
—— 主轴为垂直（从上到下）
—— 垂直反向
提示：如果设置了，那么控制的是垂直方向的对齐。
排除其他样式干扰
某些样式可能影响对齐效果，比如子元素设置了固定宽度、外边距（margin）、浮动（float）或定位（position）。
避免子元素使用
或
，它们会脱离Flex布局流
检查是否有
或
导致子元素撑满容器，影响排列
清除不必要的
，特别是
可能覆盖
基本上就这些。只要确保父元素是Flex容器、正确设置
、明确主轴方向，并排除干扰样式，子元素就能顺利在主轴上对齐。不复杂但容易忽略细节。
justify-contentjustify-contentdisplay: flexdisplay: inline-flexjustify-contentjustify-contentdisplay: flexdisplay: flexdispalyflexboxdisplay: flexjustify-contentflex-directionjustify-content: flex-startjustify-content: flex-endjustify-content: centerjustify-content: space-betweenjustify-content: space-aroundjustify-content: space-evenlyflex-directionflex-direction: rowflex-direction: row-reverseflex-direction: columnflex-direction: column-reversecolumnjustify-contentfloatposition: absolutewidthmin-widthmarginmargin: autojustify-contentjustify-content