Rettferdiggjøre-elementer - CSS-triks

Anonim

Den justify-itemsegenskapen er en under egenskap av CSS Box Alignment Module som i utgangspunktet styrer justeringen av grid elementer innenfor sitt virkeområde.

.element ( justify-items: center; )

justify-itemsjusterer rutenettene langs rad (innebygd) akse. Spesielt lar denne egenskapen deg angi justering for elementer inne i en rutenettbeholder (ikke selve rutenettet) i en bestemt posisjon (f.eks start. centerOg end) eller med en oppførsel (f.eks. autoEller stretch).

Når den justify-itemsbrukes, setter den også standardverdien justify-selffor alle rutenettelementer, selv om dette kan overstyres på underordnet nivå ved å bruke justify-selfeiendommen på selve barnet.

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

Syntaks

justify-items: normal | stretch | | ? ( | left | right ) | legacy | legacy && ( left | right | center )
  • Opprinnelig verdi: legacy
  • Gjelder: alle elementer
  • Arvet: nei
  • Beregnet verdi: som spesifisert
  • Animasjonstype: diskret

Verdier

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

Grunnleggende søkeordverdier

  • stretch: Standardverdi. Justerer elementer for å fylle hele bredden på rutenettcellen
  • auto: samme som verdien av justify-itemsi foreldre.
  • normal: Selv om vi ser justify-itemsbrukt oftest i et rutenettoppsett, er det teknisk sett for enhver innretting av bokser og normalbetyr forskjellige ting i forskjellige oppsettkontekster, inkludert:
    • oppsett på blokknivå ( start)
    • rutenettoppsett stretch
    • flexbox (ignorert)
    • tabellceller (ignorert)
    • absolutt posisjonerte oppsett ( start)
    • absolutt posisjonerte bokser ( stretch)
    • erstattet absolutt posisjonerte bokser ( start)
.container ( justify-items: stretch; )

Basisverdier for justering

Dette justerer justeringsbaselinjen til boksens første eller siste baselinjesett med den tilsvarende baselinjen for justeringskonteksten.

.container ( justify-items: baseline; )
  • Tilbakeslagsjusteringen for first baselineer safe start.
  • Tilbakeslagsjusteringen for last baselineer safe end.
  • baselinetilsvarer first baselinenår den brukes alene

I demoen nedenfor (best sett i Firefox) ser vi hvordan elementer stemmer overens med grunnlinjen til et rutenett basert på hovedaksen.

Posisjonsjusteringsverdier

  • start: Justerer objekter til startkanten av justeringsbeholderen
  • end: Justerer objekter etter endekantjusteringsbeholderen
  • center: Justerer gjenstander i midten av justeringsbeholderen
  • left: Justerer gjenstander til venstre for justeringsbeholderen
  • right: Justerer gjenstander til høyre i justeringsbeholderen
  • self-start: Justerer elementer i starten av hver rutenettcelle
  • self-end: Justerer elementer på slutten av hver rutenettcelle
.container ( justify-items: )
.container ( justify-items: )
.container ( justify-items: center; )

Overløpsjusteringsverdier

Den overflow egenskapen avgjør hvordan det vil vise innholdet i rutenettet når innholdet overstiger grid ytterkant grenser. Så når innholdet er større enn justeringsbeholderen, vil det resultere i overløp som kan føre til tap av data. For å forhindre dette kan vi bruke safeverdien som ber nettleseren om å endre justering slik at det ikke blir noe tap av data.

  • safe : Hvis et element renner over justeringsbeholderen, brukes startmodus.
  • unsafe : Justeringsverdien holdes som den er, uavhengig av varestørrelse eller justeringsbeholder.

Arvverdier

  • legacy : Når det brukes med et retningsbestemt nøkkelord (f.eks right. leftEller center), blir det nøkkelordet sendt til etterkommere for å arve. Men hvis etterkommeren erklærer justify-self: auto;, legacyblir den ignorert, men respekterer fortsatt retningsordet. Verdien beregnes til den nedarvede verdien hvis det ikke er gitt noe retningsord. Ellers beregner den seg til normal.

Demo

Mer informasjon

  • CSS Box Alignment Module Level 3 (Working draft)
  • En komplett guide til rutenett
  • En komplett guide til Flexbox

Nettleserstøtte

Nettleserstøtte justify-itemskjører liksom spekteret siden det brukes i flere layoutkontekster, som rutenett, flexbox, tabellceller. Men generelt, hvis rutenett og flexbox støttes, kan du anta at det også justify-itemser det.

Rutenettoppsett

DVS Kant Firefox Chrome Safari Opera
Nei 16+ 45+ 57+ 10.1+ 44+
Android Chrome Android Firefox Android-nettleser iOS Safari Opera Mobile
81+ 45+ 81+ 10.1+ 59+
Kilde: caniuse

Fleksibel oppsett

DVS Kant Firefox Chrome Safari Opera
Nei 12+ 20+ 52+ 9+ 12.1+
Android Chrome Android Firefox Android-nettleser iOS Safari Opera Mobile
87+ 83+ 81+ 9+ 12.1+
Kilde: caniuse

Relaterte egenskaper

Almanakk 27. oktober 2019

align-items

Geoff Graham