Як працює Flexbox - пояснюється у великих, барвистих, анімованих gif-файлах

Flexbox обіцяє врятувати нас від зла простого CSS (наприклад, вертикального вирівнювання).

Що ж, Flexbox справді досягає цієї мети. Але освоєння його нової розумової моделі може бути складним завданням.

Тож давайте анімовано розглянемо, як працює Flexbox, щоб ми могли використовувати його для створення кращих макетів.

Основним принципом Flexbox є зробити макети гнучкими та інтуїтивно зрозумілими.

Для цього контейнери дозволяють самі вирішувати, як рівномірно розподілити своїх дітей, включаючи їх розмір та простір між ними.

Це все в принципі добре звучить. Але давайте подивимось, як це виглядає на практиці.

У цій статті ми розглянемо 5 найпоширеніших властивостей Flexbox. Ми дослідимо, чим вони займаються, як ви можете ними користуватися та як насправді будуть виглядати їх результати.

Властивість №1: Відображення: Flex

Ось наш приклад веб-сторінки:

У вас є чотири кольорових div різних розмірів, розміщені в сірому div контейнера. На даний момент кожен div не виконаний за замовчуванням display: block. Таким чином, кожен квадрат займає всю ширину своєї лінії.

Для того , щоб почати роботу з Flexbox, ви повинні зробити свій контейнер в гнучкий контейнер . Це так просто, як:

#container { display: flex;}

Не багато що змінилося - ваші divs відображаються вбудовано, але це все. Але за лаштунками ви зробили щось потужне. Ви дали своїм квадратам щось, що називається гнучким контекстом .

Тепер ви можете почати розміщувати їх у цьому контексті з набагато меншими труднощами, ніж традиційні CSS.

Властивість №2: Flex Direction

Контейнер Flexbox має дві осі: основну вісь і поперечну вісь , які за замовчуванням виглядають так:

За замовчуванням елементи розташовані вздовж головної осі зліва направо . Ось чому ваші квадрати за замовчуванням стали горизонтальними лініями після того, як ви застосували display: flex.

Flex-direction, однак, давайте повернемо головну вісь.

#container { display: flex; flex-direction: column;}

Тут слід зробити важливу відмінність: flex-direction: columnне вирівнює квадрати на поперечній осі замість головної осі. Це змушує саму головну вісь переходити від горизонтальної до вертикальної.

Є кілька інших варіанти гнучкого-напрямок, а також: рядки зворотні і стовпець зворотний.

Властивість №3: Обґрунтуйте вміст

Justify-content контролює, як ви вирівнюєте елементи по головній осі.

Тут ви заглибитесь трохи глибше в розрізнення основної / поперечної осі. Спочатку повернімось до flex-direction: row.

#container { display: flex; flex-direction: row; justify-content: flex-start;}

У вашому розпорядженні є п’ять команд для використання виправданого вмісту :

  1. Флекс-старт
  2. Гнучкий кінець
  3. Центр
  4. Простір між ними
  5. Простір навколо

Простір навколо та простір між ними є найменш інтуїтивними. Пробіл між ними дає рівний простір між кожним квадратом, але не між ним і контейнером.

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

Заключна примітка: пам’ятайте, що вирівнюючий вміст працює вздовж головної осі , а flex-direction перемикає головну вісь . Це буде важливо, коли ви перейдете до ...

Властивість №4: Вирівняти елементи

Якщо ви отримаєте виправданий вміст, вирівнювання елементів буде легким.

Оскільки вирівнювання вмісту працює вздовж головної осі, елементи вирівнювання застосовуються до поперечної осі.

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

Потім, давайте зануримося в команди align-items.

  1. гнучкий старт
  2. гнучкий кінець
  3. центр
  4. розтягнути
  5. базовий рівень

Перші три точно такі ж, як і justify-content , тому тут нічого надто вигадливого.

Однак наступні два дещо відрізняються.

У вас є розтяжка, в якій елементи займають всю поперечну вісь, і базову лінію, в якій вирівняні нижній бік абзацу.

(Зверніть увагу, що для align-items: stretch, мені довелося встановити висоту квадратів на автоматичне. В іншому випадку властивість висоти замінить розтяжку.)

Для базової лінії пам’ятайте, що якщо ви приберете теги абзацу, він замість цього вирівняє нижню частину квадратів приблизно так:

Щоб краще продемонструвати головну та поперечну осі, давайте поєднаємо вирівнюваний вміст та вирівнювання елементів та подивимося, як по-різному працює центрування для двох команд гнучкого напрямку:

У ряду квадрати розташовуються вздовж головної горизонтальної осі. З колоною вони падають уздовж вертикальної головної осі.

Навіть якщо квадрати в обох випадках відцентровані як вертикально, так і горизонтально, ці два не є взаємозамінними!

Властивість №5: Вирівняти самостійно

Align-self дозволяє вручну маніпулювати вирівнюванням одного конкретного елемента.

В основному це перевизначення елементів вирівнювання для одного квадрата. Усі властивості однакові, хоча за замовчуванням встановлено значення авто , в якому він слідує за елементами вирівнювання контейнера.

#container { align-items: flex-start;}
.square#one { align-self: center;}// Only this square will be centered.

Подивимось, як це виглядає. Ви застосуєте align-self до двох квадратів, а для решти застосуєте align-items: centerі flex-direction: row.

Висновок

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

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

Дякуємо за читання!