W3Docs

Тема

Русский

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

Свойство justify-items задаёт значение justify-self по умолчанию для всех дочерних блоков, предоставляя им общий способ выравнивания каждого блока вдоль соответствующей оси. В отличие от justify-self, которое применяется к отдельным элементам, justify-items действует на весь контейнер.

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

  • абсолютно позиционированным элементам
  • контейнерам grid

Примечание: justify-items в первую очередь влияет на контейнеры grid и абсолютно позиционированные элементы. В макетах flexbox это свойство игнорируется.

Начальное значениеauto
Применяется кКонтейнерам grid и абсолютно позиционированным элементам.
НаследуетсяНет.
АнимируемоеНет.
ВерсияCSS3
Синтаксис DOMobject.style.justifyItems = "start";

Синтаксис ​

Значения CSS justify-items

css
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;

Пример: justify-items со значением "start" ​

Пример кода CSS justify-items

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 5px;
        justify-items: start;
        background-color: #cccccc;
      }
      #example > div {
        padding: 10px;
        font-size: 20px;
        color: white;
        width: 100px;
        height: 50px;
      }
      .one {
        background-color: #1c87c9;
      }
      .two {
        background-color: #8ebf42;
      }
      .three {
        background-color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-items property example</h2>
    <div id="example">
      <div class="one">1</div>
      <div class="two">2</div>
      <div class="three">3</div>
    </div>
  </body>
</html>
Try it Yourself »

Результат ​

CSS justify-items start

Пример: justify-items со значением "center" ​

Пример justify-items center

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 5px;
        justify-items: center;
        background-color: #cccccc;
      }
      #example > div {
        padding: 10px;
        font-size: 20px;
        color: white;
        width: 100px;
        height: 50px;
      }
      .one {
        background-color: #1c87c9;
      }
      .two {
        background-color: #8ebf42;
      }
      .three {
        background-color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-items property example</h2>
    <div id="example">
      <div class="one">1</div>
      <div class="two">2</div>
      <div class="three">3</div>
    </div>
  </body>
</html>
Try it Yourself »

Пример: justify-items со значением "first-baseline" ​

Пример свойства justify-items со значением "first-baseline":

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        display: grid;
        padding-top: 10px;
        height: 250px;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
        background: #ccc;
        justify-items: first-baseline;
      }
      .item {
        width: 50%;
        height: 50%;
        text-align: center;
      }
      .item1 {
        background: red;
      }
      .item2 {
        background: blue;
      }
      .item3 {
        background: green;
      }
    </style>
  </head>
  <body>
    <h2>Justify-items property example</h2>
    <div class="container">
      <div class="item1 item">1</div>
      <div class="item2 item">2</div>
      <div class="item3 item">3</div>
    </div>
  </body>
</html>
Try it Yourself »

Пример: justify-items со значением "self-end" ​

Пример свойства justify-items со значением "self-end":

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 5px;
        justify-items: self-end;
        background-color: #cccccc;
      }
      #example > div {
        padding: 10px;
        font-size: 20px;
        color: white;
        width: 100px;
        height: 50px;
      }
      .one {
        background-color: #1c87c9;
      }
      .two {
        background-color: #8ebf42;
      }
      .three {
        background-color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-items property example</h2>
    <div id="example">
      <div class="one">1</div>
      <div class="two">2</div>
      <div class="three">3</div>
    </div>
  </body>
</html>
Try it Yourself »

Значения ​

ЗначениеОписание
autoЕсли у блока нет родителя или он абсолютно позиционирован, значение auto соответствует normal.
normalЭффект зависит от режима макета: <br>• Блочные макеты: ведёт себя как start. <br>• Абсолютно позиционированные макеты: ведёт себя как start для заменяемых элементов и как stretch для остальных. <br>• Ячейки таблицы: игнорируется. <br>• Flexbox: игнорируется. <br>• Grid-макеты: ведёт себя как 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Устаревшее ключевое слово для обратной совместимости. Соотносится с flex-start, flex-end или center в зависимости от режима макета. Не влияет на наследование.
initialЗаставляет свойство использовать значение по умолчанию.
inheritНаследует свойство от родительского элемента.

Практика ​

Что делает свойство CSS 'justify-items'?

Считаете ли это полезным?

Предпросмотр dual-run — сравните с маршрутами Symfony на продакшене.