YouTip` element to flow horizontally in reverse order:
```css
div {
display: flex;
flex-direction: row-reverse;
}
```
---
## Syntax
```css
flex-direction: row | row-reverse | column | column-reverse | initial | inherit;
```
---
## Property Values
| Value | Description |
| :--- | :--- |
| `row` | **Default value.** Flex items are displayed horizontally as a row (from left to right in LTR writing mode). |
| `row-reverse` | Flex items are displayed horizontally as a row, but in reverse order (from right to left in LTR writing mode). |
| `column` | Flex items are displayed vertically as a column (from top to bottom). |
| `column-reverse` | Flex items are displayed vertically as a column, but in reverse order (from bottom to top). |
| `initial` | Sets this property to its default value (`row`). |
| `inherit` | Inherits this property from its parent element. |
---
## Specifications and Details
| Feature | Description |
| :--- | :--- |
| **Default Value:** | `row` |
| **Inherited:** | No |
| **Animatable:** | No |
| **CSS Version:** | CSS3 |
| **JavaScript Syntax:** | `object.style.flexDirection = "column-reverse"` |
---
## Browser Support
The numbers in the table specify the first browser version that fully supports the property. Numbers followed by `-webkit-`, `-ms-`, or `-moz-` specify the first version that supported the property with a vendor prefix.
| Property | Chrome | Edge / IE | Firefox | Safari | Opera |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **flex-direction** | 29.0
21.0 `-webkit-` | 11.0
10.0 `-ms-` | 28.0
18.0 `-moz-` | 9.0
6.1 `-webkit-` | 17.0 | --- ## Code Examples ### 1. Row Layout (Default) Lays out items horizontally from left to right. ```css .container { display: flex; flex-direction: row; } ``` ### 2. Row Reverse Layout Lays out items horizontally from right to left. ```css .container { display: flex; flex-direction: row-reverse; } ``` ### 3. Column Layout Stacks items vertically from top to bottom. ```css .container { display: flex; flex-direction: column; } ``` ### 4. Column Reverse Layout Stacks items vertically from bottom to top. ```css .container { display: flex; flex-direction: column-reverse; } ``` --- ## Important Considerations 1. **Writing Modes & Text Direction:** The exact behavior of `row` and `row-reverse` depends on the writing mode and text direction (`direction: ltr` or `rtl`). For example, in a Right-to-Left (RTL) language like Arabic, `row` will start from the right and flow to the left. 2. **Accessibility (A11y):** Using `row-reverse` or `column-reverse` changes the visual order of elements on the screen. However, it does not change the tab order or screen reader reading order, which follows the source order in the HTML document. Ensure this visual-to-source mismatch does not confuse keyboard users. --- ## Related Properties * (css3-pr-flex.md) * (css3-pr-flex-basis.md) * (css3-pr-flex-flow.md) * (css3-pr-flex-grow.md) * (css3-pr-flex-shrink.md) * (css3-pr-flex-wrap.md)
21.0 `-webkit-` | 11.0
10.0 `-ms-` | 28.0
18.0 `-moz-` | 9.0
6.1 `-webkit-` | 17.0 | --- ## Code Examples ### 1. Row Layout (Default) Lays out items horizontally from left to right. ```css .container { display: flex; flex-direction: row; } ``` ### 2. Row Reverse Layout Lays out items horizontally from right to left. ```css .container { display: flex; flex-direction: row-reverse; } ``` ### 3. Column Layout Stacks items vertically from top to bottom. ```css .container { display: flex; flex-direction: column; } ``` ### 4. Column Reverse Layout Stacks items vertically from bottom to top. ```css .container { display: flex; flex-direction: column-reverse; } ``` --- ## Important Considerations 1. **Writing Modes & Text Direction:** The exact behavior of `row` and `row-reverse` depends on the writing mode and text direction (`direction: ltr` or `rtl`). For example, in a Right-to-Left (RTL) language like Arabic, `row` will start from the right and flow to the left. 2. **Accessibility (A11y):** Using `row-reverse` or `column-reverse` changes the visual order of elements on the screen. However, it does not change the tab order or screen reader reading order, which follows the source order in the HTML document. Ensure this visual-to-source mismatch does not confuse keyboard users. --- ## Related Properties * (css3-pr-flex.md) * (css3-pr-flex-basis.md) * (css3-pr-flex-flow.md) * (css3-pr-flex-grow.md) * (css3-pr-flex-shrink.md) * (css3-pr-flex-wrap.md)