Question

我一直在寻找互联网并通过一些不同的参考列表，但无法找到＆＃34;通用＆＃34;相当于-moz-box-orient。

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

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

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

＆＃13;

#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; }

＆＃13;

<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>

＆＃13;

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

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

＆＃13;

#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; }

＆＃13;

<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>

＆＃13;

再次猜测我的问题：
有谁知道相当于-moz-box-orient: horizontal;？

Answer 1

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>

什么相当于moz-box-orient？

1 个答案: