Õigusta-kirjed - CSS-trikid

Anonim

justify-itemsVara on sub-vara CSS Box Alignment Moodul, mis põhimõtteliselt reguleerib viimist grid esemeid nende ulatust.

.element ( justify-items: center; )

justify-itemsjoondab ruudustikuüksused piki rea (joone) telge. Täpsemalt annab see vara võimaldab seada vastavusse viimine objekte sees grid mahuti (mitte grid ise) konkreetses asendis (nt start, centerja end) või käitumine (nt autovõi stretch).

Kui justify-itemsseda kasutatakse, määrab see ka justify-selfkõigi ruudustikuüksuste vaikeväärtuse , ehkki seda saab lapse tasandil tühistada, kasutades justify-selflapsel endal olevat omadust.

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

Süntaks

justify-items: normal | stretch | | ? ( | left | right ) | legacy | legacy && ( left | right | center )
  • Algne väärtus: legacy
  • Kehtib kõigi elementide kohta
  • Päritud: ei
  • Arvutatud väärtus: määratletud
  • Animatsiooni tüüp: diskreetne

Väärtused

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

Põhilised märksõna väärtused

  • stretch: Vaikeväärtus. Joondab üksused, et täita kogu ruudustikuüksuse lahter
  • auto: sama mis justify-itemsvanema väärtus .
  • normal: Kuigi me näeme justify-itemsseda kõige sagedamini ruudustiku paigutuses kasutatuna, on see tehniliselt iga kasti joondamise jaoks ja normaltähendab erinevaid asju erinevas paigutuse kontekstis, sealhulgas:
    • plokitaseme paigutused ( start)
    • ruudustiku paigutused stretch
    • flexbox (eiratud)
    • tabelirakud (eiratud)
    • absoluutselt paigutatud paigutused ( start)
    • absoluutselt paigutatud kastid ( stretch)
    • asendatud absoluutselt paigutatud kastid ( start)
.container ( justify-items: stretch; )

Baasjoone joondamise väärtused

See joondab kasti esimese või viimase baasjoone joondamise lähtejoone joonduskonteksti vastava lähtejoonega.

.container ( justify-items: baseline; )
  • Varuga joondamine first baselineon safe start.
  • Varuga joondamine last baselineon safe end.
  • baselinevastab first baselineüksi kasutamisel

Allolevas demos (kõige paremini vaadatav Firefoxis) näeme, kuidas elemendid joonduvad põhiteljel põhineva ruudustiku baasjoonega.

Positsiooni joondamise väärtused

  • start: Joondab üksused joondusmahuti algusservaga
  • end: Joondab üksused otsaserva joondamiskonteineriga
  • center: Joondab üksused joonduskonteineri keskele
  • left: Joondab joonduskonteineri vasakul olevad üksused
  • right: Joondab joondusnõu paremal asuvad elemendid
  • self-start: Joondab üksused iga ruudustikuüksuse lahtri alguses
  • self-end: Joondab üksused iga ruudustikuüksuse lahtri lõpus
.container ( justify-items: )
.container ( justify-items: )
.container ( justify-items: center; )

Ülevoolu joondamise väärtused

Ülevoolu vara määrab, kuidas see kuvab sisu grid kui sisaldus on suurem kui grid on piir piire. Nii et kui sisu on suurem kui joonduskonteiner, põhjustab see ülevoolu, mis võib viia andmete kadumiseni. Selle vältimiseks võime kasutada safeväärtust, mis käsib brauseril joondamist muuta, nii et andmete kadumist ei toimuks.

  • safe : Kui üksus joondamiskonteineri üle ajab, startkasutatakse režiimi.
  • unsafe : Joondusväärtust hoitakse sellisena, nagu see on, olenemata üksuse suurusest või joondusmahutist.

Pärandväärtused

  • legacy : Kui kasutatakse ühesuunalise märksõna (nt right, leftvõi center), et märksõna on möödas järglastele pärida. Aga kui järeltulija deklareerib, justify-self: auto;siis legacyseda ignoreeritakse, kuid ta austab siiski suunamärksõna. Väärtus arvutatakse päritud väärtuseks, kui suunavat märksõna pole esitatud. Vastasel juhul arvutab ta normal.

Demo

Rohkem informatsiooni

  • CSS kasti joondamise moodul, tase 3 (töö mustand)
  • Võrgu täielik juhend
  • Flexboxi täielik juhend

Brauseri tugi

Brauseri tugi justify-itemsajab gammi, kuna seda kasutatakse mitmes paigutuse kontekstis, nagu ruudustik, flexbox, tabelirakud. Kuid üldiselt, kui ruudustikku ja flexboxi toetatakse, võite eeldada, et justify-itemska see on nii.

Võrgu paigutus

IE Edge Firefox Chrome Safari Ooper
Ei 16+ 45+ 57+ 10,1+ 44+
Android Chrome Android Firefox Androidi brauser iOS-i Safari Opera Mobile
81+ 45+ 81+ 10,1+ 59+
Allikas: caniuse

Paindlik paigutus

IE Edge Firefox Chrome Safari Ooper
Ei 12+ 20+ 52+ 9+ 12,1+
Android Chrome Android Firefox Androidi brauser iOS-i Safari Opera Mobile
87+ 83+ 81+ 9+ 12,1+
Allikas: caniuse

Seotud omadused

Almanahh 27. oktoobril 2019

joondage üksused

Geoff Graham