Sen burayı gördün, başkası da görecek. Teklifini gönder, sitenin kahramanı ol.

Sponsor'un katkılarıyla...

CSS align-content Özelliği

CSS align-content Özelliği

CSS align-content özelliği esnek kaptaki içerik ögelerinin arasındaki ve çevresindeki boşluğun nasıl dağıtılacağını belirler. CSS align-content özelliğinin tek satırlık içerikte hiç bir etkisi yoktur.

/ 19.05.1919?

Yazar:
SonDevrimBu Yazı
Toplam285201947
Bugün1095

align-content Özelliği Temel Özellikler

CSS Değeri :
align-content: normal | <dayanak-konumu> | <içerik-dağıtımı> | <taşma-konumu> | <içerik-konumu>;

<dayanak-konumu> = [ first | last ] baseline
<içerik-dağıtımı> = space-between | space-around | space-evenly | stretch
<taşma-konumu> = unsafe | safe
<içerik-konumu> = center | start | end | flex-start | flex-end
Örnek :
align-content: start; | align-content: center;
Öntanımlı Değer :
normal
Uygulanabilen Özellikler :
Çok satırlı flex kaplar.
Kalıtsallık :
Yok.
Tarayıcı Desteği :
Tüm Tarayıcılar
Animasyon :
Desteklenmiyor animation Özelliği
Javascript :
öge.style.alignContent = "auto";
Sürüm :
CSS Flexible Box Layout Module / CSS Box Alignment Module Level 3
Açıklama :

align-content Özelliği Kullanımı

Sponsor'un katkılarıyla...

Markanız için 300X300 alan.

Reklamı kapat görseli

CSS align-content özelliği esnek kaptaki içerik ögelerinin arasındaki ve çevresindeki boşluğun nasıl dağıtılacağını belirler. CSS align-content özelliğinin tek satırlık içerikte hiç bir etkisi yoktur.

CSS align-content özelliğinin tek satırlık içeriğe etkisi yoktur.

align-content Özelliği Tarayıcı Desteği

MasaüstüTaşınabilir
Tarayıcı →Özellik ↓
Temel Destek 28
48 -webkit- [1]
49 -webkit-
12.1 9
6.1 -webkit-
29
21 -webkit-
11
space-evenly 52 Yok Yok Yok Yok
start & end Var Var [2] ? Var [2] Yok
left & right 52 — 60 [3]
Var [2]
Var [2] ? Var [2] Yok
baseline Var 44 ? 57 Yok
first-baseline & last-baseline 52 Yok ? Yok Yok
stretch 52 44 ? 57 Yok
Tarayıcı →Özellik ↓
Temel Destek 28
48 -webkit- [1]
49 -webkit-
12.1 9.2
7.1 -webkit-
4.4 ?
space-evenly 52 Yok Yok Yok ?
start & end Var Var [2] ? Var [2] ?
left & right 52 — 60 [3]
Var [2]
Var [2] ? Var [2] ?
baseline Var 44 ? 57 ?
first-baseline & last-baseline 52 Yok ? Yok ?
stretch 52 44 ? 57 ?

[1] 48'inci sürümden beri about:config'te layout.css.prefixes.webkit ayarı true olarak yapılandırılmış olmalı.

[2] Bu değer tanınıyor ancak hiç bir etkisi yok.

[3] align-content artık left ve right değerlerini onaylamıyor.

Kaynak: Mozilla Geliştirici Ağı - MDN 10 Yaşında - CC-BY-SA 2.5

align-content Özelliğinin Alabileceği Değerler


Flex yönü -yatay- satır (row) ise; ana-aks yatay, çapraz-aks ise dikeydir.

Flex yönü -dikey- sütun (column) ise; ana-aks dikey, çapraz-aks ise yataydır.


space-* örneklerinde gösterilen görseller justify-content özelliğine aittir ancak yinede boşluk dağılımında geçerli olan kurallar align-content özelliği ile birebir aynıdır.


