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 смотрите в нашем учебнике здесь.

Примеры

HTML Результат

htmlCodes

<!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