CODEWITHSUNDEEP
htmlcssflexbox
user10727236
user10727236

Reputation:

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

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?

Upvotes: 0

Views: 1312

Answers (2)

d-h-e
d-h-e

Reputation: 2558

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

Upvotes: 2

RiddleMeThis
RiddleMeThis

Reputation: 1345

flex-direction

It establishes the main-axis, thus defining the direction flex items are placed in the flex container.

The main axis of a flex container is the primary axis along which flex items are laid out. Beware, it is not necessarily horizontal; it depends on the flex-direction property.

The flex-direction property accepts 4 different values:

  • row (default): same as text direction
    • row-reverse: opposite to text direction
    • column: same as row but top to bottom
    • column-reverse: same as row-reverse top to bottom

Note that row and row-reverse are affected by the directionality of the flex container. If its text direction is ltr, row represents the horizontal axis oriented from left to right, and row-reverse from right to left; if the direction is rtl, it's the opposite.

Source

I believe this last paragraph is what your asking about.

Upvotes: 2

Related Questions