Флексбокси ідеально підходять для створення широко використовуваних макетів веб-сайтів, на кшталт триколонні, так званий макет «Святий Грааль», де всі колонки повинні займати повну висоту, незалежно від їхнього вмісту. При цьому у вихідному коді основний вміст йде до навігації, а на самій сторінці основний вміст йде після навігації.
На зразок цього.
<!
<title>Приклад</title> <style> * { box-sizing: border-box; }
body { margin: 0; }
#main { display: flex; min-height: calc(100vh — 40vh); }
#main > article { flex: 1; }
#main > nav, #main > aside { flex: 0 0 20vw; background: beige; }
#main > nav { order:-1; }
header, footer, article, nav, aside { padding: 1em; }
header, footer { background: yellowgreen; height: 20vh; }
</style>
<body> <header>Шапка</header> <div id="main"> <article>Стаття</article> <nav>Навігація</nav> <aside>Бічна панель</aside>
</div> <footer>Підвал</footer>
</body> 
До появи флексбоксів такий макет було досить важко отримати без використання будь-яких хаків. Розробникам часто доводилося робити такі речі, як додавання додаткової розмітки, застосування негативних margin та інші трюки, щоб все правильно вибудовувалося незалежно від обсягу вмісту або розміру екрана. Але, як показує наведений вище приклад, на флексбоксах все виходить набагато простіше.
Ось короткий виклад коду. У цьому прикладі ми робимо елемент #main флекс-контейнером, а шапку та підвал залишаємо блоковими елементами. Іншими словами, флексбокс стає лише середня частина. Ось фрагмент, який робить її флекс-контейнером.
#main { display: flex; min-height: calc(100vh — 40vh); }Просто використовуємо display: flex, щоб зробити флекс-контейнер. Зверніть увагу, ми також ставимо значення min-height за допомогою функції calc() і встановлюємо #main як 100% від висоти області перегляду мінус висота шапки та підвалу (по 20vh кожен). Це гарантує, що макет займатиме всю висоту екрана, навіть якщо в ньому мало вмісту. В результаті підвал ніколи не підніметься і не залишить порожнього простору під ним, якщо вміст займає менше висоти екрана. досить простим, враховуючи, що ми застосували box-sizing: border-box до всіх елементів. Якби ми цього не зробили, тоді потрібно було б додати значення padding до суми віднімання.
Після встановлення флекс-контейнера ми маємо справу з флекс-елементами .
<code data-language="css">#main > article { flex: 1; }
#main > nav, #main > aside { flex: 0 0 20vw; background: beige; }
#main > nav { order:-1; }Властивість flex є скороченням властивостей flex-grow, flex-shrink та flex-basis. У першому випадку ми написали лише одне значення, тому flex встановлює властивість flex-grow. У другому випадку ми написали всі три значення для <nav> та <aside>, щоб встановити нульове значення flex-grow, нульове значення flex-shrink та значення 20vw для flex-basis. Властивість flex-basis встановлює вихідний основний розмір флекс-елемента до розподілу вільного простору. Таким чином, ми просто встановлюємо ширину <nav> та <aside>, а також їх колір фону.
>От і весь код, завдяки якому макет працює.
У цьому прикладі флексбокси застосовуються тільки для центрального розділу, де міститься основний вміст. Якщо ви бажаєте використовувати флексбокси для всієї сторінки, то можете додати вкладені флекс-контейнери.
також