Флексбокс за своєю сутністю є модель одномірного макета. Флекс-елементи всередині флекс-контейнера можна розміщувати як горизонтально, і вертикально, але з одночасно. Якщо ви бажаєте розміщувати елементи у двох напрямках, вам потрібно вставити один флекс-контейнер в інший.
На зразок цього.
<!doctype html>
<title>Приклад</title> <style> .container { display: flex; }
.red { background: orangered; display: flex; flex-direction: column; }
.green { background: yellowgreen; }
.blue { background: steelblue; }
.container div { font-size: 5vw; padding: .5em; color: white; flex: 1; }
</style> <div class="container"> <div class="red">1 <div class="green">1a</div> <div class="blue">1b</div>
</div> <div class="green">2</div> <div class="blue">3</div>
</div> 
У цьому прикладі ми використовуємо display: flex одночасно до зовнішнього контейнера і до червоного флекс-елементу. Але з червоним флекс-елементом ми використовуємо flex-direction: column, внаслідок чого його флекс-елементи розташовуються вертикально один під одним. Значенням за промовчанням для flex-direction є row, тому ми не стали використовувати цю властивість для зовнішнього контейнера — за замовчуванням флекс-елементи розташовуються в ряд. . Ми застосовували флексбокс для розміщення трьох флекс-елементів по горизонталі (у ряд), але не задавали флекс-елементи по вертикалі (в колонку). Інакше кажучи, ми мали одномірний макет. Незважаючи на те, що сторінка в цілому була двомірним макетом, флексбокси підтримують макет тільки в одному з цих вимірювань.
Ми могли б змінити той приклад для використання флексбоксів у двох вимірюваннях — по рядах колонкам. Для цього скористаємося концепцією, наведеною вище. Таким чином, ми можемо використовувати один флекс-контейнер для вертикального компонування, а інший для горизонтального.
У нашому випадку вертикальний макет складається з наступних областей: шапка, основна частина, підвал. Ви можете уявити всю сторінку як одну велику колонку. І ця колонка містить три ряди — один для шапки, один для основного вмісту та один для підвалу.
Горизонтальний макет складається з <nav> class="tag"><article> та <aside>. Всі вони містяться в другому ряду, але їх потрібно розмістити горизонтально. Отже, ми можемо зробити другий ряд флекс-контейнером і змусити його вміст вишикуватися в ряд.
Отже, ось робочий приклад.
<!doctype html>
<title>Приклад</title> <style> * { box-sizing: border-box; }
body { display: flex; min-height: 100vh; flex-direction: column; margin: 0; }
#main { display: flex; flex: 1; }
#main > article { flex: 1; }
#main > nav, #main > aside { flex: 0 0 20vw; background: beige; }
#main > nav { order:-1; }
header, footer { background: yellowgreen; height: 20vh; }
header, footer, article, nav, aside { padding: 1em; }
</style>
<body> <header>Шапка</header> <div id="main"> <article>Стаття</article> <nav>Навігація</nav> <aside>Бічна панель</aside>
</div> <footer>Підвал</footer>
</body> 
У нашому випадку ми використовували наступний код для елемента <body>.
<code data-language="css">body { display: flex; min-height: 100vh; flex-direction: column; margin: 0; }display: flex робить <body> флекс-контейнером, а flex-direction: column відображає його флекс-елементи в колонку. Ми також задали мінімальну висоту для зовнішнього флекс-контейнера, щоб макет займав всю висоту екрана.
А тепер для вкладеного флекс-контейнера.
<code data-language="css">#main { display: flex; flex: 1; }Додавання display: flex робить #main флекс-контейнером, подібно <body>. Тепер його дочірні елементи стають флекс-елементами. flex: 1 гарантує, що він зростатиме так, щоб займати максимум доступного простору.
Ми могли б додати flex-direction: row, щоб явно вказати напрямок, але в будь-якому випадку row є значенням за замовчуванням.
Інше — просто стилізація та впорядкування флекс-елементів у вкладеному флекс-контейнері.
<code data-language="css">#main > article { flex: 1; }
#main > nav, #main > aside { flex: 0 0 20vw; background: beige; }
#main > nav { order:-1; }Ви можете запитати, навіщо використовувати вкладені флекс-контейнери, коли можна просто зробити одновимірний макет, як у попередньому прикладі. У більшості випадків вам, ймовірно, не доведеться використовувати вкладені флекс-контейнери, проте цей метод може стати в нагоді при використанні адаптивного веб-дизайну. Коли весь макет зроблений на флексбоксах, це надає більше можливостей при використанні медіа-запитів для відображення різних макетів на різних пристроях і т.д.>Крім того, я впевнений, ви можете придумати безліч інших застосувань для вкладених флекс-контейнерів, крім макетів веб-сайтів.
Вкладені флексбокси проти CSS Grid
<Щоразу, коли використовуєте вкладені флекс-контейнери, подумайте, чи не краще замість цього використовувати CSS Grid. Він спеціально розроблений для двовимірних макетів, тому для створення таких макетів не потрібна вкладеність (хоча вона підтримується).Проте існує багато макетів, для яких краще підходять флексбокси, так що розглянемо кілька випадків.