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

Свойство justify-items задает выравнивание по умолчанию для всех дочерних блоков по необходимой оси.

Свойствоjustify-items стало использоваться при введении Flexbox и макетов на основе сетки, но оно также применяется к:

  • абсолютно позиционированным блокам
  • блочным элементам
  • статическим положениям абсолютно позиционированных блоков
  • ячейкам таблицы
Значение по умолчанию legacy
Применяется Ко всем элементам.
Наследуется Нет
Анимируемое Нет.
Версия CSS3
DOM синтаксис object.style.justifyItems = "start";

Синтаксис

justify-items: auto | normal | start | end | flex-start | flex-end | self-start | self-end | center | left | right | baseline | first baseline | last baseline | stretch | safe | unsafe | legacy | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      #example {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      grid-gap: 5px;
      justify-items: start;
      background-color: #ccc;
      }
      #example > div {
      padding: 10px;
      font-size: 20px;
      color: white;
      width: 100px;
      height:50px;
      }
      .one {
      background-color: #1c87c9;
      }
      .two {
      background-color: #8ebf42;
      }
      .three {
      background-color: #666;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства justify-items</h2>
    <div id="example">
      <div class="one">1</div>
      <div class="two">2</div>
      <div class="three">3</div>
    </div>
  </body>
</html>

Пример со значением "center":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      #example {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      grid-gap: 5px;
      justify-items: center;
      background-color: #ccc;
      }
      #example > div {
      padding: 10px;
      font-size: 20px;
      color: white;
      width: 100px;
      height:50px;
      }
      .one {
      background-color: #1c87c9;
      }
      .two {
      background-color: #8ebf42;
      }
      .three {
      background-color: #666;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства justify-items</h2>
    <div id="example">
      <div class="one">1</div>
      <div class="two">2</div>
      <div class="three">3</div>
    </div>
  </body>
</html>

Значения

Значение Описание
auto Если блок не имеет родительского элемента или абсолютно позиционирован, auto соответствует значению normal.
normal Эффект значения зависит от способа разметки:
  • В блочной верстке значение normal работает подобно start.
  • В абсолютно позиционированном макете это значение работает также, как start для заменяемых абсолютно позиционированных блоков, или как stretch для всех остальных абсолютно позиционированных блоков.
  • В макетах ячеек таблицы данное свойство игнорируется.
  • В гибких макетах данное свойство игнорируется.
  • В макетах на основе сетки это значение работает как stretch, кроме блоков с коэффициентом пропорциональности или встроенными размерами, в случае которых оно работает как start.
start Все элементы расположены по начальному (левому) краю контейнера.
end Все элементы расположены по конечному (правому) краю контейнера.
flex-start Элементы расположены в начале контейнера.
flex-end Элементы расположены в конце контейнера.
self-start Элемент может сам располагаться на краю контейнера в зависимости от его начального края.
self-end Элемент может сам располагаться на краю контейнера в зависимости от его конечного края.
center Элементы расположены в центре контейнера.
left Элементы расположены по левому краю контейнера. Если ось свойства не параллельна к строчной оси, значение работает как end.
right Элементы расположены по правому краю контейнера. Если ось свойства не параллельна к строчной оси, значение работает как start.
baseline first-baseline last-baseline Выравнивает элементы по их базовой линии.
stretch Растягивает элементы по горизонтали и по вертикали, чтобы они поместились в контейнере.
safe Если размер элемента выходит за границы контейнера, элемент выравнивается как при значении start.
unsafe Независимо от размера элемента и контейнера, значение выравнивания применяется.
legacy Значение наследуется от блочных потомков.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

chrome edge firefox safari opera
29.0 21.0
-webkit-
11+ 28.0 18.0
-moz-
9.0 6.1
-webkit-
17+

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

What does the CSS property 'justify-items' do?
Считаете ли это полезным?