Summary  
This chapter explains how to use the CSS flex-direction property to control the main-axis arrangement of flex items, allowing layouts in row, row-reverse, column, or column-reverse order.  

General domain of usage  
Web page layout design

The `flex-direction` property enables us to determine the direction in which flex items are arranged. By default, this property is set to `row`, resulting in a left-to-right layout in browsers that use English as the default language. You can set it to:
```css
flex-direction: row | column | row-reverse | column-reverse;
```

Let's consider the next website navigation as an example.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDx1bCBjbGFzcz0ibmF2aWdhdGlvbi1saXN0Ij4KICAgICAgPGxpIGNsYXNzPSJuYXZpZ2F0aW9uLWl0ZW0iPgogICAgICAgIDxhIGhyZWY9IiMiIGNsYXNzPSJuYXZpZ2F0aW9uLWxpbmsiPkhvbWU8L2E+CiAgICAgIDwvbGk+CiAgICAgIDxsaSBjbGFzcz0ibmF2aWdhdGlvbi1pdGVtIj4KICAgICAgICA8YSBocmVmPSIjIiBjbGFzcz0ibmF2aWdhdGlvbi1saW5rIj5BYm91dDwvYT4KICAgICAgPC9saT4KICAgICAgPGxpIGNsYXNzPSJuYXZpZ2F0aW9uLWl0ZW0iPgogICAgICAgIDxhIGhyZWY9IiMiIGNsYXNzPSJuYXZpZ2F0aW9uLWxpbmsiPlByaWNlPC9hPgogICAgICA8L2xpPgogICAgICA8bGkgY2xhc3M9Im5hdmlnYXRpb24taXRlbSI+CiAgICAgICAgPGEgaHJlZj0iIyIgY2xhc3M9Im5hdmlnYXRpb24tbGluayI+VGVhbTwvYT4KICAgICAgPC9saT4KICAgICAgPGxpIGNsYXNzPSJuYXZpZ2F0aW9uLWl0ZW0iPgogICAgICAgIDxhIGhyZWY9IiMiIGNsYXNzPSJuYXZpZ2F0aW9uLWxpbmsiPlN1cHBvcnQ8L2E+CiAgICAgIDwvbGk+CiAgICA8L3VsPgogIDwvYm9keT4KPC9odG1sPg==

Lm5hdmlnYXRpb24tbGlzdCB7CiAgYmFja2dyb3VuZC1jb2xvcjogaG9uZXlkZXc7CiAgZGlzcGxheTogZmxleDsKICBwYWRkaW5nOiAxMHB4Owp9CgoubmF2aWdhdGlvbi1pdGVtIHsKICBwYWRkaW5nOiAxMHB4OwogIGJvcmRlci1yYWRpdXM6IDZweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiB2aW9sZXQ7Cn0KCi5uYXZpZ2F0aW9uLWl0ZW06bm90KDpsYXN0LWNoaWxkKSB7CiAgbWFyZ2luLXJpZ2h0OiAyMHB4Owp9CgoubmF2aWdhdGlvbi1saW5rIHsKICBjb2xvcjogd2hlYXQ7Cn0KCi8qIFJlbW92ZSBkZWZhdWx0IGRlY29yYXRpb24gKi8KdWwgewogIGxpc3Qtc3R5bGU6IG5vbmU7Cn0KCmEgewogIHRleHQtZGVjb3JhdGlvbjogbm9uZTsKfQ==

