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

CodePen

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