row, the default, lays items out horizontally from left to right, in a left-to-right language, row-reverse lays them out horizontally but in reverse order, column stacks items vertically from top to bottom, and column-reverse stacks them vertically but in reverse order. Changing flex-direction between row and column also swaps which axis is considered the main axis versus the cross axis, which directly affects how justify-content and align-items behave, since justify-content always aligns along the main axis and align-items always aligns along the cross axis, regardless of which direction that currently corresponds to.
1Understanding Flex-direction
row, the default, lays items out horizontally from left to right, in a left-to-right language, row-reverse lays them out horizontally but in reverse order, column stacks items vertically from top to bottom, and column-reverse stacks them vertically but in reverse order. Changing flex-direction between row and column also swaps which axis is considered the main axis versus the cross axis, which directly affects how justify-content and align-items behave, since justify-content always aligns along the main axis and align-items always aligns along the cross axis, regardless of which direction that currently corresponds to.
Remember that changing flex-direction to column swaps the meaning of justify-content and align-items too, since justify-content always follows the main axis and align-items always follows the cross axis — what was horizontal alignment in row mode becomes vertical alignment in column mode, and vice versa.
.sidebar {
display: flex;
flex-direction: column;
}2Practical Example
Here is a real-world application of Flex-direction showing how it is used in production CSS code.
.row {
display: flex;
flex-direction: row;
justify-content: center;
}
.column {
display: flex;
flex-direction: column;
justify-content: center;
}3Best Practices
Follow these guidelines when working with Flex-direction:
1. Use flex-direction: column for a vertically stacked layout, like a sidebar or a card's internal content, rather than trying to force a row-based layout to behave vertically
2. Remember that justify-content and align-items swap their practical, visual effect when switching between row and column, since they always follow the main and cross axes respectively, not fixed horizontal/vertical directions
3. Use row-reverse or column-reverse sparingly, and be mindful they can create a confusing mismatch between visual order and the underlying DOM/tab order for keyboard and screen-reader users
Tip: Remember that changing flex-direction to column swaps the meaning of justify-content and align-items too, since justify-content always follows the main axis and align-items always follows the cross axis — what was horizontal alignment in row mode becomes vertical alignment in column mode, and vice versa.
.sidebar {
display: flex;
flex-direction: column;
}