Lm5hdmlnYXRpb24tbGlzdCB7CiAgYmFja2dyb3VuZC1jb2xvcjogaG9uZXlkZXc7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogcm93LXJldmVyc2U7CiAgcGFkZGluZzogMTBweDsKfQoKLm5hdmlnYXRpb24taXRlbSB7CiAgcGFkZGluZzogMTBweDsKICBib3JkZXItcmFkaXVzOiA2cHg7CiAgYmFja2dyb3VuZC1jb2xvcjogdmlvbGV0Owp9CgoubmF2aWdhdGlvbi1pdGVtOm5vdCg6bGFzdC1jaGlsZCkgewogIG1hcmdpbi1sZWZ0OiAyMHB4Owp9CgoubmF2aWdhdGlvbi1saW5rIHsKICBjb2xvcjogd2hlYXQ7Cn0KCi8qIFJlbW92ZSBkZWZhdWx0IGRlY29yYXRpb24gKi8KdWwgewogIGxpc3Qtc3R5bGU6IG5vbmU7Cn0KCmEgewogIHRleHQtZGVjb3JhdGlvbjogbm9uZTsKfQ==

## column
Pay attention to the width of the items; they cover the entire width of the parent.

Lm5hdmlnYXRpb24tbGlzdCB7CiAgYmFja2dyb3VuZC1jb2xvcjogaG9uZXlkZXc7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOwogIHBhZGRpbmc6IDEwcHg7Cn0KCi5uYXZpZ2F0aW9uLWl0ZW0gewogIHBhZGRpbmc6IDEwcHg7CiAgYm9yZGVyLXJhZGl1czogNnB4OwogIGJhY2tncm91bmQtY29sb3I6IHZpb2xldDsKfQoKLm5hdmlnYXRpb24taXRlbTpub3QoOmxhc3QtY2hpbGQpIHsKICBtYXJnaW4tYm90dG9tOiAyMHB4Owp9CgoubmF2aWdhdGlvbi1saW5rIHsKICBjb2xvcjogd2hlYXQ7Cn0KCi8qIFJlbW92ZSBkZWZhdWx0IGRlY29yYXRpb24gKi8KdWwgewogIGxpc3Qtc3R5bGU6IG5vbmU7Cn0KCmEgewogIHRleHQtZGVjb3JhdGlvbjogbm9uZTsKfQ==

Lm5hdmlnYXRpb24tbGlzdCB7CiAgYmFja2dyb3VuZC1jb2xvcjogaG9uZXlkZXc7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogY29sdW1uLXJldmVyc2U7CiAgcGFkZGluZzogMTBweDsKfQoKLm5hdmlnYXRpb24taXRlbSB7CiAgcGFkZGluZzogMTBweDsKICBib3JkZXItcmFkaXVzOiA2cHg7CiAgYmFja2dyb3VuZC1jb2xvcjogdmlvbGV0Owp9CgoubmF2aWdhdGlvbi1pdGVtOm5vdCg6bGFzdC1jaGlsZCkgewogIG1hcmdpbi10b3A6IDIwcHg7Cn0KCi5uYXZpZ2F0aW9uLWxpbmsgewogIGNvbG9yOiB3aGVhdDsKfQoKLyogUmVtb3ZlIGRlZmF1bHQgZGVjb3JhdGlvbiAqLwp1bCB7CiAgbGlzdC1zdHlsZTogbm9uZTsKfQoKYSB7CiAgdGV4dC1kZWNvcmF0aW9uOiBub25lOwp9

What does the `flex-direction` property do?

Master the essentials of CSS, the styling language that transforms the look and feel of web pages. Explore core concepts such as text styles, colors, spacing, the box model, Flexbox, and decorative effects. Build the skills to create visually engaging and well-structured web pages.

Understand how CSS connects to HTML and how styles are applied through selectors. Apply colors, text styling, and hover effects to control visual presentation.

Improve typography using line height, spacing, font properties, and custom fonts. Control font families, weight, style, and size for better readability.

Control layout structure using margin, padding, borders, and width properties. Understand box sizing behavior and element display types such as block, inline, and inline-block.

Control horizontal and vertical layouts using Flexbox properties. Adjust direction, alignment, and spacing to structure UI components.

Enhance layouts using background colors, images, pseudo-elements, and shadows. Style visual components for depth and contrast.

Controlling Direction

row

row-reverse

column

column-reverse