January 17, 2021
Intro to CSS Flexbox - Flex Direction
Flex direction establishes the axis all content within the parent flex container displays itself on.
Flexbox allows you to set a single-direction layout. The two directions can either be horizontal (row) or vertical (column). The default value of every container with display: flex
defined is flex-direction: row
.
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
row (default)
: left to right in ltr; right to left in rtlrow-reverse
: right to left in ltr; left to right in rtlcolumn
: same as row but top to bottomcolumn-reverse
: same as row-reverse but bottom to top
View more guides by checkout out the Intro to CSS Flexbox collection
CodePen
See the Pen flex-direction by Andy Leverenz (@webcrunchblog) on CodePen.
Est. reading time:
1 minutes
Stats:
1,279 views
Source code:
Source code
Categories
Collection
Part of the CSS Flexbox collection