Атрибут justify-items
=====================

Атрибут CSS **`justify-items`** определяет атрибут по умолчанию `justify-self` (en-US) для всех элементов блока, предоставляя всем им способ выравнивания по умолчанию каждого блока вдоль соответствующей оси.

Интерактивный пример
--------------------

Эффект этого атрибута зависит от выбранного способа разметки:

* Используя разметку с помощью блоков (block-level layout), элементы выравниваются внутри содержащего их блока по внутренней оси.
* Для абсолютно позиционированых элементов выравнивание происходит внутри содержащего их блока по внутренней оси, учитывая значения смещения сверху, слева, снизу и справа.
* Используя разметку с помощью ячеек таблицы (table cell layout), этот атрибут игнорируется (подробнее (en-US) о выравнивании в блочной структуре, абсолютном позиционировании и о табличной разметке).
* Используя разметку с помощью гибких или адаптивных блоков (flexbox layout), этот атрибут игнорируется (подробнее о выравнивании в разметке flexbox).
* Используя разметку с помощью сетки (grid layout), элементы выравниваются внутри их сеточной области по внутренней оси (подробнее (en-US) о выравнивании в разметке grid).
Синтаксис
---------


```css
/\* Ключевые слова \*/
justify-items: auto;
justify-items: normal;
justify-items: stretch;

/\* Выравнивание положения \*/
justify-items: center; /\* Выровнять элементы по центру \*/
justify-items: start; /\* Выровнять элементы в начале \*/
justify-items: end; /\* Выровнять элементы в конце \*/
justify-items: flex-start; /\* Эквивалентно 'start'. Обратите внимание, что justify-items игнорируется в разметке Flexbox. \*/
justify-items: flex-end; /\* Эквивалентно 'end'. Обратите внимание, что justify-items игнорируется в разметке Flexbox. \*/
justify-items: self-start;
justify-items: self-end;
justify-items: left; /\* Выровнять элементы по левому краю \*/
justify-items: right; /\* Выровнять элементы по правому краю \*/

/\* Исходное выравнивание \*/
justify-items: baseline;
justify-items: first baseline;
justify-items: last baseline;

/\* Выравнивание при переполнении (только для выравнивания положения) \*/
justify-items: safe center;
justify-items: unsafe center;

/\* Унаследованное выравнивание \*/
justify-items: legacy right;
justify-items: legacy left;
justify-items: legacy center;

/\* Глобальные значения \*/
justify-items: inherit;
justify-items: initial;
justify-items: unset;
```


Этот атрибут может принимать одну из четырёх различных форм:

* Основные ключевые слова: одно из значений ключевого слова: `normal`, `auto`, или `stretch`.
* Исходное выравнивание: ключевое слово `baseline` плюс одно ключевое слово по выбору: `first` или `last`.
* Выравнивание положения: одно из ключевых слов: `center`, `start`, `end`, `flex-start`, `flex-end`, `self-start`, `self-end`, `left`, или `right`. Плюс ключевое слово по выбору: `safe` или `unsafe`.
* Унаследованное выравнивание: ключевое слово `legacy`, за которым следует ключевое слово `left` или `right`.
### Значения

`auto`

Используемое значение является значением атрибута `justify-items` родительского блока. Если у блока нет родительского элемента или он абсолютно спозиционирован, то в этих случаях значение `auto` представляет собой значение `normal`.

`normal`

Эффект этого атрибута зависит от выбранного способа разметки:

* Используя разметку с помощью блоков (block-level layout), это ключевое слово является синонимом слова `start`
* Для разметки с абсолютно позиционированный элементами, это ключевое слово ведёт себя как `start` на заменённых блоках с абсолютным позиционированием и как `stretch` на всех остальных блоках с абсолютным позиционированием
* Используя разметку с помощью ячеек таблицы (table cell layout), это ключевое слово не имеет значения, так как этот атрибут *игнорируется*
* Используя разметку с помощью гибких блоков (flexbox layout), это ключевое слово не имеет значения, так как этот атрибут *игнорируется*
* Используя разметку с помощью сетки (grid layout), это ключевое слово приводит к поведению, аналогичному поведению `stretch`, за исключением блоков с соотношением сторон или внутренних размеров, где оно ведёт себя как `start`

