Свойство 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

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

Свойство border-color

Позволяет задать цвет границы сразу для всех сторон элемента или только для указанных.

Стиль поля формы доступным для редактирования

Применяется к полям формы, доступных для изменения. Псевдокласс :read-write является противополож...

Правило @document

@document устанавливает стилевые правила на основе адреса документа. К примеру, если адреса мобил...

Стиль посещенных ссылок

Псевдокласс :visited применяется к ссылкам, уже посещённым пользователем, и задаёт для них стилев...

Селекторы атрибутов со значениями в неопределенном месте

Возможны варианты, когда стиль следует применить к тегу с определённым атрибутом, когда частью ег...