Flex-direction

Flex-direction is a CSS property that defines the main axis and direction of flex items, dictating the arrangement of the items within a flex container.

While a flex parent’s main axis is horizontal and the cross axis is vertical by default, flexbox opens up a number of layout and alignment options for the flex parent element and its flex children.

4 possible values within the flex-direction property exist:

• Flex-direction: row — Content runs left to right (default)
• Flex-direction: row-reverse — Content runs right to left
• Flex-direction: column — Content runs top to bottom (default)
• Flex-direction: column-reverse — Content runs bottom to top

By changing the flex parent’s row direction to vertical, the flex children within that element will default to vertical. You can, however, switch the child’s main axis to horizontal or alter the justification of the content on the main axis to a direction that’s different from the parent’s direction.

Visit Webflow University for help getting started with flexbox and to learn more about flex-direction and CSS layout and positioning.