Это flex-growсвойство является подсвойством модуля Flexible Box Layout.
Он определяет возможность увеличения гибкого элемента при необходимости. Он принимает безразмерное значение, которое служит пропорцией. Он определяет, какой объем доступного пространства внутри гибкого контейнера должен занимать элемент.
Например, если для всех элементов flex-growустановлено значение 1, каждый дочерний элемент будет иметь одинаковый размер внутри контейнера. Если бы вы дали одному из детей значение 2, этот ребенок занимал бы в два раза больше места, чем остальные.
Синтаксис
flex-grow: .flex-item ( flex-grow: 2; )Демо
В следующей демонстрации показано, как вычисляется оставшееся пространство в соответствии с различными значениями flex-grow(см. CodePen для лучшего понимания).
Все элементы имеют flex-growзначение 1, кроме 3-го, имеющего flex-growзначение 2. Это означает, что при распределении доступного пространства третий гибкий элемент будет иметь в два раза больше места, чем другие.
Поддержка браузера
- (современный) означает последний синтаксис из спецификации (например
display: flex;) - (гибрид) означает странный неофициальный синтаксис 2011 года (например
display: flexbox;) - (old) означает старый синтаксис 2009 года (например
display: box;)
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (современный) 20- (старый) | 3.1+ (старые версии) | 2-21 (старые) 22+ (новые) | 12.1+ (современный) | 10+ (гибрид) | 2.1+ (старая версия) | 3.2+ (старые) |
Браузер Blackberry 10+ поддерживает новый синтаксис.
Для получения дополнительной информации о том, как смешивать синтаксисы, чтобы получить лучшую поддержку браузера, обратитесь к этой статье (CSS-Tricks) или этой статье (DevOpera).