flex-direction
Summary
The flex-direction CSS property describes how flex items are placed in the flex container, by setting the direction of the flex container’s main axis.
Overview table
- Initial value
row- Applies to
- flex containers
- Inherited
- No
- Media
- visual
- Computed value
- specified value
- Animatable
- No
- CSS Object Model Property
flexDirection
Syntax
flex-direction: columnflex-direction: column-reverseflex-direction: rowflex-direction: row-reverse
Values
- row
- The flex container’s main axis has the same orientation as the inline axis of the current writing mode. The main-start and main-end directions are equivalent to the start and end directions, respectively, of the current writing mode.
- row-reverse
- Same as 'row’, except the main-start and main-end directions are swapped.
- column
- The flex container’s main axis has the same orientation as the block axis of the current writing mode. The main-start and main-end directions are equivalent to the before/head and after/foot directions, respectively, of the current writing mode.
- column-reverse
- Same as 'column’, except the main-start and main-end directions are swapped.
Examples
Displaying children in a row
.list {
display: flex;
flex-direction: row;
}
.list div {
flex: 1;
}
Displaying children in a row in reversed order
.list {
display: flex;
flex-direction: row-reverse;
}
.list div {
flex: 1;
}
Displaying children in a column
.list {
display: flex;
flex-direction: column;
}
.list div {
flex: 1;
}
Displaying children in a column in reversed order
.list {
display: flex;
flex-direction: column-reverse;
}
.list div {
flex: 1;
}
Notes
The reverse values do not reverse box ordering; like ‘writing-mode’ and ‘direction’, they only change the direction of flow. Painting order, speech order, and sequential navigation orders are not affected.
Related specifications
- CSS Flexible Box Layout Module
- Candidate Recommendation