Свойство justify-content

Описание

Определяет, как браузер распределяет пространство вокруг флекс - элементов вдоль главной оси контейнера.

Синтаксис

justify-content: flex-start | flex-end | center | space-between |                  space-around | space-evenly;
Значение Описание
flex-start Флексы прижаты к началу строки.
flex-end Флексы прижаты к концу строки.
center Флексы выравниваются по центру строки.
space-between Флексы равномерно распределяются по всей строке. Первый и последний элемент прижимаются к соответствующим краям контейнера.
space-around Флексы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами.
space-evenly Флексы распределяются так, что расстояние между любыми двумя соседними элементами, а также перед первым и после последнего, было одинаковым.

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
 #test {
 display: flex;
 justify-content: center;
 }
 #item-t {
 width: 45px;
 height: 100px;
 background-color: rgb(127, 174, 255);
 border: 3px solid black;
 margin: 5px;
 text-align: center;
 color: black;
 }
 </style>
 <div id='test'>
 <div id='item-t'><p>1</p></div>
 <div id='item-t'><p>2</p></div>
 <div id='item-t'><p>3</p></div>
 <div id='item-t'><p>4</p></div>
 </div>
</body>
</html>

1

2

3

4

Читайте также

Стили поля с неверными значениями, выходящими из заданного диапазона

Применяется к полям форм, у которых введённое пользователем значение выходит из заданного диапазо...

Стили к элементам указанного типа

Псевдокласс :nth-of-type используется для добавления стиля к элементам на основе нумерации в дере...

Свойство gap

Устанавливает промежутки между строками и столбцами сетки. Это сокращение для row-gap и column-gap.

Свойство background-size

Масштабирует фоновое изображение, согласно заданным размерам.

Свойство grid-column-gap

Определяет размер ширины линий. Вы можете думать об этом, как о настройке ширины отступов между с...