CSS align-content Özelliği

Tanım ve Kullanım

align-content Özelliği Değiştirme flex-wrap Özelliğin davranışı. Bu, align-items Benzer, ancak esnek öğeleri değil, esnek hatları hizalar.

Dikkat:Bu özellikin etkin olması için çok satırlı öğeler olmalıdır!

İpucu:Kullanım: justify-content Özellik, ana eksen (main-axis) üzerindeki öğeleri yatay olarak hizalar.

Ayrıca Bakınız:

CSS Eğitimleri:CSS Flexbox

CSS Eğitimleri:CSS Grid

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

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

CSS Referans Kılavuzu:justify-content Özelliği

HTML DOM Referans Kılavuzu:alignContent Özelliği

Örnek

Satırları esnek konteynerin merkezine yerleştir:

div {
  width: 70px;
  height: 300px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

Kişisel Deneyim

CSS Dilbilgisi

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

Özellik Değeri

Değer Açıklama
stretch Varsayılan Değer. Satırlar, kalan alanı kaplamak için uzar.
center Satırları, esnek konteynerin merkezine doğru toplar.
flex-start Satırları, esnek konteynerin başına doğru toplar.
flex-end Satırları, esnek konteynerin sonuna doğru toplar.
space-between Satırlar, esnek konteyner içinde eşit olarak dağıtılır.
space-around Satırlar, esnek konteyner içinde eşit olarak dağıtılır, her iki uçta da yarısı yer alır.
initial Bu özelliği varsayılan değerine ayarlar. Bakınız initial.
inherit Bu özelliği ebeveyn elementinden devralır. Bakınız inherit.

Teknik Ayrıntılar

Varsayılan Değer: stretch
Devralma: Hayır
Animasyon Yapımı: Desteklenmiyor. Bakınız:Animasyon İle İlgili Özellikler.
Sürüm: CSS3
JavaScript Dilbilgisi: object.style.alignContent="center"

Tarayıcı Desteği

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

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