CSS justify-self egenskab

Definition og brug

justify-self egenskaben justerer rutenetelementer inden for rutenetcellen langs rækkefølge.

For engelske sider er rækkefølgen fra venstre til højre, og blokretningen er nedad.

For at gøre denne egenskab effektiv, skal rutenetelementet have tilstrækkelig plads omkring sig i rækkefølge.

Tip:For at justere rutenetelementer i blokretning i stedet for rækkefølge, brug align-self egenskab eller align-items egenskab egenskaber.

Se også:

CSS tutorial:CSS Grid

CSS tutorial:CSS positioning

CSS reference manual:align-content egenskab

CSS reference manual:align-items egenskab

CSS reference manual:align-self egenskab

CSS reference manual:direction egenskab

CSS reference manual:grid egenskab

CSS reference manual:grid-template-columns egenskab

CSS reference manual:position egenskab

CSS reference manual:writing-mode egenskab

Se også:

Eksempel

Eksempel 1

Juster rutenetelementet til højre i dens rutenetcelle:

.red {
  display: grid;
  justify-self: højre;
}

Prøv det selv

Eksempel 2: justify-self mod justify-items

Sæt justeringen relativt til kontaineren til 'centreret' og rutenetelementet selv til 'højre justeret'. Egenskabsværdien 'højre' har prioritet:

#container {
  display: grid;
  justify-items: centreret;
}
.blue {
  justify-self: højre;
}

Prøv det selv

Eksempel 3: Sæt justify-self på et absolutt placeret rutenetelement

Sæt justeringen for absolutt placerede rutenetelementer til 'højre':

#container {
  display: grid;
  position: relativ;
}
.red {
  position: absolut;
  justify-self: højre;
}

Prøv det selv

Eksempel 4: writing-mode

Når skrive-mode egenskaben for et rutenetcontainerelements er sat til vertical-rl, er rækkefølgen nedad. Resultatet er, at kont容器的 start flyttes til toppen og kont容器的 ende flyttes til bunden:

#container {
  display: grid;
  writing-mode: vertical-rl;
}
.blue {
  justify-self: end;
}

Prøv det selv

Eksempel 5: direction

Når rutenettcontainerens direction-egenskap er satt til 'rtl', er innskrivningsretningen fra høyre til venstre. Resultatet er at kont容器的 start flyttes fra venstre til høyre, og kont容器的 end flyttes fra høyre til venstre:

#container {
  display: grid;
  direction: rtl;
}
.blue {
  justify-self: end;
}

Prøv det selv

CSS syntaks

justify-self: auto|normal|stretch|positional alignment|overflow-alignment|baselinjejustering|initial|inherit;

Egenskapsverdi

Verdi Beskrivelse
auto Standardverdi. Arv rutenettcontainerens justify-self-egenskapsverdi.
normal

Avhengig av layoutkontekst, men lik 'stretch' for rutenettkomponenter i rutenettlayout uten å sette size.

Hvis size er satt, oppfører egenskapen seg som 'start'.
stretch Stræk hvis inline-size (bredde) ikke er satt for å fylle rutenettcellen.
start Juster prosjektet til begynnelsen av innskrivningsretningen.
venstre Juster prosjektet til venstre.
center Juster prosjektet til midten.
end Juster prosjektet til slutten av innskrivningsretningen.
højre Juster prosjektet til høyre.
overflow-alignment
  • 'safe' setter prosjektets justeringsmåte til 'start' hvis innholdet strømmer over.
  • 'unsafe' beholder justeringsverdien uavhengig av om prosjektinnholdet strømmer over.
baselinjejustering Elementet er justert med referanse til baselinjen til foreldrelementet.
initial Sett denne egenskapen til sin standardverdi. Se: initial.
inherit Arv denne egenskapen fra sin foreldrelement. Se: inherit.

Teknisk detalj

Standardverdi: auto
Arv: Nei
Animasjonsproduksjon: Ikke støttet. Se:Animasjonsrelaterte egenskaper.
Versjon: CSS3
JavaScript syntaks: object.style.justifySelf="right"

Nettleserstøtte

Tabellen tal viser den første nettleserversjonen som fullt ut støtter denne egenskapen.

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