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;
```

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

Що робить властивість flex-direction?

Вступ до CSS (Cascading Style Sheets) - мови стилів, яка використовується для покращення зовнішнього вигляду веб-сторінок. Ми розглянемо, як працювати зі шрифтами, позиціонуванням елементів, кольорами та іншими декоративними ефектами.

Базові концепції та правила CSS для додавання стилів до веб-сторінки.

Набір властивостей CSS, які використовуються для стилізації текстового вмісту елементів HTML.

Концепція розташування елементів відповідно до бокс моделі, яка описує розташування і відстань між усіма елементами.

Метод впорядкування набору елементів у рядках і стовпцях.

Створіть візуально приголомшливий та інтерактивний веб-дизайн, використовуючи продвинуті методи CSS для додавання декоративних елементів.

Основи CSS

Flex Напрямок

row

row

row-reverse

column

column-reverse