CSS justify-content ominaisuus

Määrittely ja käyttö

justify-content ominaisuus (horisontaalinen) kohdistaa joustavien konttien elementit, kun elementit eivät käytä kaikkea saatavilla olevaa tilaa pääakselilla.

Vinkki:Käytä align-items ominaisuus Ominaisuus kohdistaa vertikaalisesti elementtejä.

Katso myös:

CSS oppitunnit:CSS flexbox

CSS oppitunnit:CSS Grid

CSS viittausoppas:align-content ominaisuus

CSS viittausoppas:align-items ominaisuus

CSS viittausoppas:align-self ominaisuus

HTML DOM viittausoppas:justifyContent ominaisuus

Esimerkki

Täsmää joustavat kohteet konttorin keskelle:

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

Kokeile itse

Lisää TIY-esimerkkejä löytyy sivun alalta.

CSS syntaksi

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

Ominaisuuden arvo

Arvo Kuvaus
flex-start Oletusarvo. Kohteet sijaitsevat konttorin alussa.
flex-end Kohteet sijaitsevat konttorin lopussa.
center Kohteet sijaitsevat konttorin keskellä.
space-between Kohteet jättävät tilaa rivejen välissä.
space-around Kohteet jättävät tilaa ennen riviä, välissä ja jälkeen rivin.
initial Aseta tämä ominaisuus sen oletusarvoon. Katso: initial。
inherit Periisi tämän ominaisuuden vanhemmalta elementiltä. Katso: inherit。

Tekninen yksityiskohta

Oletusarvo: flex-start
Perintä: Ei
Animaation tekeminen: Ei tuettu. Katso:Animaatiotukiasetukset。
Versio: CSS3
JavaScript syntaksi: object.style.justifyContent="space-between"

Lisää esimerkkejä

Esimerkki

Täsmää joustavat kohteet konttorin alkuun (oletusarvo):

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

Kokeile itse

Esimerkki

Täsmää joustavat kohteet konttorin loppuun:

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

Kokeile itse

Esimerkki

Näytä etäisyyttä välissä joustaville kohteille:

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

Kokeile itse

Esimerkki

Näytä etäisyyttä ennen riviä, välissä ja jälkeen joustaville kohteille:

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

Kokeile itse

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee ominaisuutta täysin.

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee ominaisuutta etuliitteellä -webkit- tai -moz-.

ominaisuus 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