CSS :: Свойство flex

Сокращенное css-свойство flex (от англ. flex – гибкий) позволяет задавать в одном объявлении коэффициент роста flex-grow, коэффициент сжатия flex-shrink и базовый размер флекс-элемента flex-basis. Все значения должны перечисляться через пробел.

Характеристики

Значение по умолчанию: 0 1 auto.
Применяется: к флекс-элементам.
Наследуется: нет.
Анимируется: да.
JavaScript: object.style.flex="value".

Синтаксис

flex: none | [ flex-grow flex-shrink? || flex-basis ]

Значения

В качестве значений свойства можно через пробел задать значения свойств flex-grow, flex-shrink и flex-basis. В случае необходимости разрешается также использовать и следующие служебные слова:

none – соответствует комбинации «flex: 0 0 auto»;
auto – соответствует комбинации «flex: 1 1 auto».

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-flexbox-1/#propdef-flex

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/flex

Подробнее о модуле Flexbox смотрите в нашем учебнике здесь.

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		/* Оформляем родительские div'ы flex-элементов */
		div{
		display: flex;
		height: 150px;
		margin: auto;
		margin-top: 20px;
		background-color: #DFDFDF;
		border-radius: 5px;
		}
		
		/* Это общий стиль flex-элементов */		
		p, span{
		flex: 1 1 150px;
		min-width: 50px;
		padding: 10px;
		margin: auto;
		background-color: #55aa55;
		border-radius: 5px;
		text-align: center;
		font-weight: bold;
		color: #F9F9F9;
		}
		
		.div_flex_1{width: 300px;}
		
		.div_flex_2{width: 600px;}
		
		.p_normal{
		display: block;
		width: 580px;
		text-align: left;
		margin-top: 2em;
		}		
				
	</style>
</head>
<body>

	<div class="div_flex_1">
		<p>1</p><span>2</span>
		<p style="flex-shrink: 2">3</p>
	</div>

	<div class="div_flex_2">
		<p>1</p>
		<span>2</span>
		<p style="flex-grow: 10">3</p>
	</div>
		
	<p class="p_normal">	
		Для первого флекс-контейнера в примере мы установили заведомо 
		малую ширину, чтобы флекс-элементам пришлось сжаться, при этом 
		для третьего элемента мы переопределили коэффициент сжатия, 
		заданный в таблице стилей универсальным свойством flex.		
	</p>	
		
	<p class="p_normal">	
		Для второго флекс-контейнера мы наоборот установили заведомо 
		большую ширину, чтобы флекс-элементам пришлось растянуться, при 
		этом для третьего элемента мы переопределили коэффициент роста, 
		заданный в таблице стилей универсальным свойством flex.		
	</p>
	
</body>
</html>

Пример №1