主轴方向由flex-direction决定，默认row时justify-content控制水平对齐，column时控制垂直对齐；2. 父容器必须设置display: flex才能启用flexbox对齐；3. 子元素尺寸过大或min-width限制会导致对齐失效，应使用flex-shrink允许压缩；4. 默认margin、空白字符或字体间隙可能干扰布局，需重置样式；5. align-items在row下控制垂直对齐，column下控制水平对齐，子元素高度不均会影响居中效果；6. 调试时应简化结构，排除float、absolute等布局干扰，逐步排查问题根源。
Flexbox布局中，主轴和交叉轴的对齐问题常让开发者困惑。当justify-content或align-items没有按预期工作时，多数是由于容器方向、元素尺寸或默认样式干扰导致。以下是常见问题与解决方法。
检查flex-direction是否影响主轴方向
主轴的方向由flex-direction决定。默认为row，主轴水平；若设为column，主轴变为垂直，此时justify-content控制的是纵向排列。
- 确认
flex-direction: row时，justify-content在水平方向生效 - 若使用
column，想控制垂直居中应使用justify-content: center - 交叉轴随之改变，
align-items在row下控制垂直对齐，在column下控制水平对齐
确保父容器正确应用Flex属性
子元素的对齐依赖于父容器设置display: flex。若忘记声明，justify-content和align-items将无效。
- 给父元素添加
display: flex或inline-flex - 检查是否有CSS优先级或拼写错误覆盖该样式
- 避免父容器被其他布局（如float、absolute）干扰Flex行为
处理内容溢出或固定尺寸限制
当子项总宽度超过容器，或设置了min-width等限制，可能导致对齐失效。
- 子元素避免使用过大的
width或min-width: max-content - 使用
flex-shrink: 1允许项目压缩，避免撑破容器 - 测试时可临时添加
border或outline查看实际占用空间
重置默认样式与空白间隙
文本节点或默认外边距可能造成视觉错位。
- 清除子元素的
margin，特别是段落或标题标签 - 注意HTML中换行产生的空白字符，在
font-size: 0父级内处理 - 设置
align-items: center时，确保子元素高度未被内容拉伸不均
基本上就这些。关键是理解主轴与交叉轴随flex-direction动态变化，并确保结构和样式无干扰。调试时建议先简化结构，逐步还原排查。
