html - 相当于moz-box-orient？

我一直在互联网上浏览并通过许多不同的参考列表，但是找不到与-moz-box-orient等效的“通用”。

我目前遇到的问题是在不翻转整个展示位置的情况下翻转盒子。

这是我想要实现的，即通过定向将所有框保持在左侧：

display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-direction: reverse;

#parent {
  border: 2px solid blue;
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-direction: reverse;
}
#parent > div {
  border: 2px solid red;
  padding: 20px;
  margin: 10px;
}
#child1 { background: green; }
#child2 { background: yellow; }
#child3 { background: red; }
#child4 { background: orange; }

<section id="parent">
  <div id="child1">Child #1</div>
  <div id="child2">Child #2</div>
  <div id="child3">Child #3</div>
  <div id="child4">Child #4</div>
</section>

这是我没有-moz-box-orient的尝试：

display: flex;
flex-direction: row-reverse;

#parent {
  border: 2px solid blue;
  display: flex;
  flex-direction: row-reverse;
}
#parent > div {
  border: 2px solid red;
  padding: 20px;
  margin: 10px;
}
#child1 { background: green; }
#child2 { background: yellow; }
#child3 { background: red; }
#child4 { background: orange; }

<section id="parent">
  <div id="child1">Child #1</div>
  <div id="child2">Child #2</div>
  <div id="child3">Child #3</div>
  <div id="child4">Child #4</div>
</section>

再次回答我的问题：
有人知道-moz-box-orient: horizontal;的等效词吗？

最佳答案

box-orient是原始CSS Flexible Box Layout Module草稿的属性，并且已在较新的草稿中替换。

或多或少是您已经使用的flex-direction。

如果要将元素向左对齐，可以尝试justify-content：

justify-content: flex-end;

#parent {
  border: 2px solid blue;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
#parent > div {
  border: 2px solid red;
  padding: 20px;
  margin: 10px;
}
#child1 { background: green; }
#child2 { background: yellow; }
#child3 { background: red; }
#child4 { background: orange; }

<section id="parent">
  <div id="child1">Child #1</div>
  <div id="child2">Child #2</div>
  <div id="child3">Child #3</div>
  <div id="child4">Child #4</div>
</section>

但是，请注意，在您的旧代码中，颠倒的项目也与右侧对齐，但是您没有看到它，因为容器由于display: -moz-box而收缩。

如果您想要相同的行为，可以使用display: inline-flex：

#parent {
  border: 2px solid blue;
  display: inline-flex;
  flex-direction: row-reverse;
}
#parent > div {
  border: 2px solid red;
  padding: 20px;
  margin: 10px;
}
#child1 { background: green; }
#child2 { background: yellow; }
#child3 { background: red; }
#child4 { background: orange; }

<section id="parent">
  <div id="child1">Child #1</div>
  <div id="child2">Child #2</div>
  <div id="child3">Child #3</div>
  <div id="child4">Child #4</div>
</section>

关于html - 相当于moz-box-orient？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26305829/