Retfærdiggøre-varer - CSS-tricks

Anonim

Den justify-itemsegenskab er en sub-egenskab af CSS Box Justering modul som dybest set styrer tilpasningen af gitter elementer inden for deres rækkevidde.

.element ( justify-items: center; )

justify-itemsjusterer gitterelementer langs række (inline) akse. Specifikt giver denne egenskab dig mulighed for at indstille justering for emner inde i en gitterbeholder (ikke selve gitteret) i en bestemt position (f.eks start. centerOg end) eller med en adfærd (f.eks. autoEller stretch).

Når justify-itemsdet bruges, indstiller det også standardværdien justify-selffor alle gitterelementer, selvom dette kan tilsidesættes på underordnet niveau ved hjælp af justify-selfegenskaben 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 )
  • Startværdi: legacy
  • Gælder for: alle elementer
  • Arvet: nej
  • Beregnet værdi: som specificeret
  • Animationstype: diskret

Værdier

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

Grundlæggende søgeordsværdier

  • stretch: Standardværdi. Justerer emner for at udfylde hele bredden af ​​gitterelementcellen
  • auto: samme som værdien af justify-itemsi forælder.
  • normal: Mens vi ser justify-itemsbrugt oftest i et gitterlayout, er det teknisk set til enhver boksjustering og normalbetyder forskellige ting i forskellige layoutkontekster, herunder:
    • layout på blokniveau ( start)
    • gitterlayouter stretch
    • flexbox (ignoreret)
    • tabelceller (ignoreret)
    • absolut placerede layouts ( start)
    • absolut placerede kasser ( stretch)
    • udskiftede absolut placerede kasser ( start)
.container ( justify-items: stretch; )

Baseline justeringsværdier

Dette justerer justeringsbaselinjen for boksens første eller sidste baseline-sæt med den tilsvarende baseline for dets justeringskontekst.

.container ( justify-items: baseline; )
  • Tilbageførselsjusteringen for first baselineer safe start.
  • Tilbageførselsjusteringen for last baselineer safe end.
  • baselinesvarer til, first baselinenår det bruges alene

I nedenstående demo (bedst set i Firefox) ser vi, hvordan elementer stemmer overens med basislinjen for et gitter baseret på hovedaksen.

Positionsjusteringsværdier

  • start: Justerer emner til startkanten af ​​justeringsbeholderen
  • end: Justerer emner med endekantjusteringsbeholderen
  • center: Justerer emner i midten af ​​justeringsbeholderen
  • left: Justerer emner i venstre side af justeringsbeholderen
  • right: Justerer emner i højre side af justeringsbeholderen
  • self-start: Justerer elementer i starten af ​​hver gittervarecelle
  • self-end: Justerer varer i slutningen af ​​hver celle i gitterartikler
.container ( justify-items: )
.container ( justify-items: )
.container ( justify-items: center; )

Værdier for justering af overløb

Den overløb ejendom bestemmer, hvordan det vil vise indholdet af nettet, når indholdet overstiger nettets grænse grænser. Så når indholdet er større end justeringsbeholderen, vil det resultere i overløb, hvilket kan føre til datatab. For at forhindre dette kan vi bruge den safeværdi, der fortæller browseren om at ændre justering, så der ikke er datatab.

  • safe : Hvis et element overløber justeringsbeholderen, bruges starttilstand.
  • unsafe : Justeringsværdien holdes som den er, uanset varestørrelse eller justeringsbeholder.

Ældre værdier

  • legacy : Når det bruges med et retningsbestemt nøgleord (f.eks right. leftEller center), overføres dette nøgleord til efterkommere for at arve. Men hvis efterkommer erklærer justify-self: auto;derefter legacyignoreres, men stadig respekterer den retningsbestemte søgeord. Værdien beregnes til den nedarvede værdi, hvis der ikke er angivet et retningsbestemt nøgleord. Ellers beregner den sig til normal.

Demo

Mere information

  • CSS Box Alignment Module niveau 3 (arbejdsudkast)
  • En komplet guide til gitter
  • En komplet guide til Flexbox

Browsersupport

Browsersupport justify-itemskører slagsen, da den bruges i flere layoutkontekster, som gitter, flexbox, tabelceller. Men generelt, hvis gitter og flexbox understøttes, kan du antage, at det også justify-itemser det.

Gitterlayout

IE Edge Firefox Chrome Safari Opera
Ingen 16+ 45+ 57+ 10.1+ 44+
Android Chrome Android Firefox Android-browser iOS Safari Opera Mobile
81+ 45+ 81+ 10.1+ 59+
Kilde: caniuse

Flex layout

IE Edge Firefox Chrome Safari Opera
Ingen 12+ 20+ 52+ 9+ 12.1+
Android Chrome Android Firefox Android-browser iOS Safari Opera Mobile
87+ 83+ 81+ 9+ 12.1+
Kilde: caniuse

Relaterede egenskaber

Almanak den 27. oktober 2019

align-items

Geoff Graham