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）。
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
}
.left { margin-right: auto; }
.right { margin-left: auto; }
这种写法不依赖子元素数量，也不要求容器有富余空间，兼容性也比 space-evenly 更好（支持 IE10+）。如果只有两个子元素，甚至可以只给第一个加 margin-right: auto，第二个自然被挤到最右。
justify-content在垂直方向是否也能左右对齐
不能——justify-content 始终作用于主轴。当通过 flex-direction: column 把主轴变成垂直方向时，justify-content 就控制**上下对齐**，此时左右对齐要靠 align-items（它控制交叉轴）。
所以真正决定“左右”的，是主轴方向 + justify-content；而“上下”由交叉轴 + align-items 控制。容易混淆的点在于：没改 flex-direction 时，主轴默认水平，justify-content 才管左右；一旦改成 column，它就不管左右了。
需要同时处理左右和上下时，别只盯 justify-content，记得配合同级的 align-items 和必要时的 flex-direction 切换。
