CSS中justify-content属性的left与start取值有什么区别？

首先解答你提到的两个概念疑问：

• 「属性的轴」就是justify-content生效的目标轴：flex布局下是你通过flex-direction定义的主轴，grid布局下是行方向的内联轴。
• inline轴不是内联文本的基线，是当前书写模式下，内联元素排列方向对应的轴：比如常规LTR书写模式下inline轴是水平从左到右，RTL书写模式下是水平从右到左，竖排书写模式下inline轴是垂直方向。

二者本质是物理对齐和逻辑对齐的差异：

• start是逻辑对齐值，对齐方向完全跟随书写模式、主轴方向的设定：RTL书写模式下对齐容器右边缘，竖排书写模式下如果主轴是垂直方向则对齐顶部，永远对齐主轴的逻辑起始端。
• left是物理对齐值，永远对齐容器的物理左边缘，不受书写模式、文本方向影响。

MDN提到的「属性的轴与inline轴不平行时left表现和start一致」，指的是比如flex布局设置flex-direction: column，主轴变为垂直方向，和水平的inline轴不平行，这时候left会退化为和start表现相同，对齐主轴（垂直方向）的起始端。

demo中看到二者表现一致，是旧版浏览器的实现bug导致的：早期Chromium、Firefox版本没有严格区分flex布局下的物理和逻辑对齐值，会把justify-content: left当成start处理。
在新版Chrome 123+、Firefox 119+版本中测试你提供的代码，会看到明确差异：

• justify-content: start搭配direction: rtl时，元素会对齐到容器的右边缘（RTL模式下的逻辑起始端）
• justify-content: left搭配direction: rtl时，元素还是对齐到容器的物理左边缘

内容的提问来源于stack exchange，提问作者user31782