Відстань та Flexbox: використання властивості Gap настільки просте

У веб-розробці макет відіграє важливу роль у створенні привабливих та користувацьки-орієнтованих веб-сайтів. Часто використовуваною інструментом для макету є Flexbox, який дозволяє гнучко та відповідально розміщувати елементи. Однак часто для створення чіткої та приємної структури необхідні відстані між елементами. Тут на допомогу приходить властивість CSS gap, яка особливо елегантно розв'язує проблему відступів в Flexbox-макетах. У цьому посібнику я покажу тобі, як ефективно використовувати властивість gap.

Головні висновки

• Властивість gap дозволяє встановлювати відстані між дочірніми елементами в гнучкому контейнері.
• Властивість gap є простішою та ефективнішою, ніж використання margin.
• Ти можеш використовувати gap незалежно від значень padding контейнерних елементів, щоб отримати чистий макет.

Посібник по кроках

1. Створення основного макету Flexbox

По-перше, тобі потрібно створити простий макет Flexbox з трьома елементами. Визнач контейнер та встанови display: flex;, щоб активувати Flexbox.

Тут ми маємо наші три гнучкі блоки, які розташовані в ряду (row). Перший та третій елементи мають однаковий базовий розмір, тоді як середній елемент займає доступний простір.

2. Активувати flex-grow для середнього елементу

Щоб забезпечити, що середній елемент займатиме більше місця, ми встановлюємо для цього елемента властивість flex-grow на 1, тоді як інші два елементи мають базовий розмір 100.

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

3. Додавання відстані між елементами

В нашому випадку блоки не мають відстані один від одного. Щоб це виглядало привабливо, тобі потрібно додати відстані між елементами. Ти міг би використовувати margin, але це швидко призводить до проблем, особливо коли маєш справу з останнім елементом.

Тут зазвичай варто застосовувати значення margin-right 8px до всіх блоків. На жаль, це призводить до того, що останній елемент також отримує додаткову відстань.

4. Усунення margin для останнього елементу

Якщо ти використовуєш margin-right для кожного елементу, то тобі доведеться знову встановлювати його для останнього елементу на 0, що може бути не зручно. Тому підхід стосовно відступів за допомогою margin не є оптимальним.

На цьому етапі стає зрозумілим, що використання gap набагато елегантніше.

5. Введення властивості Gap

Для поліпшення вищезгаданого стану ти можеш використовувати властивість gap. Встанови gap: 8px; для свого гнучкого контейнера. Цей простий CSS автоматично створить потрібну відстань між дочірніми елементами.

Перевага gap полягає в тому, що тобі більше не потрібно керувати відступами для останнього елементу. Відстань застосовується рівномірно всюди.

6. Додавання padding

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

Якщо встановиш padding: 10px;, отримаєш рівномірну відстань навколо всієї гнучкої коробки.

7. Тестування макету

Тепер, коли ти визначив значення gap і padding, спробуй перевірити макет, змінивши ширину контейнера. Ти побачиш, що відстань між елементами залишається постійною, незалежно від розміру контейнера.

Макет тепер має гарну структуру й виглядає привабливо.

8. Використання інструментів розробника

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

Якщо ви наведете курсор на Flex-контейнер, ви побачите штриховані області, які представляють відстань за допомогою властивості gap.

Підсумок

За допомогою властивості gap в макетах Flexbox ви можете створювати зазори між дочірніми елементами елегантно та ефективно, не вдаючись до незручних правил margin. Їх використання допомагає забезпечити чистий та організований макет.