What is the equivalent to moz-box-orient? - html

Question

I've been looking around the internet and through a number of different reference lists, but can't find the "universal" equivalent to -moz-box-orient.
The problem I am currently met with is in reversing my boxes without reversing the entire placement.
This is what I want to achieve, that is, keeping all of the boxes to the left hand side through orientation:
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>
This is my attempt without -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>
To surmise my question once more:
Does anyone know the equivalent to -moz-box-orient: horizontal;?

Answer 1

box-orient is a property of the original CSS Flexible Box Layout Module draft, and has been replaced in newer drafts.
A more or less equivalent is flex-direction, which you already use.
If you want to align the elements to the left, you can try 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>
However, note that with your old code, the reversed items are aligned to the right side too, but you don't see it because the container shrinks because of display: -moz-box.
If you want the same behavior, you can use 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>