Tutor:In Flexbox, the flex-direction property defines the main axis. It determines the direction in which flex items are placed in the flex container.

⭐ 0 EXP

Flex Mastery

Unlock nodes by learning directional flow and axes.

Concept 1: The Main Axis

In Flexbox, items are laid out along a primary line called the Main Axis. The flex-direction property defines this axis. By default, it's horizontal (row).

System Check

What property defines the main axis?

displayflex-directionjustify-contentalign-items

Community Layouts

Share Flex Patterns

Built a complex grid with Flexbox? Share your direction logic.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

CSS Flex Direction

Pascual Vila

Frontend Instructor.

The flex-direction property is the captain of the Flexbox ship. It establishes the Main Axis, defining the direction flex items are placed in the flex container.

The Main Axis

When working with Flexbox, you aren't thinking in terms of "Left/Right" or "Top/Bottom" as fixed concepts. You think in terms of the Main Axis (primary flow) and the Cross Axis (perpendicular flow). flex-direction sets this Main Axis.

Available Values

row (default): Left to Right in LTR languages.
row-reverse: Right to Left. items are also reordered.
column: Top to Bottom. Main axis rotates 90 degrees.
column-reverse: Bottom to Top.

When to use Column?

The column direction is essential for mobile-first design. While a desktop navigation bar might be a row, on mobile screens, you often switch to column to stack links vertically for better touch accessibility.

Best Practices

Remember that changing direction affects justify-content and align-items. If you are in a column, justify-content controls vertical alignment, and align-items controls horizontal alignment.

Flex Direction Glossary

Main Axis: The primary axis along which flex items are laid out. Defined by flex-direction.
Cross Axis: The axis perpendicular to the main axis. If Main is row (horizontal), Cross is column (vertical).
row: The default direction. Items flow horizontally from the start of the text direction.
column: Items flow vertically from top to bottom. Useful for mobile layouts and sidebars.

📖 INDEX