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

CSS свойства

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

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


Обращаю Ваше внимание, если элемент не является флекс элементом (не находится внутри родительского элемента, который является блочным, или строчным флекс контейнером), то свойство justify-contentcss3 не окажет на такой элемент никакого эффекта.

Это свойство может использоваться в тех случаях, когда для флекс элементов явно указана ширина, и если ширина всех флекс элементов внутри контейнера не вызывает переполнение контейнера, иначе свойство justify-contentcss3 не окажет на такой элемент никакого эффекта.


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

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

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

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
justify-contentcss329.0
21.0
-webkit-
28.0
18.0
-moz-
17.09.0
6.1
-webkit-
11.012.0

CSS синтаксис:

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

JavaScript синтаксис:

object.style.justifyContent = "flex-start"

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

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

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

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

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

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

<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства justify-content</title>
<style> 
.container {
display: -webkit-flex;  /* для поддержки ранних версий браузеров */
display: flex;  /* элемент отображается как блочный flex-контейнер */
-webkit-justify-content: flex-start;  /* для поддержки ранних версий браузеров */
justify-content: flex-start;  /* флекс элементы позиционируются в начале контейнера (это значение по умолчанию) */
}
.container2 {
display: -webkit-flex;  /* для поддержки ранних версий браузеров */
display: flex;  /* элемент отображается как блочный flex-контейнер */
-webkit-justify-content: flex-end;  /* для поддержки ранних версий браузеров */
justify-content: flex-end;  /* флекс элементы позиционируются в конце контейнера */
}
.container3 {
display: -webkit-flex;  /* для поддержки ранних версий браузеров */
display: flex;  /* элемент отображается как блочный flex-контейнер */
-webkit-justify-content: center;  /* для поддержки ранних версий браузеров */
justify-content: center;  /* флекс элементы позиционируются в центре контейнера */
}
.container4 {
display: -webkit-flex;  /* для поддержки ранних версий браузеров */
display: flex;  /* элемент отображается как блочный flex-контейнер */
-webkit-justify-content: space-between;  /* для поддержки ранних версий браузеров */
justify-content: space-between;  /* флекс элементы равномерно распределяются по всей строке, при этом первый флекс элемент позиционируются в начале контейнера, а последний флекс элемент позиционируется в конце контейнера */
}
.container5 {
display: -webkit-flex;  /* для поддержки ранних версий браузеров */
display: flex;  /* элемент отображается как блочный flex-контейнер */
-webkit-justify-content: space-around;  /* для поддержки ранних версий браузеров */
justify-content: space-around;  /* флекс элементы равномерно распределяются по всей строке, при этом пустое пространство между первым и после последнего флекс элемента равно половине между соседними элементами в контейнере */
}
div > div { используем селектор дочерних элементов (форматируем все элементы <div>, вложенные внутрь элементов <div>)
width: 50px; /* устанавливаем ширину блока */
height: 50px;  /* устанавливаем высоту блока */
border: 1px solid orange;  /* устанавливаем сплошную границу 1px оранжевого цвета */
} 
</style>
</head>
	<body>
		<h3>justify-content: flex-start;</h3>
		<div class = "container">
			<div>A</div>
			<div>B</div>
			<div>C</div>
		</div>
		<h3>justify-content: flex-end;</h3>
		<div class = "container2">
			<div>A</div>
			<div>B</div>
			<div>C</div>
		</div>
		<h3>justify-content: center;</h3>
		<div class = "container3">
			<div>A</div>
			<div>B</div>
			<div>C</div>
		</div>
		<h3>justify-content: space-between;</h3>
		<div class = "container4">
			<div>A</div>
			<div>B</div>
			<div>C</div>
		</div>
		<h3>justify-content: space-around;</h3>
		<div class = "container5">
			<div>A</div>
			<div>B</div>
			<div>C</div>
		</div>	
	</body>
</html>

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

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