Why does flex-direction: row-reverse start on the right side of the flex container?

Question

By default, the flex direction along the main axis is ----> (left to right)

When you change the flex direction to row-reverse it becomes this <----- (right to left) but why does it start on the right side of the flex container?

Answer 1

That's a normal behaviour when you mirror something.

If you want your flex-childs on the left side, you can do this witch justify-content: flex-end;

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