与 flex-direction 属性混淆

Question

默认情况下沿主轴的弯曲方向是---->（从左到右）

当您将 flex 方向更改为 row-reverse 时，它​​变成了

Answer 1

当你镜像某些东西时，这是一种正常的行为。

如果你想让你的 flex-childs 在左边，你可以做这个女巫justify-content: flex-end;

.flex-container {
  display:flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

Answer 2

弯曲方向

它建立了主轴，从而定义了弹性项目放置在弹性容器中的方向。

弹性容器的主轴是弹性项目沿其布局的主轴。请注意，它不一定是水平的；这取决于 flex-direction 属性。

flex-direction 属性接受 4 个不同的值：

• 行（默认）：与文本方向相同
  • row-reverse：与文本方向相反
  • 列：与行相同，但从上到下
  • column-reverse：与 row-reverse 从上到下相同

注意 row 和 row-reverse 受弹性容器的方向性影响。 如果它的文本方向是ltr，row代表从左到右的横轴，row-reverse从右到左；如果方向是rtl，则相反。

Source

我相信这最后一段就是你要问的。