Урок 98 із 104

94%

Скорочена властивість flex

Вивчаємо скорочену властивість flex, яка об'єднує flex-grow, flex-shrink і flex-basis, а також правила скороченого запису та значення за замовчуванням.

Що таке flex

Властивість flex — це скорочений запис для трьох властивостей flex-елемента: flex-grow, flex-shrink і flex-basis.

.child { flex-grow: 1; flex-shrink: 2; flex-basis: 100px; }

Той самий запис можна скоротити до однієї властивості flex. Порядок значень завжди такий: flex-grow, flex-shrink, flex-basis.

.child { flex: 1 2 100px; }

Перше значення — flex-grow: жадібність, тобто здатність отримувати вільний простір.
Друге значення — flex-shrink: здатність стискатися при нестачі місця.
Третє значення — flex-basis: базовий розмір flex-елемента.

Можна опускати значення

У скороченому записі частину значень можна не вказувати. Якщо пропущено flex-basis або flex-shrink, браузер використовує правила синтаксису скороченої властивості flex та відповідні значення за замовчуванням.

.child { flex: 2; } .child { flex: 2 0.5; } .child { flex: 2 0.5 100px; }

❗ Важливо:

Не варто механічно сприймати пропущене значення як звичайне значення за замовчуванням. flex має власні правила розбору скороченого синтаксису. Наприклад, flex: 1 фактично використовується як flex: 1 1 0%, а не як flex-grow: 1; flex-shrink: 1; flex-basis: auto.

Приклади перетворення

Якщо всі три властивості задані явно, просто запишіть їх значення в порядку flex-grow, flex-shrink, flex-basis.

.child { flex-grow: 1; flex-shrink: 2; flex-basis: 100px; } /* Скорочено */ .child { flex: 1 2 100px; }

Якщо задані лише flex-grow і flex-shrink, можна записати два числа.

.child { flex-grow: 2; flex-shrink: 0.5; } /* Скорочено */ .child { flex: 2 0.5; }

Якщо задано лише одне число, воно використовується як flex-grow. У такому записі flex: 3 відповідає flex-grow: 3, flex-shrink: 1 і flex-basis: 0%.

.child { flex: 3; } /* Еквівалентно */ .child { flex-grow: 3; flex-shrink: 1; flex-basis: 0%; }

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

📌 Завдання:

Перепишіть код через скорочену властивість flex.
Збережіть ті самі значення flex-grow, flex-shrink і flex-basis.

.child { flex-basis: 100px; flex-grow: 1; flex-shrink: 2; }

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

Запишіть значення в порядку flex-grow, flex-shrink, flex-basis.

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

.child { flex: 1 2 100px; }

📌 Завдання:

Перепишіть код через flex.
Тут задані тільки flex-grow і flex-shrink.

.child { flex-shrink: 0.5; flex-grow: 2; }

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

Спочатку запишіть flex-grow, потім flex-shrink.

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

.child { flex: 2 0.5; }

📌 Завдання:

Перепишіть код через flex.
Визначте, яке значення має бути першим, а яке другим.

.child { flex-shrink: 0.5; flex-grow: 1; }

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

Порядок властивостей у початковому коді не має значення. У flex спочатку записується grow, потім shrink.

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

.child { flex: 1 0.5; }

📌 Завдання:

Розгорніть скорочений запис flex у три окремі властивості.

.child { flex: 1 2 200px; }

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

Перше значення — grow, друге — shrink, третє — basis.

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

.child { flex-grow: 1; flex-shrink: 2; flex-basis: 200px; }

📌 Завдання:

Розгорніть запис flex: 2 0.7 у три окремі властивості.
Пам'ятайте, що два числові значення означають grow і shrink.

.child { flex: 2 0.7; }

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

Перше число — flex-grow, друге — flex-shrink. Для такого скороченого запису flex-basis дорівнює 0%.

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

.child { flex-grow: 2; flex-shrink: 0.7; flex-basis: 0%; }

📌 Завдання:

Розгорніть запис flex: 3 у три окремі властивості.
Врахуйте спеціальні правила скороченого запису flex з одним числом.

.child { flex: 3; }

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

Одне число задає flex-grow. Для такого запису flex-shrink стає 1, а flex-basis — 0%.

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

.child { flex-grow: 3; flex-shrink: 1; flex-basis: 0%; }