CSS свойство align-contentcss3

CSS свойства

Определение и применение

CSS свойство align-contentcss3 определяет как браузер распределяет пространство между и вокруг флекс элементов вдоль поперечной оси контейнера (вертикально). Для горизонтального выравнивания флекс элементов внутри контейнера используйте свойство justify-contentcss3.


Обращаю Ваше внимание на то, что для того, чтобы свойство возможно было применить к контейнеру, необходимо, чтобы он был многострочным (flex-wrapcss3, или flex-flowcss3 со значениями wrap | wrap-reverse). Если элемент не является флекс элементом (не находится внутри родительского элемента, который является блочным, или строчным флекс контейнером), то свойство align-contentcss3 не окажет на такой элемент никакого эффекта.


Схематичное отображение работы свойства align-contentcss3 отображено на следующем изображении:

Схематичное отображение работы CSS свойства align-content

Поддержка браузерами

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
align-content21.028.012.19.0
7.0
-webkit-
11.012.0

CSS синтаксис:

align-content:"stretch | flex-start | flex-end | center | space-between | space-around | initial | inherit;";

JavaScript синтаксис:

object.style.alignContent = "space-between"

Значения свойства

ЗначениеОписание
stretchСтроки внутри флекс контейнера равномерно растягиваются, заполняя свободное пространство.Это значение по умолчанию.
flex-startСтроки внутри флекс контейнера располагаются в начале поперечной оси.
flex-endСтроки внутри флекс контейнера располагаются с конца поперечной оси.
centerСтроки внутри флекс контейнера располагаются по центру контейнера.
space-betweenСтроки внутри флекс контейнера равномерно распределяются, при этом первая строка позиционируются в начале поперечной оси, а последняя строка позиционируется с конца поперечной оси.
space-around

Строки внутри флекс контейнера равномерно распределяются, при этом пространство между двумя соседними строками одинаково, а пустое пространство перед первой строкой и после последней строки равно половине от пространства между соседними строками:

Схематичное отображение работы значения space-around свойства align-content
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства align-content</title>
<style>
* {  /* используем универсальный селектор для выбора всех элементов */
box-sizing: border-box;  /* устанавливаем, что для всех элементов значения ширины и высоту включают в себя содержание элемента, границы (border) и внутренние отступы (padding) */
} 
.container {
display: -webkit-flex;  /* для поддержки ранних версий браузеров */
display: flex;  /* элемент отображается как блочный flex-контейнер */
height: 300px;  /* устанавливаем высоту контейнера */
background: bisque;  /* устанавливаем цвет заднего фона */
-webkit-flex-wrap: wrap;  /* для поддержки ранних версий браузеров */
flex-wrap: wrap;  /* указывает, что флекс элементы внутри контейнера распологаются в несколько горизонтальных рядов (в случае переполнения) */
-webkit-align-content: space-between;  /* для поддержки ранних версий браузеров */
align-content: space-between;  /* строки внутри флекс контейнера равномерно распределяются, при этом первая строка позиционируются в начале поперечной оси, а последняя строка позиционируется с конца поперечной оси */
}
div > div { используем селектор дочерних элементов (форматируем все элементы <div>, вложенные внутрь элементов <div>)
width: 25%; /* устанавливаем ширину блока */
height: 50px;  /* устанавливаем высоту блока */
border: 1px solid orange;  /* устанавливаем сплошную границу 1px оранжевого цвета */
} 
.container:hover {  /* стили при наведении на контейнер */
-webkit-align-content: space-around;  /* для поддержки ранних версий браузеров */
align-content: space-around;  /* строки внутри флекс контейнера равномерно распределяются, при этом пространство между двумя соседними строками одинаково, а пустое пространство перед первой строкой и после последней строки равно половине от пространства между соседними строками */
} 
</style>
</head>
	<body>
		<div class = "container">
			<div>A</div>
			<div>B</div>
			<div>C</div>
			<div>D</div>
			<div>E</div>
			<div>F</div>
			<div>G</div>
		</div>
	</body>
</html>

Результат примера:

Пример использования свойства align-content.
Пример использования свойства align-content.
CSS свойства