Dismiss

Subscribe to the newsletter

January 17, 2021

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.

Leave a reply

Sign in or Sign up to leave a response.

0 responses

Est. reading time: 1 minutes
Stats: 264 views

Collection

Part of the CSS Flexbox collection