Синтаксис
Атрибут CSS justify-items
определяет атрибут по умолчанию justify-self
для всех элементов блока, предоставляя всем им способ выравнивания по умолчанию каждого блока вдоль соответствующей оси.
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, создайте копию https://github.com/mdn/interactive-examples и отправьте нам запрос на включение изменений.
Эффект этого атрибута зависит от выбранного способа разметки:
- Используя разметку с помощью блоков (block-level layout), элементы выравниваются внутри содержащего их блока по внутренней оси.
- Для абсолютно позиционированых элементов выравнивание происходит внутри содержащего их блока по внутренней оси, учитывая значения смещения сверху, слева, снизу и справа.
- Используя разметку с помощью ячеек таблицы (table cell layout), этот атрибут игнорируется (подробнее о выравнивании в блочной структуре, абсолютном позиционировании и о табличной разметке).
- Используя разметку с помощью гибких или адаптивных блоков (flexbox layout), этот атрибут игнорируется (подробнее о выравнивании в разметке flexbox).
- Используя разметку с помощью сетки (grid layout), элементы выравниваются внутри их сеточной области по внутренней оси (подробнее о выравнивании в разметке grid).
/* Основные ключевые слова */
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
- Используя разметку с помощью блоков (block-level layout), это ключевое слово является синонимом слова
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
, связанным с ним.
Формальный синтаксис
normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ]где
<baseline-position> = [ first | last ]? baseline
<overflow-position> = unsafe | safe
<self-position> = center | start | end | self-start | self-end | flex-start | flex-end
Спецификации
Спецификация | Статус | Комментарий |
---|---|---|
CSS Box Alignment Module Level 3 Определение 'justify-items' в этой спецификации. |
Рабочий черновик | Первоначальное определение |
Начальное значение | legacy |
---|---|
Применяется к | все элементы |
Наследуется | нет |
Обработка значения | как указано |
Animation type | discrete |
Поддержка браузерами
Поддержка в разметке Flex
Поддержка в разметке Grid
Смотрите также
- CSS Руководство по Grid: Выравнивание блоков в разметке Grid
- CSS Выравнивание блоков
- Сокращенный атрибут
place-items
- Атрибут
justify-self
- Атрибут
align-items