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

align-content

Описание

css-свойство align-content (от англ. align contentвыравнивать содержимое) используется для выравнивания строк и распределения пространства между ними вдоль поперечной оси флекс-контейнера, если флекс-элементов в контейнере достаточно много и у них есть возможность занимать несколько строк.

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

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

Синтаксис

align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch

Значения

  • flex-start – строки располагаются в начале поперечной оси;
  • flex-end – строки располагаются с конца поперечной оси;
  • center – строки располагаются по центру флекс-контейнера;
  • space-between – строки располагаются равномерно вдоль поперечной оси: расстояние между ними одинаково, но крайние строки прижимаются к соответствующим сторонам флекс-контейнера;
  • space-around – строки располагаются равномерно вдоль поперечной оси: расстояние между ними одинаково, но расстояние между первой строкой и соответствующей стороной контейнера, а также расстояние между последней строкой и соответствующей стороной контейнера, равно половине расстояния между двумя соседними строками;
  • space-evenly – строки располагаются полностью равномерно вдоль поперечной оси: расстояние между ними одинаково, при этом расстояние между первой строкой и соответствующей стороной контейнера, а также расстояние между последней строкой и соответствующей стороной контейнера, равно расстоянию между двумя соседними строками;
  • stretch – строки равномерно растягиваются, заполняя свободное пространство (используется по умолчанию).

Ссылки

Примеры

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Пример №1</title>
	
	<style>
		/* Оформляем родительские div'ы flex-элементов */
		div{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width: 300px;
		height: 220px;
		margin: auto;
		margin-top: 10px;
		background-color: #DFDFDF;
		border-radius: 5px;
		}
		
		/* Это общий стиль flex-элементов */		
		p, span{
		width: 60px;
		margin: auto;
		padding: 10px;
		background-color: #55aa55;
		border-radius: 5px;
		text-align: center;
		font-weight: bold;
		color: #F9F9F9;
		}

		/* Это класс для 1-го div'а */	
		.divFlex1{
		align-content: flex-start;
		}
		
		/* Это класс для 2-го div'а */	
		.divFlex2{
		align-content: flex-end;
		}
		
		/* Это класс для 3-го div'а */	
		.divFlex3{
		align-content: center;
		}
		
		/* Это класс для 4-го div'а */	
		.divFlex4{
		align-content: space-between;
		}
				
		/* Это класс для 5-го div'а */	
		.divFlex5{
		align-content: space-around;
		}
		
		/* Это класс для 6-го div'а */	
		.divFlex6{
		align-content: space-evenly;
		}
						
	</style>
	
</head>
<body>

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

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

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

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

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

</body>
</html>

Пример №1