Flex reverse + space-between
HTML
<div class="examples">
<div>
<div class="row">
<div class="child" />
</div>
</div>
<div>
<div class="column">
<div class="child" />
</div>
</div>
</div>
CSS
.examples {
display: flex;
justify-content: center
}
.column,
.row {
display: flex;
/* justify-content: space-between; */ /* remove to see bug */
margin: 10px;
}
.row {
width: 200px;
height: 50px;
background-color: #b33;
flex-direction: row-reverse;
}
.column {
width: 50px;
height: 200px;
background-color: turquoise;
flex-direction: column-reverse;
}
.child {
height: 50px;
width: 50px;
background-color: orange;
}