Flex-утиліти для побудови адаптивного макета на Bootstrap 4

1. Блоки з display: flex
2. Напрямок всередині flex-блоків
3. Вирівнювання вмісту всередині flexbox-контейнера
4. Перенесення блоків за допомогою властивості flex-wrap
5. Вирівнювання елементів всередині flex-контейнера заданої висоти
6. Основні класи:
7. Індивідуальне вирівнювання елементів усередині flex-контейнера заданої висоти
8. Вирівнювання вмісту багаторядкових контейнерів

Адаптивна сітка Bootstrap 4 побудована на основі моделі Flexbox . Основою для використання адаптивних класів є клас row як батьківський контейнера для декількох класів типу col-префи-цифра. Для класу row задано властивість display: flex, а дочірні елементи ділять його простір відповідно до префіксом і цифрою на рівні частини, але для різних дозволів екрану.
наприклад,

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<Div class = "container-fluid">

<Div class = "row">

<Div class = "col-sm-4">

<H3> col - sm - 4 </ h3>

<P> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis dolorem,

aliquam temporibus numquam quos eaque rem omnis a eligendi ut? </ P>

</ Div>

<Div class = "col-sm-4">

<H3> col - sm - 4 </ h3>

<P> Inventore deleniti minus, accusantium harum iste vel blanditiis quis,

ad perspiciatis error quas impedit quidem aperiam veritatis temporibus libero nobis. </ P>

</ Div>

<Div class = "col-sm-4">

<H3> col - sm - 4 </ h3>

<P> Voluptatum itaque amet, voluptates maiores autem reiciendis voluptatem,

reprehenderit eum earum nisi ratione sunt sed aut quod rem, officia cum! </ P>

</ Div>

</ Div>

</ Div>

CSS-властивості для класів, використаних в прикладі, представлені на скріншотах нижче.

Однак, є ще маса утиліт, які ви можете використовувати як усередині класів row або col -..., так і самостійно.

Блоки з display: flex

У класу row крім властивості display: flex є ще 2 властивості, пов'язаних з компенсацією правого і лівого відступу всередині класу container (container-fluid). Це margin-left і margin-right в 15px. За рахунок цих негативних зовнішніх відступів не варто використовувати клас row поза класом container або container-fluid, css-властивості яких такі:

Для того щоб призначити будь-якого блоку css-властивість display: flex, використовуйте клас .d-flex або один з "чуйних" варіантів (.d-sm-flex, .d-md-flex, .d-lg-flex або .d-xl-flex). У разі, якщо для елемента потрібно властивість display: inline-flex в Bootstrap4 передбачені клас .d-inline-flex і його різновиди .d-sm-inline-flex, .d-md-inline-flex, .d-lg-inline -flex або .d-xl-inline-flex.

Напрямок всередині flex-блоків

Як відомо, за замовчуванням всі flexbox-контейнери мають напрямок вздовж головної осі (властивість flex-direction: row). Ви можете змінювати напрямок за допомогою таких класів Bootstrap-4:

• flex-row
• flex-row-reverse
• flex-column
• flex-column-reverse

До кожного з перерахованих класів можуть бути додані адаптивні приставки -sm-, -md-, -lg-, -xl-. Наприклад, можна використовувати клас .flex-sm-row або .flex-md-column, або .flex-lg-row-reverse, або .flex-xl-column-reverse і подібні.

Вирівнювання вмісту всередині flexbox-контейнера

Напевно вам знадобляться утиліти, пов'язані з css-властивістю justify-content для flexbox-контейнерів, щоб змінювати вирівнювання flex-елементів по головній осі (горизонтальна вісь X за замовчуванням і вертикальна вісь Y, якщо flex-direction: column). Класи, що надаються css-файлами Bootstrap-4 пропонують на вибір варіанти суфіксів start (замовчування браузера), end, center, between або around:

