flex-direction

/* Horizontal (default) */
.container { display: flex; flex-direction: row;}

/* Vertical */
.container-vertical { display: flex; flex-direction: column;}

/* Horizontal (reversed) */
.container-reverse { display: flex; flex-direction: row-reverse;}

/* Vertical (reversed) */
.container-reverse-v { display: flex; flex-direction: column-reverse;}

Desktop

Chrome

29 and later ○

28 △

27 △

26 △

25 △

24 △

23 △

22 △

21 △

↑ Requires prefix '-webkit-'

20 and earlier ×

Firefox

28 and later ○

27 △

26 △

25 △

24 △

23 △

22 △

↑ Partial support

21 and earlier ×

Safari

9 and later ○

8 △

7.1 △

7 △

6.1 △

↑ Requires prefix '-webkit-'

6 and earlier ×

Edge

12 and later ○

Supported in all versions.

IE

11 △

Some bugs exist

10 △

Requires prefix '-ms-'

9 ×

8 ×

7 ×

6 ×

Opera

15 and later ○

12.1 ○

12 ×

11 and earlier ×

Mobile

iOS Safari

9 and later ○

8.4 △

8 △

7.1 △

7 △

↑ Requires prefix '-webkit-'

6.1 and earlier ×

Android Browser

4.4 ○

4.3 △

4.2 △

4.1 △

↑ Requires prefix '-webkit-'

4.0 ×

3.0 ×

2.3 ×

2.2 ×

2.1 ×

Chrome Android

Latest ○

Same as the desktop version.

Firefox Android

Latest ○

Same as the desktop version.

※ Version data is based on Can I Use.

'flex-direction' is the most fundamental property in Flexbox layout. It applies to elements with 'display: flex' or 'display: inline-flex' (flex containers) and determines the direction in which child elements (flex items) are arranged.

The most important concepts to understand in Flexbox are the "main axis" and the "cross axis." The value of 'flex-direction' determines the direction of these two axes, and all other Flexbox properties behave relative to them.

The 'justify-content' property controls alignment along the main axis, while 'align-items' controls alignment along the cross axis. This means that changing the value of 'flex-direction' also changes the direction in which 'justify-content' and 'align-items' take effect.

/* With row: justify-content works "horizontally", align-items works "vertically" */
.row-container {
    display: flex;
    flex-direction: row;
    justify-content: center;  /* Center horizontally */
    align-items: center;      /* Center vertically */
}

/* With column: justify-content works "vertically", align-items works "horizontally" */
.column-container {
    display: flex;
    flex-direction: column;
    justify-content: center;  /* Center vertically */
    align-items: center;      /* Center horizontally */
}

Arranges items horizontally in the same direction as the document's writing direction. In left-to-right languages (LTR) like English, items are placed from left to right. In right-to-left languages (RTL) like Arabic, items are placed from right to left. This is the most commonly used value and is ideal for navigation menus and horizontally arranged cards.

Arranges items in the opposite direction of 'row'. In LTR, items are placed from right to left. Only the visual order changes; the DOM order remains the same (see the accessibility note below).

Arranges items vertically along the block axis (normally top to bottom). Suitable for sidebar menus and vertically stacked form fields. Note that when using 'column', you need to explicitly set a 'height' on the flex container for 'flex-wrap' wrapping and 'justify-content' spacing to take effect.

Arranges items in the opposite direction of 'column'. Normally places items from bottom to top. Used in limited scenarios such as chat UIs where the latest message appears at the bottom.

/* Place logo and navigation links side by side */
.navbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

/* Stack card elements vertically and pin the footer to the bottom */
.card {
    display: flex;
    flex-direction: column;
    height: 300px;
}
.card-body {
    flex: 1;  /* Fill the remaining space */
}
.card-footer {
    /* Without flex: 1, it sits at its natural height at the bottom */
}

/* Desktop: horizontal → Mobile: vertical */
.layout {
    display: flex;
    flex-direction: row;
    gap: 20px;
}
@media (max-width: 768px) {
    .layout {
        flex-direction: column;
    }
}

This is one of the most practical Flexbox patterns. Simply switching the 'flex-direction' value with a media query achieves a responsive layout that is horizontal on desktop and vertical on mobile.

The direction of 'row' and 'row-reverse' depends on the HTML 'dir' attribute (document writing direction). You usually don't need to think about this for Japanese or English sites, but it becomes relevant when working with right-to-left (RTL) languages like Arabic or Hebrew.

<!-- Standard LTR site (e.g. English) -->
<div style="display: flex; flex-direction: row;">
    <div>Item 1</div>  <!-- Left -->
    <div>Item 2</div>
    <div>Item 3</div>  <!-- Right -->
</div>

<!-- RTL site (e.g. Arabic) -->
<div dir="rtl" style="display: flex; flex-direction: row;">
    <div>Item 1</div>  <!-- Right -->
    <div>Item 2</div>
    <div>Item 3</div>  <!-- Left -->
</div>

In other words, 'row' means "same direction as the document's writing direction," and 'row-reverse' means "the opposite direction." Note that 'column' and 'column-reverse' are not affected by the 'dir' attribute.

In elements with 'writing-mode: vertical-rl' (vertical text), the directions of the main axis and cross axis differ from the default.

When working with vertical text layouts, be aware that the effective directions of 'row' and 'column' are swapped.

When using 'row-reverse' or 'column-reverse', consider the accessibility implications.

These values only change the visual display order through CSS; the HTML DOM order remains unchanged. Screen readers and keyboard Tab navigation follow the DOM order, so there will be a discrepancy between the visual order and the interaction order.

/* Example: visually "C → B → A", but Tab key focuses in "A → B → C" order */
.container {
    display: flex;
    flex-direction: row-reverse;
}

/* If this contains links or buttons, */
/* you may click the right button visually but Tab focuses the left button first */

For purely decorative reordering (e.g., text-only with no interactive elements), this is not a major issue. However, if you use 'reverse' for interactive elements like navigation menus or forms, prefer changing the HTML order directly.

When using 'flex-direction: column' with 'justify-content' to position items vertically, the effect will not work if the flex container has no explicit 'height'. This is because the container's height equals the sum of its items, leaving no room for spacing adjustments.

/* NG: no height, so justify-content has no effect */
.container-ng {
    display: flex;
    flex-direction: column;
    justify-content: center;  /* No effect */
}

/* OK: specifying height makes it work */
.container-ok {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
}

When 'row-reverse' is specified, the main axis direction itself is reversed. So 'justify-content: flex-start' places items at the "right end," and 'flex-end' places them at the "left end." This can be counter-intuitive, so pay attention.

To change the order of individual items, use the 'order' property. The 'reverse' values in 'flex-direction' reverse the entire layout at once and cannot move specific items individually.