Обосновать-пункты - CSS-хитрости

Anonim

justify-itemsСвойство является суб-свойство CSS Box Выравнивание модулей , которые в основном контролирует выравнивание элементов сетки в пределах своей области.

.element ( justify-items: center; )

justify-itemsвыравнивает элементы сетки по оси строк (встроенной). В частности, это свойство позволяет вам устанавливать выравнивание для элементов внутри контейнера сетки (не самой сетки) в определенном положении (например start, centerи end) или с поведением (например, autoили stretch).

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

.grid ( display: grid; justify-items: center; ) .grid-item ( justify-self: start; )

Синтаксис

justify-items: normal | stretch | | ? ( | left | right ) | legacy | legacy && ( left | right | center )
  • Первоначальный значение: legacy
  • Применимо к: всем элементам
  • Унаследовано: нет
  • Расчетное значение: как указано
  • Тип анимации: дискретная

Значения

/* Basic keyword values */ justify-items: auto; justify-items: normal; justify-items: stretch; /* Baseline alignment */ justify-items: baseline; justify-items: first baseline; justify-items: last baseline; /* Positional alignment */ justify-items: center; justify-items: start; justify-items: end; justify-items: flex-start; justify-items: flex-end; justify-items: self-start; justify-items: self-end; justify-items: left; justify-items: right; /* Overflow alignment */ /* Used as an optional second value for positional alignment */ justify-items: safe; justify-items: unsafe; /* Legacy */ justify-items: legacy center; justify-items: legacy left; justify-items: legacy right; /* Global values */ justify-items: inherit; justify-items: initial; justify-items: unset;

Основные значения ключевых слов

  • stretch: Значение по умолчанию. Выравнивает элементы по всей ширине ячейки элемента сетки
  • auto: то же, что и значение justify-itemsв родительском.
  • normal: Хотя мы видим, что justify-itemsчаще всего используется в макете сетки, технически он подходит для любого выравнивания поля и normalозначает разные вещи в разном контексте макета, в том числе:
    • блочные макеты ( start)
    • макеты сетки stretch
    • flexbox (игнорируется)
    • ячейки таблицы (игнорируются)
    • макеты с абсолютным позиционированием ( start)
    • абсолютно позиционированные боксы ( stretch)
    • заменены абсолютно позиционированные боксы ( start)
.container ( justify-items: stretch; )

Базовые значения выравнивания

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

.container ( justify-items: baseline; )
  • Выравнивания запасного варианта для first baselineэто safe start.
  • Выравнивания запасного варианта для last baselineэто safe end.
  • baselineсоответствует first baselineпри использовании отдельно

В демонстрации ниже (лучше всего просматриваемой в Firefox) мы видим, как элементы выравниваются с базовой линией сетки на основе основной оси.

Значения позиционного выравнивания

  • start: Выравнивает элементы по начальному краю контейнера выравнивания
  • end: Выравнивает элементы по концевому краю контейнера выравнивания
  • center: Выравнивает элементы по центру контейнера выравнивания
  • left: Выравнивает элементы слева от контейнера выравнивания
  • right: Выравнивает элементы справа от контейнера выравнивания
  • self-start: Выравнивает элементы в начале каждой ячейки элемента сетки
  • self-end: Выравнивает элементы в конце каждой ячейки элемента сетки
.container ( justify-items: )
.container ( justify-items: )
.container ( justify-items: center; )

Значения выравнивания переполнения

Свойство переполнения определяет, как будет отображаться содержимое сетки, когда содержимое превышает границы сетки. Поэтому, когда содержимое больше, чем контейнер для выравнивания, это приведет к переполнению, что может привести к потере данных. Чтобы предотвратить это, мы можем использовать safeзначение, которое сообщает браузеру изменить выравнивание, чтобы не было потери данных.

  • safe : Если элемент выходит за пределы контейнера выравнивания, startиспользуется режим.
  • unsafe : Значение выравнивания сохраняется как есть, независимо от размера элемента или контейнера выравнивания.

Унаследованные ценности

  • legacy : При использовании с направленным ключевым словом (например right, leftили center) это ключевое слово передается потомкам для наследования. Но если потомок объявляет, justify-self: auto;то legacyигнорируется, но по-прежнему учитывает ключевое слово directional. Значение вычисляется до унаследованного значения, если не указано ключевое слово направления. В противном случае он вычисляет normal.

Демо

Дополнительная информация

  • CSS Box Alignment Module, уровень 3 (рабочий проект)
  • Полное руководство по сетке
  • Полное руководство по Flexbox

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

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

Макет сетки

IE Край Fire Fox Хром Сафари Опера
Нет 16+ 45+ 57+ 10.1+ 44+
Android Chrome Android Firefox Браузер Android iOS Safari Opera Mobile
81+ 45+ 81+ 10.1+ 59+
Источник: caniuse

Макет Flex

IE Край Fire Fox Хром Сафари Опера
Нет 12+ 20+ 52+ 9+ 12.1+
Android Chrome Android Firefox Браузер Android iOS Safari Opera Mobile
87+ 83+ 81+ 9+ 12.1+
Источник: caniuse

Связанные свойства

Альманах на 27 октября 2019 г.

выровнять элементы

Джефф Грэм