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

flex-flow

Описание

Сокращенное css-свойство flex-flow (от англ. flex flowпоток флекс-элементов) позволяет задать в одном объявлении значения свойств flex-direction и flex-wrap.

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

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

Синтаксис

flex-flow: flex-direction || flex-wrap

Значения

В качестве значения свойство flex-flow принимает через пробел в любой последовательности значения свойств flex-direction и flex-wrap. Если указать только один параметр, второй примет значение по умолчанию.

Ссылки

Примеры

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		/* Оформляем родительские div'ы flex-элементов */
		div{
		display: flex;
		width: 250px;
		height: 150px;
		margin: auto;
		margin-top: 20px;
		background-color: #DFDFDF;
		border-radius: 5px;
		}
		
		/* Это общий стиль flex-элементов */		
		p, span{
		width: 40px;
		padding: 10px;
		margin: auto;
		background-color: #55aa55;
		border-radius: 5px;
		text-align: center;
		font-weight: bold;
		color: #F9F9F9;
		}

		/* Это класс для 1-го div'а */	
		.divFlex1{
		flex-flow: row wrap;
		}
		
		/* Это класс для 2-го div'а */	
		.divFlex2{
		flex-flow: wrap-reverse;
		}
		
		/* Это класс для 3-го div'а */	
		.divFlex3{
		flex-flow: column wrap;
		}
		
		/* Это класс для 4-го div'а */	
		.divFlex4{
		flex-flow: column wrap-reverse;
		}		
		
	</style>
</head>
<body>

	<div class="divFlex1">
		<p>1</p><span>2</span><p>3</p><span>4</span>
		<p>5</p><span>6</span><p>7</p><span>8</span>
	</div>

	<div class="divFlex2">
		<p>1</p><span>2</span><p>3</p><span>4</span>
		<p>5</p><span>6</span><p>7</p><span>8</span>
	</div>	
	
	<div class="divFlex3">
		<p>1</p><span>2</span><p>3</p><span>4</span>
		<p>5</p><span>6</span><p>7</p><span>8</span>
	</div>

	<div class="divFlex4">
		<p>1</p><span>2</span><p>3</p><span>4</span>
		<p>5</p><span>6</span><p>7</p><span>8</span>
	</div>

</body>
</html>

Пример №1