Opravičujoči predmeti - CSS-triki

Anonim

justify-itemsLastnost je sub-lastnost CSS Box Poravnava modula, ki v bistvu nadzira prilagajanje elementov omrežja v okviru njihovega področja.

.element ( justify-items: center; )

justify-itemsporavna elemente mreže vzdolž osi vrstice (vrstice). Ta lastnost vam omogoča natančno določanje poravnave za postavke znotraj vsebnika mreže (ne same mreže) v določenem položaju (npr start. centerIn end) ali z vedenjem (npr. autoAli stretch).

Ko justify-itemsse uporablja, nastavi tudi privzeto justify-selfvrednost za vse elemente mreže, čeprav je to mogoče preglasiti na podrejeni ravni z uporabo justify-selflastnosti na samem podrejenem elementu.

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

Sintaksa

justify-items: normal | stretch | | ? ( | left | right ) | legacy | legacy && ( left | right | center )
  • Začetna vrednost: legacy
  • Velja za: vse elemente
  • Podedovano: ne
  • Izračunana vrednost: kot je določeno
  • Vrsta animacije: diskretna

Vrednote

/* 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;

Osnovne vrednosti ključnih besed

  • stretch: Privzeta vrednost. Poravna elemente tako, da zapolni celotno širino celice elementa mreže
  • auto: enako kot vrednost justify-itemsv nadrejeni.
  • normal: Čeprav vidimo, da justify-itemsse najpogosteje uporabljajo v postavitvi mreže, je tehnično namenjen kateri koli poravnavi polja in normalpomeni različne stvari v različnih okoliščinah postavitve, vključno z:
    • postavitve na ravni bloka ( start)
    • postavitve mrež stretch
    • flexbox (prezrto)
    • celice tabele (prezrte)
    • absolutno postavljene postavitve ( start)
    • absolutno postavljene škatle ( stretch)
    • zamenjali absolutno postavljena polja ( start)
.container ( justify-items: stretch; )

Izhodiščne vrednosti poravnave

To poravna osnovno črto poravnave prvega ali zadnjega nabora osnovne črte z ustrezno osnovno črto konteksta poravnave.

.container ( justify-items: baseline; )
  • Rezervna poravnava za first baselineis safe start.
  • Rezervna poravnava za last baselineis safe end.
  • baselineustreza, first baselineče se uporablja samostojno

V spodnji predstavitvi (najbolje gledano v Firefoxu) vidimo, kako se elementi poravnajo z osnovno črto mreže, ki temelji na glavni osi.

Pozicijske vrednosti poravnave

  • start: Poravna elemente na začetni rob vsebnika za poravnavo
  • end: Poravna predmete s posodo za poravnavo končnega roba
  • center: Poravna elemente na sredino posode za poravnavo
  • left: Poravna elemente na levi strani vsebnika za poravnavo
  • right: Poravna elemente na desni posodi za poravnavo
  • self-start: Poravna elemente na začetku vsake celice elementa mreže
  • self-end: Poravna elemente na koncu vsake celice elementa mreže
.container ( justify-items: )
.container ( justify-items: )
.container ( justify-items: center; )

Vrednosti poravnave prelivanja

Lastnost overflow določa, kako bo prikazala vsebino mreže, ko vsebina preseže mejne vrednosti mreže. Torej, ko je vsebina večja od vsebnika za poravnavo, bo to povzročilo prelivanje, kar bi lahko povzročilo izgubo podatkov. Da bi to preprečili, lahko uporabimo safevrednost, ki brskalniku sporoča, da spremeni poravnavo, tako da ne pride do izgube podatkov.

  • safe : Če element preseže vsebnik za poravnavo, startse uporabi način.
  • unsafe : Vrednost poravnave se ohrani, kakršna je, ne glede na velikost predmeta ali vsebnik za poravnavo.

Zapuščene vrednosti

  • legacy : Ko se uporablja z usmerjeno ključno besedo (npr right. leftAli center), se ta ključna beseda posreduje potomcem za dedovanje. Če pa potomec izjavi, justify-self: auto;se legacyto prezre, vendar kljub temu spoštuje usmerjeno ključno besedo. Vrednost se izračuna na podedovano vrednost, če ni navedena ključna beseda s smermi. V nasprotnem primeru izračuna normal.

Demo

Več informacij

  • Modul za poravnavo škatle CSS 3. stopnja (delovni osnutek)
  • Popoln vodnik po mreži
  • Popoln vodnik po Flexboxu

Podpora brskalnika

Podpora za brskalnik justify-itemsnekako izvaja lestvico, saj se uporablja v več kontekstih postavitve, kot so mreža, flexbox, celice tabele. Toda na splošno, če sta podprta mreža in flexbox, lahko domnevate, da justify-itemsje tudi to.

Postavitev mreže

IE Rob Firefox Chrome Safari Opera
Ne 16+ 45+ 57+ 10,1+ 44+
Android Chrome Android Firefox Brskalnik Android iOS Safari Opera Mobile
81+ 45+ 81+ 10,1+ 59+
Vir: kanius

Prožna postavitev

IE Rob Firefox Chrome Safari Opera
Ne 12+ 20+ 52+ 9+ 12,1+
Android Chrome Android Firefox Brskalnik Android iOS Safari Opera Mobile
87+ 83+ 81+ 9+ 12,1+
Vir: kanius

Sorodne lastnosti

Almanah 27. oktobra 2019

align-items

Geoff Graham