Урок 99 із 104
95%
← Назад

Плитка на Flexbox

Вчимося створювати сітку з flex-елементів у кілька рядів за допомогою flex-wrap, justify-content та align-content.

Розташування елементів у кілька рядів

За замовчуванням flex-елементи намагаються розташуватися в один ряд. Щоб дозволити їм переходити на наступний ряд, використовується властивість flex-wrap: wrap.

<div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> <div class="child">6</div> <div class="child">7</div> <div class="child">8</div> <div class="child">9</div> </div>
.parent { display: flex; flex-wrap: wrap; width: 300px; border: 1px solid red; } .child { box-sizing: border-box; width: 100px; height: 100px; border: 1px solid green; }

Відстань між елементами по горизонталі

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

Якщо кожен проміжок має бути 10px, потрібно додати до ширини контейнера 20px: 10px для першого проміжку та 10px для другого. Тому ширина контейнера буде 320px.

.parent { display: flex; flex-wrap: wrap; justify-content: space-between; width: 320px; border: 1px solid red; } .child { box-sizing: border-box; width: 100px; height: 100px; border: 1px solid green; }

Відстань між рядами

Тепер потрібно створити такі самі проміжки між рядами. Для розподілу вільного простору між flex-рядками можна використати властивість align-content.

Встановимо align-content: space-between. Воно розподілить вільний простір між трьома рядами.

.parent { display: flex; flex-wrap: wrap; justify-content: space-between; align-content: space-between; width: 320px; height: 320px; border: 1px solid red; } .child { box-sizing: border-box; width: 100px; height: 100px; border: 1px solid green; }

Чому потрібна висота контейнера

align-content розподіляє вільний простір між flex-лініями. Якщо висота контейнера не задана і в ньому немає додаткової висоти, для такого розподілу просто не буде вільного простору.

  • flex-wrap: wrap — дозволяє елементам переходити на наступні ряди.
  • justify-content: space-between — розподіляє вільний простір між елементами кожного рядка.
  • align-content: space-between — розподіляє вільний простір між flex-рядками.
  • Для роботи align-content потрібен вільний простір у поперечній осі.
❗ Важливо:

У сучасному CSS для створення сіток часто зручніше використовувати CSS Grid і властивість gap. Але Flexbox добре підходить для навчання та ситуацій, де потрібно керувати розташуванням елементів уздовж flex-осей.

Практичне завдання

📌 Завдання:
  1. Створіть контейнер шириною 320px і висотою 320px.
  2. Додайте дев'ять елементів розміром 100×100px.
  3. Розташуйте елементи в кілька рядів.
  4. Зробіть відстань між елементами по горизонталі та вертикалі приблизно 10px.
<!-- Початковий код --> <div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> <div class="child">6</div> <div class="child">7</div> <div class="child">8</div> <div class="child">9</div> </div>
💡 Показати підказку

Використайте display: flex, flex-wrap: wrap, justify-content: space-between та align-content: space-between. Не забудьте задати контейнеру розмір 320×320px.

✅ Показати відповідь
.parent { display: flex; flex-wrap: wrap; justify-content: space-between; align-content: space-between; width: 320px; height: 320px; } .child { box-sizing: border-box; width: 100px; height: 100px; }
📌 Завдання:
  1. Змініть розмір елементів на 80×80px.
  2. Збережіть відстань між елементами приблизно 10px.
  3. Підберіть ширину та висоту контейнера так, щоб у ньому помістилися три елементи в ряд і три ряди.
<!-- Початковий код --> <div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> <div class="child">6</div> <div class="child">7</div> <div class="child">8</div> <div class="child">9</div> </div>
💡 Показати підказку

Три елементи по 80px займають 240px. Додайте два проміжки по 10px для ширини та аналогічно розрахуйте висоту.

✅ Показати відповідь
.parent { display: flex; flex-wrap: wrap; justify-content: space-between; align-content: space-between; width: 260px; height: 260px; } .child { box-sizing: border-box; width: 80px; height: 80px; }