- Блоки з display: flex
- Напрямок всередині flex-блоків
- Вирівнювання вмісту всередині flexbox-контейнера
- Перенесення блоків за допомогою властивості flex-wrap
- Вирівнювання елементів всередині flex-контейнера заданої висоти
- Основні класи:
- Індивідуальне вирівнювання елементів усередині flex-контейнера заданої висоти
- Вирівнювання вмісту багаторядкових контейнерів
Адаптивна сітка 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 англійською і російською мовою: