CSS justify-content egenskap

Definition och användning

justify-content egenskap (horisontell) justerar kontinuerliga kontainers objekt, när objekten inte använder all tillgänglig utrymme på huvudaxeln.

Tips:Använd align-items egenskap Justera objekt vertikalt.

Se också:

CSS handledning:CSS flexbox

CSS handledning:CSS Grid

CSS referenshandbok:align-content egenskap

CSS referenshandbok:align-items egenskap

CSS referenshandbok:align-self-egenskapen

HTML DOM referenshandbok:justifyContent-egenskapen

Exempel

Justera elastiska objekt i mitten av behållaren:

div {
  display: flex;
  justify-content: center;
}

Prova själv

Du kan hitta fler TIY-exempel längre ner på sidan.

CSS-syntaks

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

Egenskapsvärde

Värde Beskrivning
flex-start Standardvärde. Objekt är placerade på behållarens början.
flex-end Objekt är placerade på behållarens ände.
center Objekt är centrerade i behållaren.
space-between Objekt har avstånd mellan raderna.
space-around Objekt lämnar utrymme innan, mellan och efter raden.
initial Sätt egenskapen till dess standardvärde. Se också: initial。
inherit Inheriterar egenskapen från föräldrelementet. Se också: inherit。

Tekniska detaljer

Standardvärde: flex-start
Ärvande: Nej
Animering: Stöds inte. Se också:Animeringsrelaterade egenskaper。
Version: CSS3
JavaScript-syntaks: object.style.justifyContent="space-between"

Mer exempel

Exempel

Justera elastiska objekt på början av behållaren (standard):

div {
  display: flex;
  justify-content: flex-start;
}

Prova själv

Exempel

Justera elastiska objekt på änden av behållaren:

div {
  display: flex;
  justify-content: flex-end;
}

Prova själv

Exempel

Visa utrymmet mellan elastiska objekt mellan raderna:

div {
  display: flex;
  justify-content: space-between;
}

Prova själv

Exempel

Visa utrymmet mellan elastiska objekt innan, mellan och efter raden:

div {
  display: flex;
  justify-content: space-around;
}

Prova själv

Webbläsarstöd

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

Tabellen anger den första webbläsarversion som helt stöder egenskapen med prefix -webkit- eller -moz-.

egenskap Chrome IE Firefox Safari Opera
justify-content 29.0
21.0 -webkit- 		11.0 28.0
18.0 -moz- 		9.0
6.1 -webkit- 		17.0