flex-growВластивість є суб-властивість модуля Flexible Box Layout.
Він визначає здатність гнучкого виробу рости за необхідності. Він приймає безрозмірне значення, яке служить пропорцією. Це диктує, який обсяг доступного місця всередині гнучкого контейнера повинен займати елемент.
Наприклад, якщо для всіх елементів flex-growвстановлено значення 1, кожна дитина встановить рівний розмір усередині контейнера. Якби ви дали одному з дітей значення 2, ця дитина зайняла б удвічі більше місця, ніж інші.
Синтаксис
flex-grow: .flex-item ( flex-grow: 2; )Демо
Наступна демонстрація показує, як обчислюється залишок місця відповідно до різних значень flex-grow(для кращого розуміння див. На CodePen).
Усі елементи мають flex-growзначення 1, крім третього, що має flex-growзначення 2. Це означає, що коли розподіляється вільний простір, у третього гнучкого предмета буде вдвічі більше місця, ніж у інших.
Підтримка браузера
- (сучасний) означає останній синтаксис із специфікації (наприклад
display: flex;) - (гібрид) означає непарний неофіційний синтаксис 2011 року (наприклад
display: flexbox;) - (старий) означає старий синтаксис 2009 року (наприклад
display: box;)
| Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (сучасний) 20- (старий) | 3,1+ (старий) | 2-21 (старий) 22+ (новий) | 12,1+ (сучасний) | 10+ (гібрид) | 2,1+ (старий) | 3,2+ (старий) |
Браузер Blackberry 10+ підтримує новий синтаксис.
Для отримання додаткової інформації про змішування синтаксисів, щоб отримати найкращу підтримку браузера, зверніться до цієї статті (CSS-хитрощі) або цієї статті (DevOpera).