DEV Community

Cover image for Intro to CSS Flexbox - Flex Direction

Intro to CSS Flexbox - Flex Direction

justalever profile image Andy Leverenz Originally published at ・1 min read

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;
Enter fullscreen mode Exit fullscreen mode
  • 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


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.

hello HTML css course

Discussion (0)

Editor guide