• .justify-content-start, .justify-content-sm-start, .justify-content-md-start, .justify-content-lg-start, .justify-content-xl-start
• .justify-content-end, .justify-content-sm-end, .justify-content-md-end, .justify-content-lg-end, .justify-content-xl-end
• .justify-content-center, .justify-content-sm-center, .justify-content-md-center, .justify-content-lg-center, .justify-content-xl-center
• .justify-content-between, .justify-content-sm-between, .justify-content-md-between, .justify-content-lg-between, .justify-content-xl-between
• .justify-content-around, .justify-content-sm-around, .justify-content-md-around, .justify-content-lg-around, .justify-content-xl-around

Складно сказати, який з них ви виберете для своєї верстки, але думається, що найпопулярнішими будуть класи .justify-content-center, .justify-content-between, і .justify-content-around, тому що найчастіше доводиться або центрировать контент, або розподіляти кілька блоків по ширині батьківського елемента.

Перенесення блоків за допомогою властивості flex-wrap

Для flex-контейнера можна вибрати клас для перенесення дочірніх блоків, що не поміщаються по ширині контейнера на наступний рядок (.flex-wrap). Якщо потрібно змінити порядок відображення блоків при перенесенні, то потрібен клас .flex-wrap-reverse. За замовчуванням перенос не виконується, але якщо вам це потрібно вказати явно, використовуйте клас .flex-nowrap. Як і для інших класів, використання переносів можливо тільки для певних дозволів екрану з чуйними утилітами:

• .flex-sm-nowrap
• .flex-sm-wrap
• .flex-sm-wrap-reverse
• .flex-md-nowrap
• .flex-md-wrap
• .flex-md-wrap-reverse
• .flex-lg-nowrap
• .flex-lg-wrap
• .flex-lg-wrap-reverse
• .flex-xl-nowrap
• .flex-xl-wrap
• .flex-xl-wrap-reverse

Розглянемо реальний приклад, в якому всередині батьківського контейнера потрібно розмістити 4 квадратних блоку з невеликою кількістю інформації в кожному, причому при зміні ширини екрану вони повинні перебудуватися в 2 стовпчика (планшет) або 1 стовпець (телефон).

Для реалізації цього прикладу були використані класи .d-flex, .justify-content-around і .flex-wrap для поділу блоків рівними проміжками і перенесення їх на новий рядок при зменшенні ширини контейнера. На вкладці HTML можна подивитися розмітку, а вкладка CSS містить код стилів.

See the Pen Bootstrap 4 justify-content by Elen ( @ambassador ) on CodePen .18892

Вирівнювання елементів всередині flex-контейнера заданої висоти

Якщо висота flex-контейнера більше, ніж розмір вкладених в неї блоків, ви можете використовувати flex-утиліти, засновані на властивості align-items для зміни вирівнювання дочірніх елементів по перехресної осі (вісь Y за замовчуванням (flex-direction: row) і вісь X , якщо задано властивість flex-direction: column). Назви класів засновані на назві самого властивості + його значення: stretch (йде за замовчуванням), start, end, center, baseline.

Основні класи:

• .align-items-start
• .align-items-end
• .align-items-center
• .align-items-baseline
• .align-items-stretch

Класи з префіксами:

• .align-items-sm-start, .align-items-md-start, .align-items-lg-start, .align-items-xl-start
• .align-items-sm-end, .align-items-md-end, .align-items-lg-end, .align-items-xl-end
• .align-items-sm-center, .align-items-md-center, .align-items-lg-center, .align-items-xl-center
• .align-items-sm-baseline, .align-items-md-baseline, .align-items-lg-baseline, .align-items-xl-baseline
• .align-items-sm-stretch, .align-items-md-stretch, .align-items-lg-stretch, .align-items-xl-stretch

Досить часто вирівнювання різного типу необхідно використовувати у верхній частині сторінки - в тезі <header> або в різних слайдерах.

Приклад, розміщений нижче, цікавий тим, що для формування блоків заголовної частини сайту використані такі класи, як .justify-content-between і .align-items-end. У блоках з текстом, розміщених всередині основного flex-контейнера використаний клас .align-items-center, що дозволяє центрувати елементи один щодо одного. Перемикайте вкладки HTML і CSS, щоб подивитися розмітку і стильові правила.

