Opravdati-stavke - CSS-trikovi

Anonim

justify-itemsNekretnina je pod-vlasništvo CSS Box Usklađivanje modul koji u osnovi kontrolira usklađenost mreže stvari u svom djelokrugu.

.element ( justify-items: center; )

justify-itemsporavnava stavke mreže duž osi redaka (u liniji). Točno, ovo svojstvo omogućuje vam postavljanje poravnanja za stavke unutar spremnika mreže (ne same mreže) u određenom položaju (npr start. centerI end) ili s ponašanjem (npr. autoIli stretch).

Kada justify-itemsse koristi, također postavlja zadanu justify-selfvrijednost za sve stavke mreže, premda se to može nadjačati na razini djeteta pomoću justify-selfsvojstva na samom djetetu.

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

Sintaksa

justify-items: normal | stretch | | ? ( | left | right ) | legacy | legacy && ( left | right | center )
  • Početna vrijednost: legacy
  • Odnosi se na: sve elemente
  • Naslijeđeno: ne
  • Izračunata vrijednost: kako je navedeno
  • Vrsta animacije: diskretna

Vrijednosti

/* 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 vrijednosti ključnih riječi

  • stretch: Zadana vrijednost. Poravnava stavke tako da ispunjavaju cijelu širinu ćelije stavke mreže
  • auto: isto kao vrijednost justify-itemsu nadređenom.
  • normal: Iako justify-itemsse najčešće koristi u rasporedu mreže, tehnički je za bilo koje poravnanje okvira i normalznači različite stvari u različitim kontekstima izgleda, uključujući:
    • izgledi na razini bloka ( start)
    • rasporedi rešetki stretch
    • flexbox (zanemareno)
    • ćelije tablice (zanemarene)
    • apsolutno pozicionirani izgledi ( start)
    • apsolutno postavljene kutije ( stretch)
    • zamijenio apsolutno postavljene kutije ( start)
.container ( justify-items: stretch; )

Vrijednosti poravnanja polazne crte

Ovo poravnava osnovnu liniju poravnanja prve ili posljednje postavljene osnovne linije okvira s odgovarajućom osnovnom linijom konteksta poravnanja.

.container ( justify-items: baseline; )
  • Rezervno poravnanje za first baselineje safe start.
  • Rezervno poravnanje za last baselineje safe end.
  • baselineodgovara first baselinekada se koristi sam

U demonstraciji u nastavku (najbolje gledano u Firefoxu) vidimo kako se elementi poravnavaju s osnovnom linijom mreže koja se temelji na glavnoj osi.

Pozicijske vrijednosti poravnanja

  • start: Poravnava stavke s početnim rubom spremnika za poravnanje
  • end: Poravnava stavke s spremnikom za poravnanje krajnjeg ruba
  • center: Poravnava predmete u sredini spremnika za poravnanje
  • left: Poravnava stavke lijevo od spremnika za poravnanje
  • right: Poravnava stavke s desne strane spremnika za poravnanje
  • self-start: Poravnava stavke na početku svake ćelije stavke mreže
  • self-end: Poravnava stavke na kraju svake ćelije stavke mreže
.container ( justify-items: )
.container ( justify-items: )
.container ( justify-items: center; )

Vrijednosti poravnanja s preljevom

Preljeva imovine određuje kako će se prikazati sadržaj rešetke, kada je sadržaj veći od rubnih granica rešetku-a. Dakle, kada je sadržaj veći od spremnika za poravnanje, to će rezultirati preljevom što bi moglo dovesti do gubitka podataka. Da bismo to spriječili, možemo koristiti safevrijednost koja govori pregledniku da promijeni poravnanje kako ne bi došlo do gubitka podataka.

  • safe : Ako stavka prelije spremnik za poravnanje, startkoristi se način.
  • unsafe : Vrijednost poravnanja zadržava se takvom kakva jest, bez obzira na veličinu predmeta ili spremnik za poravnanje.

Vrijednosti naslijeđa

  • legacy : Kada se koristi s usmjerenom ključnom riječi (npr right. leftIli center), ta se ključna riječ prenosi potomcima na nasljeđivanje. Ali ako potomak izjavi, justify-self: auto;tada legacyse zanemaruje, ali i dalje poštuje ključnu riječ usmjerenja. Vrijednost se izračunava na naslijeđenu vrijednost ako nije navedena usmjerena ključna riječ. Inače, izračunava normal.

Demo

Više informacija

  • CSS modul za poravnanje okvira razina 3 (radni nacrt)
  • Cjelovit vodič za mrežu
  • Cjelovit vodič za Flexbox

Podrška preglednika

Podrška preglednika justify-itemsnekako pokreće opseg jer se koristi u više konteksta izgleda, poput mreže, flexboxa, ćelija tablice. Ali općenito, ako su podržani grid i flexbox, onda možete pretpostaviti da justify-itemsje i to.

Raspored rešetke

IE Rub Firefox Krom Safari Opera
Ne 16+ 45+ 57+ 10,1+ 44+
Android Chrome Android Firefox Android preglednik iOS Safari Opera Mobile
81+ 45+ 81+ 10,1+ 59+
Izvor: caniuse

Flex raspored

IE Rub Firefox Krom Safari Opera
Ne 12+ 20+ 52+ 9+ 12,1+
Android Chrome Android Firefox Android preglednik iOS Safari Opera Mobile
87+ 83+ 81+ 9+ 12,1+
Izvor: caniuse

Povezana svojstva

Almanah 27. listopada 2019

poravnati-stavke

Geoff Graham