Оправдати-ставке - ЦСС-трикови

Anonim

justify-itemsИмовина је под-својство ЦСС кутија Усклађивање модула који у суштини контролише усклађеност мреже ставки у оквиру свог делокруга.

.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
    • флекбок (занемарено)
    • ћелије табеле (занемарене)
    • апсолутно позиционирани распореди ( start)
    • апсолутно позициониране кутије ( stretch)
    • заменио апсолутно позициониране кутије ( start)
.container ( justify-items: stretch; )

Вредности основног поравнања

Ово поравнава основну линију поравнања првог или последњег скупа основних линија са одговарајућом основном линијом његовог контекста поравнања.

.container ( justify-items: baseline; )
  • Резервно поравнање за first baselineје safe start.
  • Резервно поравнање за last baselineје safe end.
  • baselineодговара first baselineкада се користи сам

У демонстрацији испод (најбоље гледане у Фирефоку) видимо како се елементи поравнавају са основном линијом мреже засноване на главној оси.

Вредности позиционог поравнања

  • 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.

Демо

Више информација

  • ЦСС модул за поравнање оквира ниво 3 (радни нацрт)
  • Комплетан водич за мрежу
  • Комплетан водич за Флекбок

Подршка прегледача

Подршка прегледача justify-itemsнекако покреће опсег јер се користи у више контекста распореда, као што су мрежа, флекбок, ћелије табеле. Али генерално, ако су грид и флекбок подржани, онда можете претпоставити да justify-itemsје и то такође.

Распоред мреже

ИЕ Ивица Фирефок Хром Сафари Опера
Не 16+ 45+ 57+ 10.1+ 44+
Андроид Цхроме Андроид Фирефок Андроид претраживач иОС Сафари Опера Мобиле
81+ 45+ 81+ 10.1+ 59+
Извор: каниус

Флек лаиоут

ИЕ Ивица Фирефок Хром Сафари Опера
Не 12+ 20+ 52+ 9+ 12.1+
Андроид Цхроме Андроид Фирефок Андроид претраживач иОС Сафари Опера Мобиле
87+ 83+ 81+ 9+ 12.1+
Извор: каниус

Повезана својства

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

алигн-итемс

Геофф Грахам