See the Pen Bootstrap 4 justify-content and align-items classes by Elen ( @ambassador ) on CodePen .18892

Індивідуальне вирівнювання елементів усередині flex-контейнера заданої висоти

У тому випадку, коли вам потрібно вирівняти тільки один або частина елементів з розташованих в одному ряду по висоті, ви можете використовувати класи Bootstrap-4, що починаються з align-self:

• .align-self-start
• .align-self-end
• .align-self-center
• .align-self-baseline
• .align-self-stretch

Як і у інших класів, тут можна застосувати чуйні префікси, щоб отримати клас, який працює на одному або декількох дозволах екрану:

• .align-self- (sm, md, lg, xl) -start
• .align-self- (sm, md, lg, xl) -end
• .align-self- (sm, md, lg, xl) -center
• .align-self- (sm, md, lg, xl) -baseline
• .align-self- (sm, md, lg, xl) -stretch

Сподіваюся, ви розумієте, що префікс повинен бути тільки один - або -sm-, або -md-, або -lg-, або -xl-, вказувати всі через кому можна.

У прикладі нижче блоки з класом .team-member всередині flex-контейнера з мінімальною висотою в 600px розташовані "драбинкою" за рахунок використання таких класів, як .align-self-md-start, align-self-md-center і .align- self-md-end. За рахунок цього перший блок розміщується вгорі контейнера, другий - посередині, а третій - внизу. Оскільки кожному з цих блоків задано властивість max-width: 30%, a при зменшенні ширини екрану їх висота вирівнюється і наближається до висоти батьківського контейнера, використаний клас з приставкою -md-. Також у батьківського елементу були додані розглянуті раніше клас .justify-content-sm-between для розподілу дочірніх блоків всередині нього з однаковими проміжками між ними, і клас .flex-wrap для перенесення блоків на маленьких екранах при скасуванні значення max-width:

@ Media (max - width: 576px) {

. team - member {

max - width: none;

margin - bottom: 1em;

}

}

See the Pen Bootstrap 4 align-items .clases by Elen ( @ambassador ) on CodePen .18892

Вирівнювання вмісту багаторядкових контейнерів

У тому випадку, якщо ви використовували класи .flex-wrap або .flex-wrap-reverse, і висота вашого контейнера більше розташованих в ній елементів, можна скористатися утилітою, пов'язаної з властивістю align-content, щоб вирівняти дочірні flex-елементи по перехресної осі . Доступними варіантами є: start, end, center, between, around або stretch (за замовчуванням).

Варіанти класів:

• .align-content-start
• .align-content-end
• .align-content-center
• .align-content-around
• .align-content-stretch
• .align-content-sm-start
• .align-content-sm-end
• .align-content-sm-center
• .align-content-sm-around
• .align-content-sm-stretch
• .align-content-md-start
• .align-content-md-end
• .align-content-md-center
• .align-content-md-around
• .align-content-md-stretch
• .align-content-lg-start
• .align-content-lg-end
• .align-content-lg-center
• .align-content-lg-around
• .align-content-lg-stretch
• .align-content-xl-start
• .align-content-xl-end
• .align-content-xl-center
• .align-content-xl-around
• .align-content-xl-stretch

Приклад, розміщений нижче, цікавий тим, що ви можете протестувати, як буде змінюватися розташування зображень галереї в залежності від призначуваного класу .align-content -.... Зверніть увагу на те, як змінюється розміщення блоків на маленьких екранах (для цього потрібно клацнути по вкладці HTML або CSS).

See the Pen Bootstrap-4 align-content classes by Elen ( @ambassador ) on CodePen .18892

У прикладі спеціально не була змінена висота батьківського блоку для невеликих дозволів екранів, тому дочірні блоки виходять за межі контейнера. Клацніть на кнопці і расскомментіруйте блок коду, щоб змінити ситуацію:

@ Media (max - width: 576px) {

. . .

/ * # Nature-gallery {

height: auto;

} * /

}

Посилання на документацію Bootstrap 4 англійською і російською мовою: