justify-content常用值有flex-start（左对齐）、flex-end（右对齐）、center（居中）、space-between（两端对齐）、space-around（项目两侧等距）、space-evenly（所有间隙相等）；其效果取决于主轴方向，水平主轴时控制左右，垂直主轴时控制上下。
justify-content有哪些常用值及其实际效果
justify-content 控制的是主轴（main axis）上子元素的对齐方式，当 display: flex 且主轴为水平方向（默认）时，它就决定左右对齐行为。常见取值有：flex-start（左对齐）、flex-end（右对齐）、center（居中）、space-between（两端对齐，首尾贴边，中间等距）、space-around（每个项目两侧留等距空白）、space-evenly（所有空白完全相等，包括首尾外侧）。
注意：justify-content 只对直接子元素生效，且前提是容器有足够剩余空间；如果子元素总宽度撑满容器，多数值（如 space-between）会失效。
为什么设置了justify-content: space-between却没看到左右对齐效果
这是最常遇到的问题：看起来“没反应”，其实是因为子元素只有 1 个，或所有子元素加起来占满了容器宽度，导致没有剩余空间可分配。
- 检查子元素是否设置了固定宽度或
flex-shrink: 0，导致无法压缩让出空间 - 确认父容器设置了
display: flex，且未被其他样式（如width: fit-content）限制宽度 -
space-between要求至少 2 个子元素才体现“两端”——1 个元素时它等效于flex-start - 若用
inline-flex，父容器本身是内联级，可能受前后文本影响，建议显式设width: 100%或块级显示
左右各放一个元素的简洁写法
不需要依赖 space-between 的复杂计算，更可控的做法是：左侧元素用 margin-right: auto，右侧元素用 margin-left: auto（或统一给中间空元素设 margin: 0 auto）。
立即学习“前端免费学习笔记（深入）”；
