Від автора: в Bootstrap 4 в систему сіток, з якої ми всі знайомі з третьої версії, було внесено кілька змін. Була додана нова сітка XL, змінилися деякі класи-модифікатори, а також з’явилася абсолютно нова система сіток на flexbox.
Звичайна сітка і flexbox несумісні, доведеться вибирати, під чим працювати в своїх проектах. Щоб допомогти вам вибрати, в цій статті ми розберемо всі відмінності двох систем. Для ще більш простого порівняння ми підготували різні приклади сіток, реалізовані в обох режимах.
1. Установка
Найпоширеніший спосіб підключити Bootstrap до проекту – CDN або через локальний файл. Є дві скомпільовані версії, для flexbox і звичайна:
Тим, хто вибирає свій Bootstrap, необхідно включити змінну $enable-flex в головному файлі налаштувань Sass: _variables.scss
$enable-flex = true;
В плані ваги flexbox версія важить трохи більше із-за додаткових правил і вендорних префіксів. Однак відмінність недуже (119Кб проти 105Кб), в більшості випадків ніякої різниці не буде.
2. Стандартна сітка
Сьогодні вже всі знають, як працює сітка в Bootstrap. Є рядок, розбита на 12 рівних частин, всередині якої йдуть стовпці. Кожен стовпець може займати від 1 до 12 частин:
Новий режим flexbox дозволяє макету автоматично підбирати кількість колонок. Розмір вказувати не потрібно.
Безрозмірні колонки в сітці flexbox будуть порівну ділити доступне простір, завжди заповнюючи весь ряд. Клас .col-xs-size все ще дозволяє змінювати розмір колонок.
Щоб допомогти вам представити дві системи, ми підготували демо обох сіток. Скріншот з демо показаний нижче:
3. Перехід колонок на новий рядок
Коли колонок у рядку стає більше 12, тринадцята колонка перестрибує на наступний рядок. Ефект називається перехід стовпця і працює однаково у звичайній сітці і flex-bootstrap.
Єдине, на що варто звернути увагу, це те, що в режимі автомакетирования безрозмірна колонка може розтягнутися на весь рядок, якщо вона не вмістилася на попередній.
4. Адаптивна сітка
У вступі ми згадали новий вид сітки, XL. Медіа запити тепер виглядають так:
Extra small (xs) – нижче 576px
Small (sm) – від 576px до 768px
Medium (md) – від 768px до 992px
Large (lg) – від 992px до 1200 px
Extra Large (xl) – вище 1200 px
5. Висота колонок
Старі сітки працювали на обтеканиях, тому всі колонки були різної висоти. Висота визначалася контентом.
У flexbox макетах всі клітинки в рядку мають висоту колонки з найбільшим вмістом.
6. Горизонтальне вирівнювання
У звичайному Bootstrap горизонтальне позиціонування колонок виконується через систему зміщень. Зміщення працюють, як порожні колонки, і дозволяють переміщати елементи вправо (наприклад, .offset-xs-3 зрушує колонку на 3 вправо). Такий підхід сильно дратує, так як нам потрібно вручну налаштовувати зрушення.
Завдяки властивості justify-content, щоб змістити колонку flex bootstrap по горизонталі, досить додати правильний клас.
Якщо хочете використовувати зрушення, будь ласка!
7. Вертикальне вирівнювання
У звичайному Bootstrap не можна виробляти вертикальне вирівнювання. Єдиний спосіб домогтися вертикального позиціонування – використовувати користувальницький CSS, що найчастіше засмічує код.
Flexbox ж відмінно справляється з вирівнюванням в макеті і дає нам цілих два способи вертикального позиціонування колонок:
Вирівнюйте стовпці в рядку окремо один від одного:
8. Сортування колонок
У звичайній системі сіток, якщо нам необхідно поміняти порядок колонок, нам потрібно використовувати push і pull. Не краще дизайнерське рішення, але воно працює.
Хто раніше вже працював з flexbox, знає, що там є вбудоване властивість order. Розробники Bootstrap реалізували її на основі трьох класів сортування:
.flex-xs-first – відображається першим.
.flex-xs-last – відображається останнім.
.flex-xs-unordered – відображається між першим і останнім.
Вручну обчислювати нічого не потрібно. Якщо потрібно відсортувати більше трьох колонок, що буває рідко, можна використовувати push/pull або властивість order в CSS.
Висновок
Якщо ще раз повернутися до основних пунктів статті, стає ясно, що flexbox більш сучасна і універсальна система сіток. Flexbox версія включає в себе все зі звичайної сітки, плюс свої функції. Єдиний недолік bootstrap-flex – це відсутність підтримки в IE9.
Так ми закінчуємо наше порівняння систем сіток в новому Bootstrap 4. Додайте в закладки сторінку з демо, щоб мати їх завжди під рукою. Сподіваємося, стаття була корисною! Вдало покодить 
