CSS justify-content özelliği

Tanım ve Kullanım

justify-content özelliği (yatay) esnek konteyner öğelerini hizalar, öğeler ana eksende tüm kullanılabilir alanı doldurmazsa.

İpucu:Kullanın align-items özelliği Öğeleri dikey olarak hizalama özelliği.

Ayrıca bakınız:

CSS Eğitimi:CSS flexbox

CSS Eğitimi:CSS Grid

CSS Referans Kılavuzu:align-content özelliği

CSS Referans Kılavuzu:align-items özelliği

CSS Referans Kılavuzu:align-self özelliği

HTML DOM Referans Kılavuzu:justifyContent özelliği

Örnek

Konteynerin merkezinde esnek projeleri hizalayın:

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

Kişisel olarak deneyin

Sayfa altında daha fazla TIY örneği bulabilirsiniz.

CSS dilbilgisi

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

Özellik değeri

Değer Açıklama
flex-start Varsayılan değer. Projeler konteynerin başında yer alır.
flex-end Projeler konteynerin sonunda yer alır.
center Projeler konteynerin merkezinde yer alır.
space-between Projeler satır aralarında boşluk bırakır.
space-around Projeler satır öncesi, satır arasında ve satır sonrası boşluk bırakır.
initial Bu özelliği varsayılan değerine ayarlayın. Bakınız initial。
inherit Bu özelliği ebeveyn elementinden devralır. Bakınız inherit。

Teknik ayrıntılar

Varsayılan değer: flex-start
Geçiş: Hayır
Animasyon yapımı: Desteklenmiyor. Ayrıca bakınız:Animasyonla ilgili özellikler。
Sürüm: CSS3
JavaScript dilbilgisi: object.style.justifyContent="space-between"

Daha fazla örnek

Örnek

Konteynerin başında esnek projeleri hizalayın (varsayılan):

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

Kişisel olarak deneyin

Örnek

Konteynerin sonunda esnek projeleri hizalayın:

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

Kişisel olarak deneyin

Örnek

Satır arasında boşluklu esnek projeleri gösterin:

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

Kişisel olarak deneyin

Örnek

Satır öncesi, satır arasında ve satır sonrası boşluklu esnek projeleri gösterin:

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

Kişisel olarak deneyin

Tarayıcı Desteği

Tablo sayıları, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtmektedir.

跟随 -webkit- veya -moz- sayısal tanımlamaların ön ekli ilk sürümünü kullanın.

özellik 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