flex主轴对齐用justify-content属性，它作用于flex容器，控制子项在主轴方向的整体分布，取值包括flex-start、center、space-between、space-around、space-evenly等。
flex主轴对齐用哪个CSS属性？
主轴对齐只看 justify-content，别被 align-items 或 align-content 带偏。它只作用于 flex 容器，控制所有子项在主轴（row 或 column 方向）上的整体分布方式。
常见取值和效果：
-
justify-content: flex-start—— 默认值，左对齐（row）或顶对齐（column） -
justify-content: center—— 居中，注意是容器内主轴方向居中，不是垂直居中 -
justify-content: space-between—— 首尾贴边，中间等距，至少 2 个子项才看出效果 -
justify-content: space-around—— 每个子项两侧留等宽间隙，视觉上比space-between更松散 -
justify-content: space-evenly—— 项与项、项与容器边缘间距完全相等（IE 不支持）
flex-direction 改变后，justify-content 还是“左对齐”吗？
不是。“左”“右”这种说法失效了——justify-content 始终按当前主轴方向生效。主轴由 flex-direction 决定：
-
flex-direction: row（默认）→ 主轴水平，justify-content: flex-start= 左对齐 -
flex-direction: row-reverse→ 主轴仍水平但反向，flex-start就变成右对齐 -
flex-direction: column→ 主轴垂直，flex-start= 顶部对齐 -
flex-direction: column-reverse→ 主轴垂直反向，flex-start= 底部对齐
所以写布局时，先确认 flex-direction，再选 justify-content，不能凭直觉硬套“左/右”。
立即学习“前端免费学习笔记（深入）”；
为什么 justify-content 没生效？常见卡点
最常踩的坑不是写错值，而是容器本身没成为 flex 上下文：
移动端UI&微信UI YDUI Touch
下载
YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。
- 忘了给父容器加
display: flex或display: inline-flex - 父容器宽度/高度为 0，比如子项是浮动或绝对定位，导致 flex 无法计算主轴空间
- 子项设置了
flex: 0 0 auto且内容超长，撑满容器后没剩余空间可分配 - 用了
flex-wrap: wrap且子项换行了，此时justify-content只作用于每行内部，不是整个容器
调试建议：在浏览器开发者工具里检查父元素 computed 样式，确认 display 真的是 flex，且主轴尺寸（width 或 height）不为 0。
space-between 在单个子项时为什么空白？
justify-content: space-between 的逻辑是：首项靠起点，末项靠终点，其余项平均分中间空隙。只有 ≥2 个子项时才有“中间空隙”可分。
单个子项时，它会同时满足“首项靠起点”和“末项靠终点”，矛盾，结果就是该项被强制放在起点（即 flex-start 效果），看起来像没生效。
解决方法：
- 明确需求：真要居中？直接用
justify-content: center - 要兼容单多子项统一行为？改用
space-around或space-evenly，它们对单子项也保持对称留白 - 动态场景（如 JS 插入子项）？用 JS 判断数量后切 CSS 类，避免样式逻辑错位
主轴对齐看着简单，但方向依赖、子项数量敏感、容器尺寸隐含约束——这些细节漏掉一个，布局就“不动如山”。
