flex-direction
Determines the orientation of flex items in a container, essentially choosing whether they form a horizontal row or a vertical column.
Quick example
.container {
display: flex;
flex-direction: column;
} /* stacks items vertically */Syntax
flex-direction: row | row-reverse | column | column-reverserowrow-reversecolumncolumn-reverseQuick facts
rowExamples
Horizontal navigation bar
.nav {
display: flex;
flex-direction: row;
gap: 1rem;
}row is the default, but writing it makes intent clear when scanning code.
Stack on mobile, row on desktop
.card {
display: flex;
flex-direction: column;
}
@media (min-width: 640px) {
.card {
flex-direction: row;
}
}Changing flex-direction is a common responsive pattern: stack on small screens, switch to a row layout when there is room.
Reverse the visual order
.breadcrumb {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}row-reverse flips the visual order without changing the HTML. The first item in the markup appears on the right.
flex-direction Browser Support
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.
Safe to use without fallbacks.
Common pitfalls
row-reverse and column-reverse flip the visual display but leave keyboard tab order and screen reader order unchanged. This can create a confusing disconnect for keyboard and assistive technology users. Only use reverse when visual and reading order can diverge safely.
When you switch from row to column, the main axis becomes vertical. justify-content now controls vertical alignment and align-items controls horizontal. The property names do not change, but the effective direction does.
With flex-direction: column, items wrap into new columns, not new rows. You need a fixed height on the container for column wrapping to produce new columns, otherwise everything stacks in one column.
See also
flex-wrapflex-flowjustify-contentalign-items