Свойство flex-grow

Коэффициент роста элемента контейнера flexbox. Задает сколько оставшегося пространства в контейнере flexbox должно быть назначено этому элементу 

flex-grow: 1;
  • поддерживается начиная с
  • частичная поддержка до
  • не поддерживается

Значения

flex-grow: 0;

Элемент не будет расти, если есть свободное место. Он будет использовать только то пространство, которое ему необходимо

flex-grow: 1;

Элемент заполнит оставшееся пространство, если ни один другой элемент flexbox не имеет значения flex-grow. Если для всех элементов контейнера flexbox задано flex-grow: 1; то все элементы займут одинаковое количество места

flex-grow: 2;

Значение flex-grow является относительным, его поведение зависит от значения родственных элементов контейнера flexbox

Если в контейнере находятся два элемента, у одного flex-grow: 1; а у другого flex-grow: 2; то оставшееся в контейнере место распределиться пропорционально этим значениям. Элемент с flex-grow: 2; получит в два раза больше оставшегося пространства.

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии