flex-direction
Sets the direction of the main axis: flex items line up in a row or in a column.
- Initial value
row- Inherited
- No
- Animatable
- no
- Applies to
- flex containers
- JavaScript
element.style.flexDirection = "column"
Example
#.cards {
display: flex;
flex-direction: column;
gap: 12px;
}
@media (min-width: 600px) {
.cards { flex-direction: row; }
}<div class="cards stage">
<div class="box">HTML</div>
<div class="box">CSS</div>
<div class="box">JS</div>
</div>Definition and usage
#The flex-direction property chooses the main axis of a flex container. With row items sit side by side horizontally, with column they stack one under another. The -reverse variants flip the display order.
The direction affects how other properties behave. justify-content always positions items along the main axis, and align-items along the cross axis. After switching to column, justify works vertically and align horizontally.
Reversing the order only changes the visual appearance. Screen readers and Tab-key navigation still follow the order in the code, so don’t use -reverse to order content that matters.
Syntax
#flex-direction: row | row-reverse | column | column-reverse;Values
#- Items in a row, in the text-writing direction.
- A row in reverse order, starting from the right edge.
- Items in a column, from top to bottom.
- A column in reverse order, starting from the bottom.
Values in practice
#row
.demo { flex-direction: row; }row-reverse
.demo { flex-direction: row-reverse; }column
.demo { flex-direction: column; }column-reverse
.demo { flex-direction: column-reverse; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- On phones it’s common to start with
columnand switch torowon wider screens inside a@mediaquery. - Changing the direction swaps the roles of
justify-contentandalign-items. That’s the most common source of surprise with Flexbox.
Related entries
#- flex-wrapLets flex items wrap onto new lines when there isn’t enough room.
- flex-flowA shorthand that combines flex-direction and flex-wrap in one declaration.
- justify-contentPositions items along the main axis of a flex or grid container.
- align-itemsAligns items along the cross axis of a flex or grid container.
- orderChanges the display order of an item inside a flex or grid container.
Spotted a mistake or missing an example? Write to us.