`start`

Элемент выравнивается на одном уровне друг с другом по направлению к начальной границе контейнера выравнивания по соответствующей оси.

`end`

Элемент выравнивается на одном уровне друг с другом по направлению к конечной границе контейнера выравнивания по соответствующей оси.

`flex-start`

Для элементов, которые не являются потомками flex контейнера, это значение обрабатывается как `start`.

`flex-end`

Для элементов, которые не являются потомками flex контейнера, это значение обрабатывается как `end`.

`self-start`

Элемент выравнивается на одном уровне с границей контейнера выравнивания начальной стороны элемента по соответствующей оси.

`self-end`

Элемент выравнивается на одном уровне с границей контейнера выравнивания конечной стороны элемента по соответствующей оси.

`center`

Элементы выравниваются на одном уровне друг с другом по направлению к центру контейнера выравнивания.

`left`

Элементы выравниваются на одном уровне друг с другом по направлению к левой границе контейнера выравнивания. Если ось свойства не параллельна внутренней оси, это значение ведёт себя как `start`.

`right`

Элементы выравниваются на одном уровне друг с другом по направлению к правой границе контейнера выравнивания по соответствующей оси. Если ось свойства не параллельна внутренней оси, это значение ведёт себя как `start`.

`baseline first baseline`
`last baseline`

Определяет участие значений `first baseline` или `last baseline` в исходном выравнивании. Значение `baseline` выравнивает первый или последний блок набора в соответствии с исходным выравниванием в общем первом или последнем наборе всех блоков в его совместной группе исходного выравнивания.Возвратным выравниванием для `first baseline` является значение `start`, для `last baseline` является значение `end`.

`stretch`

Если объединённый размер элементов меньше, чем размер контейнера выравнивания, то размер любого элемента со значением `auto` увеличивается одинаково (не пропорционально), но при этом соблюдаются ограничения, налагаемые `max-height`/`max-width` (или эквивалентной функциональностью), таким образом, что объединённый размер точно заполняет контейнер выравнивания.

`safe`

Если размер элемента выходит за пределы контейнера выравнивания, элемент выравнивается, как если бы режим выравнивания имел значение `start`.

`unsafe`

Независимо от относительных размеров элемента и контейнера выравнивания, данное значение выравнивания учитывается.

`legacy`

Создаёт значение, унаследованное потомками блока. Обратите внимание, что если потомок имеет значение `justify-self: auto`, ключевое слово `legacy` не учитывается по нисходящему наследованию. Действует только со значением `left`, `right`, или `center`, связанным с ним.

### Формальный синтаксис
```

justify-items =   
  normal                                              | (en-US)  
  stretch                                             | (en-US)  
  <baseline-position>                                 | (en-US)  
  <overflow-position>? (en-US) [ (en-US) <self-position> | (en-US) left | (en-US) right ] (en-US)  | (en-US)  
  legacy                                              | (en-US)  
  legacy && (en-US) [ (en-US) left | (en-US) right | (en-US) center ] (en-US)                 | (en-US)  
  anchor-center                                         
  
<baseline-position> =   
  [ (en-US) first | (en-US) last ] (en-US)? (en-US)  && (en-US)  
  baseline             
  
<overflow-position> =   
  unsafe  | (en-US)  
  safe      
  
<self-position> =   
  center      | (en-US)  
  start       | (en-US)  
  end         | (en-US)  
  self-start  | (en-US)  
  self-end    | (en-US)  
  flex-start  | (en-US)  
  flex-end      
  
```

Спецификации
------------

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # justify-items-property |

|  |  |
| --- | --- |
| Начальное значение | `legacy` |
| Применяется к | все элементы |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | discrete |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* CSS Руководство по Grid: *Выравнивание блоков в разметке Grid*
* CSS Выравнивание блоков
* Сокращённый атрибут `place-items`
* Атрибут `justify-self` (en-US)
* Атрибут `align-items`