CSS justify-items egenskap

Definition och användning

justify-items-attributet ställs in på grid-containeren för att justera underelementen (grid-elementen) i inre riktningen.

För engelska sidor är inre riktningen från vänster till höger, och blockriktningen är neråt.

För att detta attribut ska ha någon justeringsverkan måste grid-elementet ha tillgängligt utrymme runt sig själv i inre riktningen.

Tips:För att justera grid-elementen i blockriktningen istället för inre riktningen, använd align-items-attribut egenskaper.

Se också:

CSS-tutorial:CSS Grid

CSS-tutorial:CSS-positionering

CSS-referenshandbok:align-items-attribut

CSS-referenshandbok:direction-attribut

CSS-referenshandbok:grid-attribut

CSS-referenshandbok:grid-template-columns-attribut

CSS-referenshandbok:justify-self-attribut

CSS-referenshandbok:position-attribut

CSS-referenshandbok:writing-mode-attribut

Exempel

Exempel 1

Justera varje grid-element vid slutet av dess grid-cell längs inre riktningen:

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

Prova själv

Exempel 2: jämför justify-items med justify-self

Justeringsmetoden för kontoret sätts till 'centrerad', medan grid-elementet själv sätts till 'högerjusterad'. Attributvärdet 'right' har förträde:

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

Prova själv

Exempel 3: Ställ in justify-items på ett absolutt placerat grid-element

Ställ in justeringsmetoden för det absolutt placerade grid-elementet till 'högerjusterad':

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

Prova själv

Exempel 4: writing-mode

När grid-container-elementets writing-mode-attribut är satt till vertical-rl, är inre riktningen neråt. Resultatet är att kont容器的 början flyttas från vänster till toppen, och kont容器的 ände från höger till botten:

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

Prova själv

Exempel 5: direction

När direction-attributet för nätverksbehållaren är satt till 'rtl', är inre riktningen från höger till vänster. Resultatet är att behållarens början flyttas från vänster till höger och behållarens ände flyttas från höger till vänster:

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

Prova själv

CSS-syntax

justify-items: legacy|normal|stretch|positionell justering|overflow-alignment|baslinje-alignment|initial|inherit;

Egenskapsvärde

Värde Beskrivning
legacy

Standardvärde.

Endast när värdet för justify-self är 'auto' och börjar med 'legacy', är nätverksobjektetverket inherit från justify-items egenskapen för nätverksbehållaren.

Det finns för att implementera den föråldrade justeringsbeteendet för HTML:s <center> element och align-attributet.
normal Beror på layoutkontexten, men liknar 'stretch' i nätverkslayouten.
stretch Om inline-size (bredd) inte är satt, sträcker det ut för att fylla cellen i nätverket.
start Justera objektet vid början av inre riktningen.
left Justera objektet till vänster.
center Justera objektet till mitten.
end Justera objektet vid slutet av inre riktningen.
right Justera objektet till höger.
overflow-alignment
  • 'safe' sätter projektens justeringsmetod till 'start', om innehållet överflödar.
  • 'unsafe' behåller justeringsvärdet, oavsett om innehållet överflödar.
baslinje-alignment Elementen är i linje med baslinjen för föräldrelementet.
initial Sätt detta egenskap till dess standardvärde. Se till: initial.
inherit Tar över detta egenskap från sin föräldrelement. Se till: inherit.

Tekniska detaljer

Standardvärde: legacy
Ärvning: Nej
Animation: Stöds inte. Se till:Animation relaterade egenskaper.
Version: CSS3
JavaScript-syntax: object.style.justifyItems="center"

Webbläsarstöd

Talen i tabellen anger den första webbläsarversion som helt stöder detta egenskap.

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