Властивість flex-direction дозволяє встановити напрямок, в якому флекс-елементи будуть йти всередині свого флекс-контейнера. Воно приймає такі значення:
- row
- row-reverse
- column
- column-reverse
Значення відносно прості — вони дозволяють вказати, чи розташовуються флекс-елементи в рядах або колонках, у зворотному порядку чи ні. Але кінцевий напрямок залежить від writing-mode.
Значення row
Це вихідне значення, тому якщо ви не встановите властивість flex-direction, саме це значення буде застосовуватись.
<!doctype html>
<title>Приклад</title> <style> .container { display: flex; flex-direction: row; align-items: flex-start; background: beige; height: 100vh; }
.red { background: orangered; }
.green { background: yellowgreen; }
.blue { background: steelblue; }
.container > div { font-size: 5vw; padding: .5em; color: white; }
body { margin: 0; }
</style> <div class="container"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div>
</div> 
Зверніть увагу, що row не завжди означає горизонтальний. Режим запису визначає, чи будуть ряди йти горизонтально чи вертикально. При використанні вертикального режиму запису ряд із флекс-елементів буде розміщуватися зверху вниз.
Ось що станеться, якщо ми застосуємо writing-mode: vertical-rl до наведеного вище прикладу.
<!doctype html>
<title>Приклад</title> <style> .container { display: flex; flex-direction: row; align-items: flex-start; background: beige; height: 100vh; writing-mode: vertical-rl; }
.red { background: orangered; }
.green { background: yellowgreen; }
.blue { background: steelblue; }
.container > div { font-size: 5vw; padding: .5em; color: white; }
body { margin: 0; }
</style> <div class="container"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div>
</div> 
А ось що станеться, якщо ми додамо direction: rtl у цей приклад.
<!doctype html>
<title>Приклад</title> <style> .container { display: flex; flex-direction: row; align-items: flex-start; background: beige; height: 100vh; writing-mode: vertical-rl; direction: rtl; }
.red { background: orangered; }
.green { background: yellowgreen; }
.blue { background: steelblue; }
.container > div { font-size: 5vw; padding: .5em; color: white; }
body { margin: 0; }
</style> <div class="container"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div>
</div> 
Зробимо ще один крок уперед і додамо text-orientation: upright у цей приклад. Ось що вийшло.
<!doctype html>
<title>Приклад</title> <style> .container { display: flex; flex-direction: row; align-items: flex-start; background: beige; height: 100vh; writing-mode: vertical-rl; direction: rtl; text-orientation: upright; }
.red { background: orangered; }
.green { background: yellowgreen; }
.blue { background: steelblue; }
.container > div { font-size: 5vw; padding: .5em; color: white; }
body { margin: 0; }
</style> <div class="container"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div>
</div> 
Таким чином, навіть з єдиним значенням flex-direction, існує безліч варіантів, як флекс-елементи будуть представлені, вирівняні та орієнтовані, залежно від використання інших властивостей.
Цей же принцип застосовується до всіх інших значень flex-direction, показаних нижче.
Значення row-reverse
Ви можете використовувати flex-direction: row-reverse, щоб елементи в ряді відображалися у зворотному порядку.
<!doctype html>
<title>Приклад</title> <style> .container { display: flex; flex-direction: row-reverse; align-items: flex-start; background: beige; height: 100vh; }
.red { background: orangered; }
.green { background: yellowgreen; }
.blue { background: steelblue; }
.container > div { font-size: 5vw; padding: .5em; color: white; }
body { margin: 0; }
</style> <div class="container"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div>
</div> 
Значення column
Використання flex-direction: column змінює розподіл флекс-елементів так, щоб вони розташовувалися в колонку.
<!doctype html>
<title>Приклад</title> <style> .container { display: flex; flex-direction: column; align-items: flex-start; background: beige; height: 100vh; }
.red { background: orangered; }
.green { background: yellowgreen; }
.blue { background: steelblue; }
.container > div { font-size: 5vw; padding: .5em; color: white; }
body { margin: 0; }
</style> <div class="container"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div>
</div> 
Значення column-reverse
Значення flex-direction: column-reverse встановлює елементи в колонці у зворотному порядку.
<!doctype html>
<title>Приклад</title> <style> .container { display: flex; flex-direction: column-reverse; align-items: flex-start; background: beige; height: 100vh; }
.red { background: orangered; }
.green { background: yellowgreen; }
.blue { background: steelblue; }
.container > div { font-size: 5vw; padding: .5em; color: white; }
body { margin: 0; }
</style> <div class="container"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div>
</div> 
Переноси флекс-елементів
Ви можете використовувати властивість flex-wrap і визначити, як флекс-елементи переносяться всередині флекс-контейнера .
За умовчанням флекс-елементи не переносяться. Якщо вони занадто широкі і не поміщаються у флекс-контейнері, то елементи просто стискаються доти, доки вони не зможуть поміститися. Текст всередині флекс-елементів може, як і раніше, переноситися, але тільки не самі флекс-елементи.
<!doctype html>
<title>Приклад</title> <style> .container { display: flex; flex-direction: row; align-items: flex-start; background: beige; height: 100vh; }
.red { background: orangered; }
.green { background: yellowgreen; }
.blue { background: steelblue; }
.container > div { font-size: 5vw; padding: .5em; color: white; width: 60%; }
body { margin: 0; }
</style> <div class="container"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div>
</div> 
У всіх флекс-елементів у цьому прикладі ширина задана як 60%. Це 60 відсотків від ширини флекс-контейнера. Ви не можете розмістити два елементи такої ширини поруч один з одним, не кажучи вже про три. Але оскільки початкове значення flex-wrap дорівнює nowrap, то елементи не переносяться, а натомість вони стискаються.
Значення wrap
Тепер давайте додамо flex-wrap: wrap.
<!doctype html>
<title>Приклад</title> <style> .container { display: flex; flex-direction: row; align-items: flex-start; background: beige; height: 100vh; flex-wrap: wrap; }
.red { background: orangered; }
.green { background: yellowgreen; }
.blue { background: steelblue; }
.container > div { font-size: 5vw; padding: .5em; color: white; width: 60%; }
body { margin: 0; }
</style> <div class="container"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div>
</div> 
Значення wrap-reverse
Давайте тепер додамо flex-wrap: wrap-reverse.
<!doctype html>
<title>Приклад</title> <style> .container { display: flex; flex-direction: row; align-items: flex-start; background: beige; height: 100vh; flex-wrap: wrap-reverse; }
.red { background: orangered; }
.green { background: yellowgreen; }
.blue { background: steelblue; }
.container > div { font-size: 5vw; padding: .5em; color: white; width: 60%; }
body { margin: 0; }
</style> <div class="container"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div>
</div> 
Властивість flex-flow
Властивість flex-flow є скороченням для властивостей flex-direction та flex-wrap, тому ви можете вказати їх одночасно. Ось приклад.
<!doctype html>
<title>Приклад</title> <style> .container { display: flex; flex-direction: row; align-items: flex-start; background: beige; height: 100vh; flex-flow: row-reverse wrap; }
.red { background: orangered; }
.green { background: yellowgreen; }
.blue { background: steelblue; }
.container > div { font-size: 5vw; padding: .5em; color: white; width: 60%; }
body { margin: 0; }
</style> <div class="container"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div>
</div> 