Layout
flex-direction
flex-direction sets whether the items in a flexbox run across (row) or down (column), and which end they start from.
Syntax
row | row-reverse | column | column-reversePreview
Code
.box {
display: flex;
flex-direction: column;
}Controls
About
Values
row: in the direction of the text (left to right in horizontal writing). This is the initial value.row-reverse: the opposite ofrow(right to left).column: in the direction lines advance (top to bottom in horizontal writing).column-reverse: the opposite ofcolumn(bottom to top).
Set flex-direction on a box whose display is flex or inline-flex (a flex container). The preview on this page sets display: flex as a helper declaration.
What the direction changes
The direction set here becomes the main axis. justify-content aligns items along the main axis and align-items along the axis across it (the cross axis). With column, justify-content aligns vertically and align-items horizontally.
row and column follow the text direction, so with direction: rtl, row runs right to left, and with writing-mode: vertical-rl it runs top to bottom.
-reverse only changes what you see
row-reverse and column-reverse only reverse the visual order. Focus moves with the Tab key and screen readers still follow the HTML order, so when the order means something, reorder the HTML instead.
The starting end flips too, so with row-reverse, justify-content: flex-start aligns to the right.
Shorthand
flex-flow sets flex-direction and flex-wrap together (flex-flow: column wrap).