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:

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.

A new way to learn and to build for the web

Get the best, coolest, and latest in design and no-code delivered to your inbox each week.

Shoot, something didn't work. Try again later, bud.