Ders Programı

CSS Referans Kılavuzu

CSS 属性

Seçmeli Dersler

Kurs Önerileri:

CodeW3C.com Kıymetli Sandık

CSS place-content özelliği

Önceki sayfa perspective-origin
Sonraki sayfa place-items

Tanım ve Kullanım

place-content Özellik esnek kutu (flexbox) ve grid düzenlemelerinde kullanılır ve aşağıdaki özelliklerin kısaltmasıdır:

align-content
justify-content

Eğer place-content özelliği iki değer içeriyorsa:

place-content: start center;

align-content özelliğinin değeri 'start' olmalıdır
justify-content özelliğinin değeri 'center' olmalıdır

Eğer place-content özelliği sadece bir değer içeriyorsa:

place-content: end;

align-content ve justify-content özelliklerinin değerleri 'end' olarak ayarlanmıştır

Örnek

Örnek 1

Esnek konteynerın altına esnekliği ayarlayın ve yatay yönde esnek projeler arasındaki mesafeyi eşit hale getirin:

Blok yönündeki ek boşluk, her ağ öğesi etrafında eşit olarak dağıtılır ve ağ öğeleri satır içi yönünde ortadadır：
  display: flex;
  display: flex;
place-content: space-around center;

}

place-content: end space-between;

Örnek 2: Ağ Düzen

Blok yönündeki ek boşluk, her ağ öğesi etrafında eşit olarak dağıtılır ve ağ öğeleri satır içi yönünde ortadadır：
  #container {
  display: grid;
place-content: space-around center;

}

Kişisel Deneyim

CSS Dilbilgisiplace-content: normal|value

|initial|inherit;

Özellik Değeri	Değer
normal	Açıklama align-content ve justify-content'e değer atanmamışsa eşittir. Varsayılan Değer. Düzenleme bağlamına bağlıdır。
stretch	Ağ: Eğer boyutlandırılmamışsa, ağ öğeleri ağ konteynerini doldurmak için uzar。 Esnek Kutu: Eğer esnek öğeler çapraz eksen üzerinde boyutlandırılmamışsa, esnek konteyneri doldurmak için çapraz eksen üzerinde uzar。
start	Öğeleri konteynerin başlangıç konumuna hizalar。
end	Öğeleri konteynerin son konumuna hizalar。
center	Öğeleri konteynerin merkezi konumuna hizalar。
space-between	Konteynerin iki ekseninde mevcut alanı eşit olarak dağıtır, böylece öğeler arasındaki mesafe eşittir。
space-around	Konteynerin iki ekseninde mevcut alanı eşit olarak dağıtır, böylece her öğenin etrafındaki boşluklar eşittir。
space-evenly	Öğeleri konteynerin iki ekseninde eşit olarak dağıtır。
overflow-alignment	'safe'：İçerik aşırıya çıktığında, öğe hizalamasını 'start' olarak ayarlar。 'unsafe'：İçerik aşırıya çıktığında bile, hizalama değerlerini değiştirmeme。
initial	Bu özelliği, varsayılan değerine ayarlar. bkz： initial。
inherit	Bu özelliği, ebeveyn elemanından miras alır. bkz： inherit。

Teknik Ayrıntılar

Varsayılan Değer：	normal
Miras Alanı：	Hayır
Animasyon Yapımı：	Desteklenmiyor. bkz：Animasyon İle İlgili Özellikler。
Sürüm：	CSS3
JavaScript Dilbilgisi：	object.style.placeContent="end space-around"