Виправдання-пункти - 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ігнорується , але по- , як і раніше поважає спрямоване ключове слово. Значення обчислюється до успадкованого значення, якщо не вказано ключове слово з напрямками. В іншому випадку він обчислює normal.

Демо

Більше інформації

  • Модуль вирівнювання коробки CSS рівень 3 (робочий проект)
  • Повне керівництво по сітці
  • Повне керівництво по Flexbox

Підтримка браузера

Підтримка браузера justify-itemsсортує гаму, оскільки вона використовується в багатьох контекстах макета, таких як сітка, flexbox, комірки таблиці. Але загалом, якщо grid та flexbox підтримуються, то можна припустити, що justify-itemsце також.

Розмітка сітки

IE Край Firefox Chrome Сафарі Опера
Ні 16+ 45+ 57+ 10,1+ 44+
Android Chrome Android Firefox Браузер Android iOS Safari Opera Mobile
81+ 45+ 81+ 10,1+ 59+
Джерело: caniuse

Розмітка гнучка

IE Край Firefox Chrome Сафарі Опера
Ні 12+ 20+ 52+ 9+ 12,1+
Android Chrome Android Firefox Браузер Android iOS Safari Opera Mobile
87+ 83+ 81+ 9+ 12,1+
Джерело: caniuse

Пов’язані властивості

Альманах 27 жовтня 2019 р

вирівнювання елементів

Джефф Грем