Andy from Webcrunch

Subscribe for email updates:

Portrait of Andy Leverenz
Andy Leverenz

January 17, 2021

Last updated November 5, 2023

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


See the Pen flex-direction by Andy Leverenz (@webcrunchblog) on CodePen.

Link this article
Est. reading time: 1 minutes
Stats: 1,706 views


Part of the CSS Flexbox collection

Products and courses