CSS justify-items egenskab

Definition og brug

justify-items egenskaben indstilles på netværkscontaineren for at justere underelementer (netværkskomponenter) i indrykningets retning.

For engelske sider er indrykningets retning fra venstre til højre, og blokretningen er nedad.

For at gøre denne egenskab til at have nogen justeringseffekt, skal netværkskomponenten have ledig plads omkring sig i indrykningets retning.

Tip:For at justere netværkskomponenter i blokretning i stedet for indrykningets retning, brug align-items egenskab egenskaber.

Se også:

CSS Tutorial:CSS Grid

CSS Tutorial:CSS Positioning

CSS Reference Manual:align-items egenskab

CSS Reference Manual:direction egenskab

CSS Reference Manual:grid egenskab

CSS Reference Manual:grid-template-columns egenskab

CSS Reference Manual:justify-self egenskab

CSS Reference Manual:position egenskab

CSS Reference Manual:writing-mode egenskab

Eksempel

Eksempel 1

Juster hver netværkskomponent i slutningen af dens netværksenhed langs indrykningets retning:

#container {
  display: grid;
  justify-items: end;
}

Prøv det selv

Eksempel 2: justify-items sammenlignet med justify-self

Indstil justeringen af containeren til 'centreret', og netværkskomponenten selv til 'højre justeret'. Egenskabsværdien 'right' har fortrin:

#container {
  display: grid;
  justify-items: center;
}
.blue {
  justify-self: right;
}

Prøv det selv

Eksempel 3: Indstil justify-items på absolutt placerede netværkskomponenter

Indstil justering af absolutt placeret netværkskomponent til 'højre justeret':

#container {
  display: grid;
  position: relative;
  justify-items: right;
}
.blue {
  position: absolute;
}

Prøv det selv

Eksempel 4: writing-mode

Når netværkscontainerens writing-mode egenskab er sat til vertical-rl, er indrykningets retning nedad. Resultatet er, at containerens start flyttes til toppen fra venstre side, og containerens ende flyttes til bunden fra højre side:

#container {
  justify-items: end;
  writing-mode: vertical-rl;
}

Prøv det selv

Eksempel 5: direction

Når rutenettens containerelements direction-egenskab er sat til 'rtl', er rækkeledets retning fra højre til venstre. Resultatet er, at kontainerens start flyttes fra venstre til højre, og kontainerens ende flyttes fra højre til venstre:

#container {
  justify-items: start;
  direction: rtl;
}

Prøv det selv

CSS syntaks

justify-items: legacy|normal|stretch|Positional alignment|overflow-alignment|Baseline alignment|initial|inherit;

Egenskabsværdi

Værdi Beskrivelse
legacy

Standardværdi.

Kun når det starter med 'legacy', arver en rutenettens element, der har justify-self-værdien 'auto', rutenettens justify-items-egenskab.

Dets eksistens er til at opnå HTML's <center> element og align-egenskabets arvede justeringsadferd.
normal Afhænger af layoutkonteksten, men ligner rutenettets 'stretch'.
stretch Hvis inline-size (bredde) ikke er indstillet, strækker det sig for at fylde rutenettens celle.
start Justerer elementet til begyndelsen af rækkeledet.
left Justerer elementet til venstre.
center Justerer elementet til midten.
end Justerer elementet til enden af rækkeledet.
right Justerer elementet til højre.
overflow-alignment
  • 'safe' sætter projektets justering til 'start', hvis indholdet strømmer over.
  • 'unsafe' holder justeringsværdien, uanset om projektindholdet strømmer over.
baseline-alignment Elementet er justeret i forhold til baselinien med forældrelige element.
initial Sæt denne egenskab til dens standardværdi. Se: initial.
inherit Arver denne egenskab fra sin forældrelige element. Se: inherit.

Tekniske detaljer

Standardværdi: legacy
Arv: Nej
Animation production: Ikke understøttet. Se:Animation-related properties.
Version: CSS3
JavaScript syntaks: object.style.justifyItems="center"

Browserunderstøttelse

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
57.0 16.0 45.0 10.1 44.0