Bootstrap 4: звичайна сітка або flexbox

39

Від автора: в 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 частин:

.col-xs-2
.col-xs-4
.col-xs-6

Новий режим flexbox дозволяє макету автоматично підбирати кількість колонок. Розмір вказувати не потрібно.

.col-xs
.col-xs
.col-xs

Безрозмірні колонки в сітці flexbox будуть порівну ділити доступне простір, завжди заповнюючи весь ряд. Клас .col-xs-size все ще дозволяє змінювати розмір колонок.

Щоб допомогти вам представити дві системи, ми підготували демо обох сіток. Скріншот з демо показаний нижче:

Bootstrap 4: обычная сетка или flexbox

3. Перехід колонок на новий рядок

Коли колонок у рядку стає більше 12, тринадцята колонка перестрибує на наступний рядок. Ефект називається перехід стовпця і працює однаково у звичайній сітці і flex-bootstrap.

.col-xs-6
.col-xs-6
.col-xs-3, This column will move to the next line.

Єдине, на що варто звернути увагу, це те, що в режимі автомакетирования безрозмірна колонка може розтягнутися на весь рядок, якщо вона не вмістилася на попередній.

Bootstrap 4: обычная сетка или flexbox

4. Адаптивна сітка

У вступі ми згадали новий вид сітки, XL. Медіа запити тепер виглядають так:

Extra small (xs) – нижче 576px

Small (sm) – від 576px до 768px

Medium (md) – від 768px до 992px

Large (lg) – від 992px до 1200 px

Extra Large (xl) – вище 1200 px

Bootstrap 4: обычная сетка или flexbox

5. Висота колонок

Старі сітки працювали на обтеканиях, тому всі колонки були різної висоти. Висота визначалася контентом.

Bootstrap 4: обычная сетка или flexbox

У flexbox макетах всі клітинки в рядку мають висоту колонки з найбільшим вмістом.

Bootstrap 4: обычная сетка или flexbox

6. Горизонтальне вирівнювання

У звичайному Bootstrap горизонтальне позиціонування колонок виконується через систему зміщень. Зміщення працюють, як порожні колонки, і дозволяють переміщати елементи вправо (наприклад, .offset-xs-3 зрушує колонку на 3 вправо). Такий підхід сильно дратує, так як нам потрібно вручну налаштовувати зрушення.

This column is now centered.

Завдяки властивості justify-content, щоб змістити колонку flex bootstrap по горизонталі, досить додати правильний клас.

All columns row in that will be automatically centered.

Якщо хочете використовувати зрушення, будь ласка!

Bootstrap 4: обычная сетка или flexbox

7. Вертикальне вирівнювання

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

Flexbox ж відмінно справляється з вирівнюванням в макеті і дає нам цілих два способи вертикального позиціонування колонок:

Middle
Bottom
Top

Вирівнюйте стовпці в рядку окремо один від одного:

Middle
Bottom
Top

Bootstrap 4: обычная сетка или flexbox

8. Сортування колонок

У звичайній системі сіток, якщо нам необхідно поміняти порядок колонок, нам потрібно використовувати push і pull. Не краще дизайнерське рішення, але воно працює.

On MD screens this column will move 8 spaces to the right.
On MD screens this column will move 4 spaces to the left.

Хто раніше вже працював з flexbox, знає, що там є вбудоване властивість order. Розробники Bootstrap реалізували її на основі трьох класів сортування:

.flex-xs-first – відображається першим.

.flex-xs-last – відображається останнім.

.flex-xs-unordered – відображається між першим і останнім.

Вручну обчислювати нічого не потрібно. Якщо потрібно відсортувати більше трьох колонок, що буває рідко, можна використовувати push/pull або властивість order в CSS.

Bootstrap 4: обычная сетка или flexbox

Висновок

Якщо ще раз повернутися до основних пунктів статті, стає ясно, що flexbox більш сучасна і універсальна система сіток. Flexbox версія включає в себе все зі звичайної сітки, плюс свої функції. Єдиний недолік bootstrap-flex – це відсутність підтримки в IE9.

Так ми закінчуємо наше порівняння систем сіток в новому Bootstrap 4. Додайте в закладки сторінку з демо, щоб мати їх завжди під рукою. Сподіваємося, стаття була корисною! Вдало покодить :)