CSS :: Свойство flex-grow
css-свойство flex-grow (от англ. flex grow – рост флекс-элемента) определяет, какую долю свободного пространства будет занимать данный флекс-элемент по сравнению с другими флекс-элементами.
Характеристики
- Значение по умолчанию: 0.
- Применяется: к флекс-элементам.
- Наследуется: нет.
- Анимируется: да.
- JavaScript: object.style.flexGrow="value".
Синтаксис
flex-grow: <число>
Значения
В качестве значений свойство принимает число, называемое коэффициентом роста флекс-элемента. Он может быть нулем (по умолчанию), а также положительным целым или дробным числом. При этом, чем больше коэффициент роста, тем большая доля свободного пространства достанется данному флекс-элементу по сравнению с другими элементами.
Чтобы рассчитать итоговый размер требуемого флекс-элемента можно использовать следующий алгоритм.
- Первый шаг. Рассчитываем свободное пространство флекс-контейнера (СПК). Для этого от ширины контейнера (ШК) (чистое пространство без паддингов) отнимаем сумму базовых размеров флекс-элементов (СБР), а также сумму их паддингов (СПЭ), соответствующих данному направлению: СПК = ШК - СБР - СПЭ.
-
Второй шаг. Рассчитываем размер доли свободного пространства (РДСП), которое займет данный флекс-элемент:
- если сумма всех коэффициентов роста флекс-элементов больше нуля, но меньше единицы (например, равна 0.8), то умножаем размер свободного пространства контейнера на коэффициент роста (КР) требуемого флекс-элемента: РДСП = СПК * КР;
- если сумма всех коэффициентов роста флекс-элементов больше единицы или равна ей, то размер свободного пространства умножаем на коэффициент роста данного элемента, а затем делим результат на сумму коэффициентов роста (СКР) всех элементов контейнера: РДСП = СПК * КР / СКР.
- Третий шаг. Рассчитываем итоговый размер флекс-элемента (ИР). Для этого прибавляем полученный размер доли свободного пространства контейнера занимаемого элементом к базовому размеру элемента: ИР = БР + РДСП.
Добавим, что в любом случае свободное пространство, которое распределяется между флекс-элементами с отличными от нуля коэффициентами роста, делится между ними пропорционально их коэффициентам роста и затем прибавляется к базовому размеру элемента.
Также отметим, что полученный алгоритм является результатом составления ряда пропорций и уравнений, которые могут быть решены в рамках школьной программы по математике.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css-flexbox-1/#propdef-flex-grow
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/flex-grow
Подробнее о модуле Flexbox смотрите в нашем учебнике здесь.
Примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> /* Оформляем родительские div'ы flex-элементов */ div{ display: flex; width: 500px; height: 120px; margin: auto; margin-top: 20px; background-color: #DFDFDF; border-radius: 5px; } /* Это общий стиль flex-элементов */ p, span{ width: 30px; padding: 10px; margin: auto; background-color: #55aa55; border-radius: 5px; text-align: center; font-weight: bold; color: #F9F9F9; } .p_normal{ display: block; width: 480px; height: auto; text-align: left; margin-top: 2em; } </style> </head> <body> <div> <p>1</p><span>2</span><p>3</p> </div> <div> <p>1</p><span>2</span> <p style="flex-grow: 0.5">3</p> </div> <div> <p>1</p> <span style="flex-grow: 0.3">2</span> <p style="flex-grow: 0.6">3</p> </div> <div> <p style="flex-grow: 0.5; width: 50px">1</p> <span style="flex-grow: 1; width: 70px">2</span> <p style="flex-grow: 1.5; width: 100px">3</p> </div> <p class="p_normal"> Как видим, в первом блоке флекс-элементы не занимают свободное пространство флекс-контейнера, т.к. по умолчанию их коэффициенты роста равны нулю. </p> <p class="p_normal"> Во втором блоке мы применили встроенный стиль для третьего флекс-элемента, задав ему коэффициент роста 0.5. Т.к. размер свободного пространства равен 500px-3*30px-3*20px=350px, итоговый размер третьего элемента стал равен 30px+350px*0.5=30px+175px=205px (размеры первого и второго элементов не изменились, т.к. по умолчанию их коэффициенты роста равны нулю). </p> <p class="p_normal"> В третьем блоке сумма коэффициентов роста равна 0.9 (т.е. меньше единицы), а размер свободного пространства равен 350px, т.к. 500px-3*30px-3*20px=350px. Следовательно итоговый размер второго элемента будет равен 30px+350px*0.3=30px+105px=135px, а третьего - 30px+350px*0.6=30px+210px=240px (размер первого элемента не изменился, т.к. по умолчанию его коэффициент роста равен нулю). </p> <p class="p_normal"> В четвертом блоке сумма коэффициентов роста равна 3 (т.е. больше единицы), поэтому элементы распределяют между собой 100% свободного пространства, что составляет величину в 220px, т.к. 500px-50px-70px-100px-3*20px=220px (мы использовали встроенные стили для изменения ширины элементов). Следовательно итоговый размер первого элемента будет равен 50px+220px*0.5/3=50px+36.67px=86.67px, второго - 70px+220px*1/3=70px+73.33px=143.33px, третьего - 100px+220px*1.5/3=100px+110px=210px. </p> </body> </html>
Пример №1