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

CSS свойства

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

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

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


При работе с флекс элементами обратите внимание на то, что свойство align-contentcss3 возможно применить только к многострочным флекс контейнерам (flex-wrapcss3, или flex-flowcss3 со значениями wrap | wrap-reverse).

Если элемент не является флекс элементом, или элементом сетки макета (не находится внутри родительского элемента, который является блочным, или строчным флекс, или grid-контейнером), то свойство align-contentcss3 не окажет на такой элемент никакого эффекта.

Более подробную информацию о работе с флекс элементами вы можете получить в статье учебника CSS "Верстка по Flexbox (работа с контейнерами)".


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

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

* - для элементов сетки макета (grid-элементы) допускается использование сокращенных значений start и end, для флекс элементов необходимо использовать полные значения flex-start и flex-end.

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

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
align-contentcss3 (flex-контейнеры)21.020.012.19.0
7.0
-webkit-
11.012.0
align-contentcss3 (grid-контейнеры) 54.0*52.044.010.310.0*
-ms-
16.0
12.0
-ms-

CSS синтаксис:

/* flex-контейнеры */
align-content: "stretch | flex-start | flex-end | center | space-between | space-around | space-evenly | initial | inherit";

/* grid-контейнеры */
align-content: "stretch | start | end | center | space-between | space-around | space-evenly | initial | inherit";

JavaScript синтаксис:

object.style.alignContent = "space-between"

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

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

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

Схематичное отображение работы значения space-around свойства align-content
space-evenly

Размещает четный промежуток между каждой строкой, включая верхний и нижний край контейнера:

Схематичное отображение работы значения space-evenly свойства 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>H</div>
		</div>
	</body>
</html>

В этом примере мы разместили блочный флекс контейнер, внутри которого мы разместили восемь элементов <div>, которым задали ширину равную 25% от ширины родительского элемента.

С помощью свойства flex-wrapcss3 указали, что флекс элементы внутри контейнера распологаются в несколько горизонтальных рядов (в случае переполнения).

С помощью свойства align-contentcss3 указали, что строки внутри флекс контейнера равномерно распределяются, при этом первая строка позиционируются в начале поперечной оси, а последняя строка позиционируется с конца поперечной оси. Кроме того, с помощью псевдокласса :hover указали, что при наведении на наш контейнер значение свойства align-contentcss3 изменяется на space-around, в результате чего строки внутри флекс контейнера равномерно распределяются, при этом пространство между двумя соседними строками одинаково, а пустое пространство перед первой строкой и после последней строки равно половине от пространства между соседними строками.

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

Пример использования свойства align-content (для флекс контейнера).
Пример использования свойства align-content (для флекс контейнера).

В следующем примере мы рассмотрим использование свойства align-contentcss3 для grid-контейнеров:

<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства align-content (для grid-контейнера)</title>
<style>
body {
  display: flex;  /* элемент отображается как блочный flex-контейнер */
  flex-wrap: wrap;  /* указывает, что флекс элементы внутри контейнера распологаются в несколько горизонтальных рядов (в случае переполнения) */
} 
.grid-container,
.grid-container2,
.grid-container3,
.grid-container4,
.grid-container5,
.grid-container6 {
    display: inline-grid; /* элемент отображается как строчный grid-контейнер */
    grid: auto / repeat(4, 1fr);  /* определяем количество и ширину строк и столбцов в макете сетки */
    height: 120px;  /* устанавливаем высоту контейнера */
    width: 30%;  /* устанавливаем ширину контейнера */
    background: rgb(0,150,208);  /* устанавливаем цвет заднего фона */
    margin: 10px;  /* устанавливаем внешние отступы */
    text-align: center;
}
div > div { используем селектор дочерних элементов (форматируем все элементы <div>, вложенные внутрь элементов <div>)
    background: rgb(241,101,41);  /* устанавливаем цвет заднего фона */
    border: 1px solid;  /* устанавливаем сплошную границу размером 1 пиксель */
} 
.grid-container {
    align-content: stretch;  /* строки внутри контейнера равномерно растягиваются, заполняя свободное пространство */
}
.grid-container2 {
    align-content: start;  /* строки внутри контейнера располагаются у  начального края сетки grid-контейнера */
}
.grid-container3 {
    align-content: end;  /* строки внутри контейнера располагаются по краю сетки grid-контейнера */
}
.grid-container4 {
    align-content: center;  /* cтроки внутри контейнера располагаются по его центру */
}
.grid-container5 {
    align-content: space-between;  /* cтроки внутри контейнера равномерно распределяются, при этом первая строка позиционируются в начале поперечной оси, а последняя строка позиционируется с конца поперечной оси */
}
.grid-container6 {
    align-content: space-around;  /* строки внутри контейнера равномерно распределяются, при этом пространство между двумя соседними строками одинаково, а пустое пространство перед первой строкой и после последней строки равно половине от пространства между соседними строками */
}
</style>
</head>
	<body>
		<div class = "grid-container"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div><div>G</div><div>H</div></div>
		<div class = "grid-container2"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div><div>G</div><div>H</div></div>
		<div class = "grid-container3"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div><div>G</div><div>H</div></div>
		<div class = "grid-container4"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div><div>G</div><div>H</div></div>
		<div class = "grid-container5"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div><div>G</div><div>H</div></div>
		<div class = "grid-container6"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div><div>G</div><div>H</div></div>
	</body>
</html>

В этом примере мы разместили шесть строчных grid-контейнеров шириной 30% от родительского элемента <body> внутри которых мы разместили по восемь элементов <div>. Для элемента <body> мы указали, что он является многострочным флекс контейнером.

С помощью свойства grid для всех строчных grid-контейнеров мы указываем значение auto, которое определяет, что размер строк определяется размером контейнера и размером содержимого элементов в строке. Через косую черту с помощью функциональной нотации repeat() мы размещаем в макете сетки по четыре столбца в каждом контейнера, используя допустимое значение длины в "гибких" единицах измерения fr. В этом случае каждый столбец занимает часть оставшегося пространства в контейнере сетки макета пропорционально заданному коэффициенту.

С помощью свойства align-contentcss3 мы для каждого строчного grid-контейнера определяем как происходит выравнивание всего макета сетки по оси столбца:

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

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