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ı
Markanız için 300X300 alan.
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
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.
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) dizilimifirst-baseline
içinstart
,last-base-line
için iseend
'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.
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.
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.
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 kipistart
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ğialign-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ğialign-items
özelliği değerini yeniden yazarak flex ögelerin anki flex hattını kaydırır.