The flex-direction property controls the directions of main axis of a flex container, with the cross axis being perpendicular to it. This property also allows flex items to be rearranged in either the reverse or the default order. The flex-direction property is applied to the flex parent, i.e. the element with display: flex or display: inline-flex.”

Syntax

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

See the Pen Flexbox: flex-direction by majadc (@majadc) on CodePen.

Related

• CSS Flexible Box Layout
• CSS Flexbox: flex-wrap
• CSS Flexbox: justify-content
• CSS Flexbox: align-items
• CSS Flexbox: align-content

Resources

• MDN – flex-direction