flex | Справочник CSS
http://belarusweb.net
Основы создания сайтов

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'.

Ссылки

Примеры

HTML Результат BwCodes
<!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;
		}
		
		.divFlex1{width: 300px;}
		
		.divFlex2{width: 600px;}
		
		.pNormal{
		display: block;
		width: 580px;
		text-align: left;
		margin-top: 2em;
		}		
				
	</style>
</head>
<body>

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

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

Пример №1