CSS justify-self egenskap

Definition och användning

justify-self-egenskapen justerar nätverksobjektet inom nätverksenheten längs inre riktningen.

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

För att göra att denna egenskap har någon justeringsverkan måste nätverksobjektet lämna tillgängligt utrymme runt sig själv i inre riktningen.

Tips:För att justera nätverksobjekt i blockriktningen istället för inre riktningen, använd: align-self-egenskap eller align-items-egenskap Egenskaper.

Se också:

CSS LärarCSS Grid

CSS LärarCSS Positionering

CSS Referenshandbok:align-content-egenskap

CSS Referenshandbok:align-items-egenskap

CSS Referenshandbok:align-self-egenskap

CSS Referenshandbok:direction-egenskap

CSS Referenshandbok:grid-egenskap

CSS Referenshandbok:grid-template-columns-egenskap

CSS Referenshandbok:position-egenskap

CSS Referenshandbok:writing-mode-egenskap

Se också:

Exempel

Exempel 1

Justera nätverksobjektet till höger i dess nätverksenhet:

.red {
  display: grid;
  justify-self: höger;
}

Prova själv

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

Sätt justeringsmetoden relativt till containern till 'centrerad' och nätverksobjektet själv till 'högerjusterad'. Egenskapsvärdet 'höger' har fördel:

#container {
  display: grid;
  justify-items: centrerad;
}
.blue {
  justify-self: höger;
}

Prova själv

Exempel 3: Använda justify-self på absolutt placerade nätverksobjekt

Sätt justeringsmetoden för absolutt placerade nätverksobjekt till 'höger':

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

Prova själv

Exempel 4: writing-mode

När växelriktningen för elementet i nätverkscontainerns writing-mode-egenskap är satt till vertical-rl, är inre riktningen nedåt. Resultatet är att containerns startpunkt flyttas från vänster till toppen, och containerns slutpunkt flyttas från höger till botten:

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

Prova själv

Exempel 5: direction

När elementets direction-attribut sätts till 'rtl', är inline-riktningen från höger till vänster. Resultatet är att kont容器的 start flyttas från vänster till höger och kont容器的 ände från höger till vänster:

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

Prova själv

CSS-syntax

justify-self: auto|normal|stretch|positionell alinement|overflow-alignment|nivåcentrerad alinement|initial|inherit;

Egenskapsvärde

Värde Beskrivning
auto Standardvärde. Följer från nätverkskontainerns justify-self egenskapsvärde.
normal

Beror på layoutkontexten, men liknar 'stretch' för rutmönsterobjekt i rutmönsterlayout utan att ha inställt storlek.

Om storlek är inställd, beteendet för egenskapsvärdet liknar 'start'.
stretch Om inline-size (bredd) inte är inställd, sträcker det ut för att fylla rutmönstret.
start Justera objektet i början av riktningen.
left Vänsterjustera objektet.
center Justera objektet till mitten.
end Justera objektet i slutet av riktningen.
right Rätt justerar objektet.
overflow-alignment
  • 'safe' sätter projektets aligneringsmetod till 'start', om innehållet strömmar över.
  • 'unsafe' behåller aligneringsvärdet, oavsett om projektinnehållet strömmar över.
nivåcentrerad alinement Elementet är nivåcentrerat med föräldrelementet.
initial Sätt denna egenskap till dess standardvärde. Se till: initial.
inherit Följer från föräldrelementet för denna egenskap. Se till: inherit.

Tekniska detaljer

Standardvärde: auto
Arv: Nej
Animation tillverkning: Stöds inte. Se till:Animation-relaterade egenskaper.
Version: CSS3
JavaScript-syntax: object.style.justifySelf="right"

Webbläsarstöd

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

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