justify-content: left 和 justify-content: start 有什么区别？

Question

他们在MDN article on justify-content 中提到：

左： 这些物品朝向对齐容器的左边缘彼此齐平地包装。如果属性的轴与内联轴不平行，则此值的行为类似于 start。

对我来说，属性轴的含义是显而易见的。是justify-content 属性的轴吗？还有，什么是内联轴——内联文本的基线？

实际上justify-content: left 和justify-content: start 的行为对我来说完全一样，与写作方向无关。

例子：

.flex-container {
  display: flex;
  height: 200px;
  flex-wrap: wrap;
  justify-content: start;
  background-color: DodgerBlue;
  direction: rtl;
}

.two {
  justify-content: left;
}

.flex-container>div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

.flex-container .desc {
  font-size: 16px;
}

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div class="desc">Justify-content: start</div>
</div>

<div class="flex-container two">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div class="desc">justify-content: left</div>

</div>

如上所示，在 flexbox 的上下文中，left 和 start 的行为完全相同。所以，

justify-content: left 和 justify-content: start 有什么区别？

Answer 1

justify-content: left

指的是左方向。 （始终从左到右对齐项目）

justify-content: start

取决于页面或DOM方向（RTL，LTR），如果页面是ltr，则start指left，end指右（这就是您看不到任何变化的原因）。而如果方向是RTL，则start指的是right，end指的是left强>。

在具有多种语言或至少两种写作方向不同的语言的网站中，使用 start 和 end 有好处。

尝试将direction: rtl 添加到您的 HTML 标记中，看看有什么不同。