Skip to main content

flex-direction in CSS – How to Set Flex Children's Orientation

flex-direction tells browsers the specific direction (row or column) they should lay out a flexible container's direct children.

In other words, flex-direction defines a flexbox's main axis.

Main Axis vs. Cross Axis: What's the Difference?

A flexbox's main axis is the layout orientation defined by a flex-direction property.

A flexbox's cross axis is the perpendicular orientation to the main axis.

Illustration of a flexbox's main and cross axis

A flexbox's flex-direction property determines the main and cross axis

For instance, suppose you set your flexible container's flex-direction (main axis) to row. In that case, column will be the container's cross axis.

row is flex-direction's default value. Therefore, suppose you do not specify a flex-direction property. In that case, browsers will auto-arrange your flexible container's items in the row direction of your browser's default language.

info
  • Left to right is an English browser's default row direction. But an Arabic browser's default row direction is right to left.
  • The writing-mode property can change the browser's default block flow direction.

Example: Set a Flex Container's Main Axis to the Column Direction

section {
display: flex;
flex-direction: column;
background-color: orange;
margin: 10px;
padding: 7px;
}

div {
background-color: purple;
color: white;
margin: 5px;
padding: 10px;
border-radius: 5px;
}

Try it on StackBlitz

The snippet above organized the flexible <section> containers' items in the column direction of your browser's default language.

tip

Use flex-direction: column-reverse (or flex-direction: row-reverse) to reverse the browser's layout direction.

Buy your CSS Flexbox Explained Visually book on Amazon

Overview

This article discussed what a CSS flex-direction property is. We also used an example to understand how it works.