Урок 101 із 104
97%
← Назад

Плитка з коректними відступами

Вчимося створювати flex-плитку з правильними горизонтальними відступами за допомогою margin та псевдокласу :nth-child().

Плитка без відступів

Почнемо з простої flex-плитки. Контейнер має ширину 300px, а кожен елемент — ширину 100px. Тому в одному рядку поміщаються три елементи.

<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 за допомогою margin-right. Але якщо додати його всім елементам, останній елемент кожного рядка також матиме зайвий відступ.

Тому для кожного третього елемента потрібно прибрати правий відступ. Для цього використаємо псевдоклас :nth-child(3n). Він вибирає кожен третій елемент: 3-й, 6-й, 9-й тощо.

.parent { display: flex; flex-wrap: wrap; width: 320px; border: 1px solid red; } .child { box-sizing: border-box; width: 100px; height: 100px; margin-right: 10px; border: 1px solid green; } .child:nth-child(3n) { margin-right: 0; }
1-й елемент 2-й елемент 3-й елемент 100px 100px 100px ← 10px → ← 10px → Загальна ширина: 100 + 10 + 100 + 10 + 100 = 320px

Перевага перед space-between

На відміну від justify-content: space-between, відступи через margin не перерозподіляються залежно від кількості елементів у рядку. Тому неповний останній ряд не роз'їжджається по краях.

<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>

Як працює :nth-child(3n)

Запис :nth-child(3n) вибирає кожен третій дочірній елемент. У нашому випадку це останній елемент кожного рядка з трьома колонками.

  • :nth-child(3n) вибирає 3-й, 6-й, 9-й, 12-й та наступні елементи.
  • Для цих елементів margin-right встановлюється в 0.
  • Інші елементи отримують margin-right: 10px.
  • Для трьох колонок у рядку ширина контейнера становить 320px.
❗ Важливо:

Цей підхід прив'язаний до кількості колонок. Якщо потрібно 4 елементи в ряд, замість :nth-child(3n) потрібно використовувати :nth-child(4n). Для сучасних сіток також можна використовувати CSS Grid і gap.

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

📌 Завдання:
  1. Створіть flex-плитку по два елементи в ряд.
  2. Зробіть відстань між елементами 20px.
  3. Ширину кожного елемента встановіть 100px.
  4. Зробіть так, щоб останній елемент кожного рядка не мав правого відступу.
<!-- Початковий код --> <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>
💡 Показати підказку

Для двох колонок останнім елементом рядка буде кожен другий елемент. Використайте :nth-child(2n). Ширина контейнера має враховувати два елементи по 100px і один проміжок 20px.

✅ Показати відповідь
.parent { display: flex; flex-wrap: wrap; width: 220px; } .child { box-sizing: border-box; width: 100px; height: 100px; margin-right: 20px; border: 1px solid green; } .child:nth-child(2n) { margin-right: 0; }