先记住这个答案
justify-content: flex-start 让所有子项贴向主轴起点，flex-end 贴向主轴终点。关键在于「起点在哪」：它由 flex-direction 决定，而 flex-direction: row 的物理方向又受书写方向影响。在 LTR 页面里 row 的起点在左边，RTL 页面里 row 的起点就跑到了右边。加上 row-reverse 会再翻转一次，所以 flex-start 对应的物理方向有四种可能。
flex-start永远对齐主轴起点- 主轴方向由
flex-direction决定 - RTL 会翻转
row的物理方向 start和flex-start含义不同
不同 flex-direction 下起点的位置
想象主轴是一条有方向的箭头。flex-direction: row 在 LTR 下箭头从左指向右，flex-start 就在左边。换成 row-reverse，箭头反过来，flex-start 跑到右边。column 箭头从上往下，column-reverse 箭头从下往上。justify-content 的 flex-start 和 flex-end 永远贴着箭头的两端，不管箭头朝哪。
row 的对比CSS/* LTR：子项排在左边 */
.nav-ltr {
display: flex;
direction: ltr;
justify-content: flex-start; /* 起点在左 */
}
/* RTL：子项排在右边 */
.nav-rtl {
display: flex;
direction: rtl;
justify-content: flex-start; /* 起点在右 */
}同样写 flex-start，物理方向完全相反。这是因为 direction: rtl 翻转了行内方向，row 的主轴跟着翻了，起点从左边变成右边。
flex-start 和 start 的区别
CSS 对齐规范后来新增了不带 flex- 前缀的 start 和 end。它们的参照系不同：flex-start 跟随主轴方向（受 flex-direction 影响），而 start 跟随书写方向（不受 flex-direction 影响）。
row-reverse 下的差异CSS.container {
display: flex;
flex-direction: row-reverse;
/* flex-start 在右边（主轴翻转了） */
/* start 仍然在左边（书写方向没变） */
}在 row-reverse 下用 justify-content: flex-start 子项靠右，用 justify-content: start 子项靠左。日常写代码如果不涉及 row-reverse，两者效果一样，但面试官会用这个细节来考察你是否真正理解主轴方向。
容易答错的地方
- 把
flex-start等同于左对齐 - 很多人脱口而出「
flex-start就是左对齐」。flex-direction: column时flex-start是顶部对齐，row-reverse时是右对齐，RTL 下又不同。准确说法是「对齐到主轴起点」。 - 以为 RTL 只影响文字方向
direction: rtl不光让文字从右往左排，也会翻转flex-direction: row的主轴方向。这时flex-start对应物理右侧，flex-end对应物理左侧。做多语言适配时如果忽略这一点，导航栏的布局会反。
面试官还会怎么问？
justify-content: flex-end 和 margin-left: auto 都能把元素推到右边，区别是什么？
flex-end 作用在容器上，所有子项一起靠右。margin-left: auto 作用在单个子项上，只把那个子项推到右边，其他子项不受影响。导航栏里左边 logo 右边按钮的布局，通常给按钮加 margin-left: auto 比用 flex-end 更合适。
在 column 方向下，flex-start 和 flex-end 分别在哪？
column 的主轴是从上到下，flex-start 在顶部，flex-end 在底部。column-reverse 则翻转，起点在底部。
justify-content 能接受 left 和 right 吗？
规范里 left 和 right 是合法值，但它们总是映射到物理方向，不跟随 flex-direction。在 column 方向下 left 和 right 没有意义会退回 start。实际项目里几乎不用它们，用 flex-start 和 flex-end 更清晰。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。