Верстка макетів веб-сторінок з застосуванням flexbox

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

Колись існував золотий стандарт макету веб-сайту, який намагалися створити, але це було важко зробити правильно: Макет Святого Грааля.

Макет дотримувався наступних правил:

«Плаваюча» ширина центральної частини та фіксована ширина сайдбарів
Центральна частина в розмітці повинна йти раніше, ніж два сайдбари (але після header'а)
Усі три колонки повинні бути однакової висоти, незалежно від вмісту
Футер повинен бути завжди притиснутий до низу, навіть якщо контент не заповнює в'юпорт
Макет має бути чуйним, всі розділи повинні схлопуватися в один стовпчик на маленьких екранах

Інструментами для роботи були таблиці і float, і жоден з них не підходив для цього завдання. Технічно це було можливо, але були потрібні деякі прийоми. Після того, як flexbox отримав підтримку в основних браузерах, цей макет перетворився зі "святого Грааля" на загальнодоступний; він був скрізь, тому що пропонував відмінний інтерфейс користувача і був доступний для всіх розробників.

Flexbox – це відносно новий режим розмітки в CSS3, призначений для поліпшення вирівнювання, напрямку та порядку елементів в контейнері, навіть якщо він є динамічним або з невідомими розмірами.

Приклад реалізації макету Грааля за допомогою технології Flexbox:

See the Pen maket Graalya by kravets (@raisa69) on CodePen.

Верстка макету адаптивної веб-сторінки

макет сторінки на екранах більше 980px

макет на екранах більше 580px і менше 980px

макет на екранах менше 580px

Вихідний код веб-сторінки:

See the Pen flexbox maket2 task by kravets (@raisa69) on CodePen.

Реалізація структури веб-сторінки за допомогою html-коду виглядає так:

<body>
<nav class="col-1">Nav</nav>
<div class="col-2">
<header>Header</header>
   <main class="content">
       <article>Article</article>
       <aside>Aside</aside>
   </main>
<footer>Footer</footer>
</div>
</body>

Тіло веб-сторінки <body> </body> є флекс-контейнером, а блоки col-1 col-2 є флекс-елементами

Флекс-елементи потрібно розташувати у рядок у флекс-контейнері:

body {

display: flex;
min-height: 100vh;
flex-direction: row;
margin: 0;
}

Ширина флекс-елементів col-1, col-2 буде умовно дорівнювати 1 частині ширини екрану і 5 частинам відповідно.

Блок .col-2 містить вкладені блоки header, content, footer, тому для гнучкості цих блоків на малих екранах, .col-2 потрібно зробити флекс-контейнером, у якому вкладені блоки розміщуються у колонку:

.col-2 {
display: flex;
flex-direction: column;
flex: 5;
}

Блок .content теж містить вкладені блоки article, aside, тому потрібно блок .content зробити флекс-контейнером у якому флекс-елементи розташовуються в рядок:

.content {
display: flex;
flex-direction: row;
}

Ширину флек-елементів article, aside задати відповідно у співвідношенні 3:1 до ширини екрану

.content > article {
flex: 3;
min-height: 60vh;
}
.content > aside {
background: beige;
flex: 1;
}

Вистоту блоків header, content, footer можна розподілити, виходячи із загальної висоти екрану 100vh: 20vh header, 40vh content, 20vh footer

header, footer {
background: yellowgreen;
height: 20vh;
}

За допомогою медіа-запитів можна змінити поведігку блоків на екранах менших за 980px, щоб тіло веб-сторінки розмістило блоки у колонку, а блок col-1 зайняв всю доступну ширину 100%:

@media (max-width:980px)
{
body{
flex-direction:column;
}
.col-1{
width:100%;
}

На екранах розміром менше 580px всі блоки мають вишикуватись у колонку:

@media (max-width:580px) {

.content{

flex-direction: column;

}