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 rtl -
row-reverse
: right to left in ltr; left to right in rtl -
column
: same as row but top to bottom -
column-reverse
: same as row-reverse but bottom to top
View more guides by checkout out the Intro to CSS Flexbox collection
CodePen
New to HTML + CSS? Check out my new course Hello HTML & CSS
Hello HTML + CSS is a course designed to help you learn HTML & CSS from scratch.
Top comments (0)