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

CSS свойства

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

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

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


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

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

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


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

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

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

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

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
justify-contentcss3 (флекс элементы)21.020.012.19.0
7.0
-webkit-
11.012.0
justify-contentcss3 (элементы сетки) 54.0*52.044.010.310.0*
-ms-
16.0
12.0
-ms-

CSS синтаксис:

/* флекс контейнер */
justify-content:"flex-start | flex-end | center | space-between | space-around | space-evenly | initial | inherit";

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

JavaScript синтаксис:

object.style.justifyContent = "space-between"

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

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

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

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

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

Схематичное отображение работы значения space-evenly свойства 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;  /* флекс элементы равномерно распределяются по всей строке, при этом пустое пространство между первым и после последнего флекс элемента равно половине между соседними элементами в контейнере */
}
.container6 {
    display: -webkit-flex;  /* для поддержки ранних версий браузеров */
    display: flex;  /* элемент отображается как блочный flex-контейнер */
    -webkit-justify-content: space-evenly;  /* для поддержки ранних версий браузеров */
    justify-content: space-evenly;  /* размещает четный промежуток между каждым элементом, включая начальний и дальний конец контейнера */
}
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>	
    <h3>justify-content: space-evenly</h3>
		<div class = "container6">
			<div>A</div>
			<div>B</div>
			<div>C</div>
		</div>	
	</body>
</html>

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

С использованием селектора класса указали для каждого флекс контейнера свое значение свойства align-contentcss3:

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

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

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

<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства justify-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(3, 40px);  /* определяем количество и ширину строк и столбцов в макете сетки */
    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 {
    justify-content: start;  /* элементы позиционируются в начале контейнера */
}
.grid-container2 {
    justify-content: end;  /* элементы позиционируются в конце контейнера */
}
.grid-container3 {
    justify-content: center;  /* элементы позиционируются в центре контейнера */
}
.grid-container4 {
    justify-content: space-between;  /* элементы равномерно распределяются по всей строке, при этом первый элемент позиционируются в начале контейнера, а последний элемент позиционируется в конце контейнера */
}
.grid-container5 {
    justify-content: space-around;  /* элементы равномерно распределяются по всей строке, при этом пустое пространство между первым и после последнего флекс элемента равно половине между соседними элементами в контейнере */
}
.grid-container6 {
    justify-content: space-evenly;  /* размещает четный промежуток между каждым элементом, включая начальний и дальний конец контейнера */
}
</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>
		<div class = "grid-container2"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</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>
		<div class = "grid-container4"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</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>
    <div class = "grid-container6"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div></div>
	</body>
</html>

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

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

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

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

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