DEV Community

Cover image for Intro to CSS Flexbox - Flex Direction
Andy Leverenz
Andy Leverenz

Posted on • Originally published at web-crunch.com

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;
}
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

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.

hello HTML css course

Top comments (0)