start
Ögeler birbiri ardına dizilim kabının çapraz-aksının baş kenarına doğru boşalırlar.
end
Ögeler birbiri ardına dizilim kabının çapraz-aksının kıç kenarına doğru boşalırlar.
flex-start
Ögeler birbiri ardına esnek kabın çapraz-baş'ına bağlı olarak dizilim kabının kenarına doğru boşalırlar. Bu yalnızca flex arayüzüne iye ögelere uygulanır. Flex kabın çocuğu olmayanlar için start değeri gibi işlenir.
flex-end
Ögeler birbiri ardına esnek kabın çapraz-kıç'ına bağlı olarak dizilim kabının kenarına doğru boşalırlar. Bu yalnızca flex arayüzüne iye ögelere uygulanır. Flex kabın çocuğu olmayanlar için end değeri gibi işlenir.
center
Ögeler çapraz-aks boyunca birbiri ardına dizilim kabının ortasına doğru boşalırlar.
normal
Ögeler eğer align-content özelliği değeri ayarlanmamışsa öntanımlı konumlarında kalırlar.
baseline
baseline değeri; first- ya da last-baseline'ye dizilmeyi belirler : Hattı paylaşan topluluktaki kutuların ilk ya da son dayanak noktasının paylaşılan "hat"ta uygun bir biçimde dizilmesini sağlayarak kutunun dizilim noktasını first- ya da last-baseline'ye dizer.
Geri dönüş (kurtarma) dizilimi first-baseline için start, last-base-line için ise end'tir.
first-baseline
last-baseline
space-between
Ögeler çapraz-aks'ta dizilim kabına düzenli biçimde dağıtırlırlar. Her bir ögenin arasında bırakılan boşluk aynıdır. İlk öge ana-baş kenara boşaltılırken son öge ise ana-son kenara boşaltılır.
align-content - space-between örneği gösterimi
space-around
Ögeler çapraz-aks'ta dizilim kabına düzenli biçimde dağıtırlırlar. Komşu çiftleri arasında bırakılan boşluklar aynıdır. İlk ögeden önce ve son ögeden sonra bırakılan boşluk her bir komşu çiftinin arasındaki boşluğun yarısı kadardır.
align-content - space-around örneği gösterimi
space-evenly
Ögeler çapraz-aks'ta dizilim kabına düzenli biçimde dağıtırlırlar. Komşu çiftleri arasında bırakılan boşluklar, ana-baş kenar ve ilk öge, ana-kıç kenar ve son öge boşlukları birbirine eşittir.
align-content - space-evenly örneği gösterimi
stretch
Eğer çapraz akstaki ögelerin birleştirilmiş boyutları dizilim kabının boyutlarından küçükse ve de ögeler kendiliğinden (auto) boyutlandırılıyorsa boyutları; eşit biçimde (ama orantılı olmadan), max-height özelliği/max-width özelliği (ya da eş değer bir işlev) tarafından dayatılan sınırlara saygı gösterilerek bütün "kendiliğinden boyutlandırılan" ögeler çapraz aksa sığacak biçimde artar.

(Bu çeviri için kocaman bir alkış istiyorum. 👏)


safe
safe değeri ile; öge boyutu dizilme kabından taşarsa öge dizilme kipi start imiş gibi dizilir.
unsafe
unsafe değeri ile; ögenin ve dizilme kabının göreli boyutlarına bakmaksızın, verilen dizilme değeri onurlandırılır.

İlişkili Özellikler

align-items Özelliği
align-items özelliği; tarayıcının flex ögelerin çevresindeki ve arasındaki boşluğu onların kabının çapraz-aks'ı boyunca nasıl dağıtacağını belirler. justify-content özelliği gibi davranır ama dikey doğrultuda.
align-self Özelliği
align-items özelliği değerini yeniden yazarak flex ögelerin anki flex hattını kaydırır.
Reklamı kapat görseli

Görüş Bildirin?

Toplam Oy Sayısı : Şimdilik hiç oy verilmemiş.

Ortalama Oy Değeri : Verilen oyun geçerli olması için yapılan yorumun onaylanması gerekiyor.

Görüşler yükleniyor . . .

Yorum Ekle?

1000
CSS align-content Özelliği