Flex Direction

Flex direction controls how flex items are placed inside a flex container.

It decides whether items appear in a row or in a column and in which order they flow.

This property is very important because it changes the entire layout without changing the HTML structure.

Row is the default direction in Flexbox.

This means items are placed from left to right in a horizontal line.

Column direction stacks items from top to bottom.

This is useful for building vertical menus, sidebars, and form layouts.

This example shows how flex-direction column is used to build vertical navigation menus.

You can change the entire menu layout just by switching the flex direction.

Flex direction values you should remember

• row places items horizontally
• column places items vertically  
• row-reverse reverses the horizontal order  
• column-reverse reverses the vertical order  

Reverse directions are useful when you want to change item order without changing the HTML.

This is often used in responsive designs.

Practice task

Create a flex container and:
- Try flex-direction row  
- Change it to column  
- Then use row-reverse  
- Observe how item order changes

Next lesson

In the next page, you will learn about justify-content and how to control spacing between flex items.