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

Описание

Синтаксис

Подробности

Пример

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

Свойство padding-block-end

Свойство place-content

Свойство border-bottom

Свойство text-align-last