Визначає, скільки простору може займати флекс усередині контейнера. Як значення приймаються числа, вони ставлять пропорції кожного флексу. Наприклад, якщо всім елементів встановлено значення 1, всі вони вийдуть рівного розміру. Якщо якийсь елемент отримав значення 2, то його розмір буде вдвічі більший за інші.
Коротка інформація
| Значення за замовчуванням | 0 |
|---|---|
| Успадковується | Ні |
| Застосовується | До флекс-елементів |
| Анімується | Так |
Синтаксис
<code>flex-grow: <число>
Позначення
| Опис | Приклад | |
|---|---|---|
| <тип> | Вказує тип значення. | <розмір> |
| A && B | Значення повинні виводитися в зазначеному порядку. | <розмір> && <колір> |
| A | B | Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). | normal | small-caps |
| A || B | Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. | width || count |
| [ ] | Групує значення. | [ crop || cross ] |
| * | Повторювати нуль або більше разів. | [,<час>]* |
| + | Повторювати один або більше разів. | <число>+ |
| ? | Вказаний тип, слово або група не є обов'язковим. | inset? |
| {A, B} | Повторювати не менше A, але не більше B разів. | <радіус>{1,4} |
| # | Повторювати один або більше разів через кому. | <час># |
Значення
Приймаються цілі (1, 2, 3,…) або дробові числа (наприклад: 0.6). Негативні значення ігноруються.
Приклад
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex-grow</title> <style> form { width: 400px; margin: auto; }
p { display: flex; }
label { margin-right: 10px; }
input, select { flex-grow: 1; }
</style>
</head>
<body> <form action="handler.php"> <p> <label>Ім'я:</label> <input name="name" id="name">
</p> <p> <label>Яка у вас операційна система?:</label> <select name="os"> <option value="1">Windows</option> <option value="2">Linux</option> <option value="3">Mac OS</option>
</select>
</p> <p><button>Надіслати</button></p>
</form>
</body>
</html>Результат цього прикладу показаний на рис. 1.
Ширина полів форми
Примітка
Safari до версії 9 підтримує властивість -webkit-flex-grow.
Специфікація
| Специфікація | Статус |
|---|---|
| CSS Flexible Box Layout Module Level 1 | Можлива рекомендація |
Специфікація
Кожна специфікація проходить кілька стадій схвалення.
- Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
- Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
- Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
- Draft (Чернетка специфікації) — перша чорнова версія стандарту.
Браузери
| 11 | 13 | 29 | 12.1 | 6.1 | 9 | 28 |
| 4.4 | 28 | 12.1 | 7.1 | 9.2 |
Браузери
У таблиці браузерів застосовуються такі позначення .
- — властивість повністю підтримується браузером з усіма допустимими значеннями;
- — властивість браузером не сприймається та ігнорується;
- ;— при роботі можливий але поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, зазначених у специфікації. Число вказує версію браузера, починаючи з якої властивість підтримується.