Плитка з автоматичною шириною блоків

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

Проблема фіксованої ширини

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


        .parent {
          display: flex;
          flex-wrap: wrap;
          width: 800px;
          margin: 50px auto;
          border: 1px solid red;
          }
        .child {
          box-sizing: border-box;
          width: 200px;
          height: 100px;
          border: 1px solid green; }

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

Ширина у відсотках

Замість фіксованої ширини можна задати ширину елемента у відсотках. Відсоткова ширина flex-елемента розраховується від ширини його батьківського контейнера.


        .parent {
          display: flex;
          flex-wrap: wrap;
          width: 800px;
          margin: 50px auto;
          border: 1px solid red;
          }
        .child {
          box-sizing: border-box;
          width: 25%;
          height: 100px;
          border: 1px solid green;
          }

Зміна кількості колонок

Щоб змінити кількість елементів у рядку, достатньо змінити їхню відсоткову ширину.

25% — чотири елементи в ряд.
33.333% — три елементи в ряд.
50% — два елементи в ряд.
100% — один елемент у ряд.


        /* 4 елементи в ряд */
         .child {
           width: 25%;
           }
        /* 3 елементи в ряд */
         .child {
           width: 33.333333%;
           }
        /* 2 елементи в ряд */
         .child {
           width: 50%;
           }
        /* 1 елемент у ряд */
         .child {
           width: 100%;
           }

Перевага відсоткової ширини

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

❗ Важливо:

Якщо до flex-елементів додати горизонтальні margin або інші зовнішні відступи, їх потрібно враховувати окремо. Чотири елементи по 25% плюс додаткові горизонтальні відступи можуть уже не поміститися в один ряд.

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

📌 Завдання:

Змініть ширину flex-елементів так, щоб у кожному рядку було три елементи.
Використовуйте відсоткову ширину.


        .parent {
          display: flex;
          flex-wrap: wrap;
          width: 800px;
         }
        .child {
          box-sizing: border-box;
          height: 100px;
          border: 1px solid green;
         }

💡 Показати підказку

Ширина одного елемента має становити одну третину ширини контейнера.

✅ Показати відповідь


         .child {
           box-sizing: border-box;
           width: 33.333333%;
           height: 100px;
           border: 1px solid green;
           }

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

📌 Завдання:

Змініть ширину flex-елементів так, щоб у кожному рядку було два елементи.
Задайте ширину у відсотках.


        .parent {
          display: flex;
          flex-wrap: wrap;
          width: 800px;
         }
        .child {
          box-sizing: border-box;
          height: 100px;
          border: 1px solid green;
         }

💡 Показати підказку

Два елементи мають порівну поділити ширину контейнера.

✅ Показати відповідь


        .child {
          box-sizing: border-box;
          width: 50%;
          height: 100px;
          border: 1px solid green;
          }

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

📌 Завдання:

Змініть ширину flex-елементів так, щоб у кожному рядку був лише один елемент.
Ширина має бути задана у відсотках.


        .parent {
          display: flex;
          flex-wrap: wrap;
          width: 800px;
          }
        .child {
          box-sizing: border-box;
          height: 100px;
          border: 1px solid green;
          }

💡 Показати підказку

Один елемент має займати всю ширину батьківського контейнера.

✅ Показати відповідь


        .child {
          box-sizing: border-box;
          width: 100%;
          height: 100px;
          border: 1px solid green;
          }