Оправдателни елементи - CSS-трикове

Anonim

В justify-itemsимота е под-собственост на СГО Box Alignment модул, което по същество контролира привеждането на мрежови елементи в техния обхват.

.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на браузъра подтиква гамата, тъй като тя се използва в множество контексти на оформление, като мрежа, клетки, таблици. Но като цяло, ако се поддържат 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 г.

align-items

Джеф Греъм