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	Значение элемента наследуется от родительского элемента.