w3docs logo

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

Свойство justify-content выравнивает элементы, когда они не используют все доступное пространство по горизонтали. Оно является подсвойством модуля макет гибкого контейнера. Свойство контролирует выравнивание элементов, когда они выходят за границы.

Свойство justify-content должно быть использовано вместе со свойством display, которое имеет значение "flex". Для вертикального выравнивания элементов нужно использовать свойство align-items.
Значение по умолчанию flex-start
Применяется К флекс-контейнерам
Наследуется Нет
Анимируемое Нет
Версия CSS3
DOM синтаксис object.style.justifyContent = "center";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      .center {
      width: 400px;
      height: 150px;
      border: 1px solid #666;
      display: -webkit-flex; /* Safari */
      -webkit-justify-content: center; /* Safari 6.1+ */
      display: flex;
      justify-content: center;
      }
      .center div {
      width: 70px;
      height: 70px;
      background-color: #ccc;
      border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства justify-content</h2>
    <p>Установлено свойство "justify-content: center":</p>
    <div class="center">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

Пример со значением "flex-start":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      .start {
      width: 400px;
      height: 150px;
      border: 1px solid #666;
      display: -webkit-flex; /* Safari */
      -webkit-justify-content: flex-start; /* Safari 6.1+ */
      display: flex;
      justify-content: flex-start;
      }
      .start div {
      width: 70px;
      height: 70px;
      background-color: #ccc;
      border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства justify-content</h2>
    <p>Установлено свойство "justify-content: flex-start":</p>
    <div class="start">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
    </div>
  </body>
</html>

Пример со значением "flex-end":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      .end {
      width: 400px;
      height: 150px;
      border: 1px solid #666;
      display: -webkit-flex; /* Safari */
      -webkit-justify-content: flex-end; /* Safari 6.1+ */
      display: flex;
      justify-content: flex-end;
      }
      .end div {
      width: 70px;
      height: 70px;
      background-color: #ccc;
      border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства justify-content</h2>
    <p>Установлено свойство "justify-content: flex-end":</p>
    <div class="end">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
    </div>
  </body>
</html>

Пример, где установлено значение "space-between" для свойства justify-content:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      .space-between {
      width: 400px;
      height: 150px;
      border: 1px solid #666;
      display: -webkit-flex; /* Safari */
      -webkit-justify-content: space-between; /* Safari 6.1+ */
      display: flex;
      justify-content: space-between;
      }
      .space-between div {
      width: 70px;
      height: 70px;
      background-color: #ccc;
      border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства justify-content</h2>
    <p>Установлено свойство "justify-content: space-between":</p>
    <div class="space-between">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
    </div>
  </body>
</html>

Пример со значением "space-around":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      .space-around {
      width: 400px;
      height: 150px;
      border: 1px solid #666;
      display: -webkit-flex; /* Safari */
      -webkit-justify-content: space-around; /* Safari 6.1+ */
      display: flex;
      justify-content: space-around;
      }
      .space-around div {
      width: 70px;
      height: 70px;
      background-color: #ccc;
      border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства justify-content</h2>
    <p>Установлено свойство "justify-content: space-around":</p>
    <div class="space-around">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
    </div>
  </body>
</html>

Значения

Значение Описание
flex-start Элементы позиционируются от начала контейнера.
flex-end Элементы позиционируются от конца контейнера.
center Элементы выравниваются по центру контейнера.
space-around Элементы равномерно распределяются по всей строке. Есть пространство перед первым элементом, а также после последнего элемента.
space-between Между элементами есть равное пространство..
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

chrome firefox safari opera
29.0+
21-28 -webkit- 		28.0+ 9.0+
6.1-8.0 -webkit- 		12.1+

Практикуйте свои знания

Какие значения имеет свойство justify-content в CSS?
Считаете ли это полезным?