Chrome 123'ten itibaren, blok ve tablo düzenlerinde CSS Kutu Hizalaması'ndaki align-content
özelliğini kullanabilirsiniz. Bu sayede, esnek veya ızgara düzeni oluşturmak zorunda kalmadan blok yönünü hizalayabilirsiniz. Ancak align-content
'ü bu sayfa düzeni yöntemlerinin dışında kullandıysanız artık geçerli olacağından CSS'nizi güncellemeniz gerekebilir.
Browser Support
Esnek ve ızgara düzenlerinde align-content
Flex öğelerini veya ızgara kanallarını hizalamak için muhtemelen align-content
'ü kullanmışsınızdır. Flex düzeninde, flex öğelerin çapraz eksende hizalanması için flex kapsayıcıda align-content
mülkü kullanılır. Aşağıdaki örnekte space-between
değerine sahip olduğundan esnek kapsayıcıdaki kullanılabilir alanı esnek satırlar arasında dağıtır.
align-content
mülkünün, flex kapsayıcının çapraz eksende boş alanı olması nedeniyle flex öğelerinin satırlarını aralıklı hale getirdiği görülüyor.Bir öğeyi dikey olarak ortala
align-content
özellikle bir öğeyi kapsayıcı içinde dikey olarak merkezlemek için yararlıdır. Bunu yapmak için align-content: center
ile birlikte display: flex
kullanın. Bu işlem, öğenin bir flex öğesi haline gelmesine neden olur ve diğer varsayılan flex öğesi davranışları da geçerli olur. Aşağıdaki örnekte başlık, align-content: center
ile dikey olarak ortalanmıştır. Bu, öğenin içeriğe sığacak şekilde küçülmesine neden olur. Bu nedenle öğeye flex-grow: 1
uygulamanız gerekir.
align-content
özelliği, başlığı bir flex kapsayıcıda dikey olarak merkezler.Blok düzeni için align-content
'ü kullanabildiğinizde, mülkün çalışması için esnek bir düzen oluşturmanıza gerek kalmadan dikey hizalama elde edebilirsiniz. Öğe blok öğesi olarak kaldığından ek özellik eklemeniz gerekmez. Tek değişiklik, hizalamayla ilgilidir.
align-content
mülk, başlığı bir blok kapsayıcı içinde dikey olarak merkezler (Chrome 123 veya Safari 17.4 veya sonraki sürümler gerekir).Blok düzenlerinde align-content
desteğini test etme
Maalesef blok düzeninde align-content
desteğini test etmek mümkün değildir. align-content
, esnek ve ızgara düzeninde uzun süredir desteklendiğinden, @supports
ile özellik sorguları kullanmak her zaman doğru değerini döndürür. Bu durum, flexbox'taki gap
mülküyle aynıdır. CSS Çalışma Grubu, bunun gibi kısmi uygulamalar için bir çözümü araştırıyor.
Sitelerinizin beklenmedik bir şekilde hizalanıp hizalanmadığını kontrol edin
align-content
mülkü, blok düzenleriyle çalışmak üzere özellikte uzun yıllardır tanımlanmıştır. Hiçbir tarayıcı bu bağlamların dışında align-content
'ü desteklemediği için hiçbir şey yapmadı. Ancak mülkü, flex veya grid kapsayıcı olmayan bir öğeye eklediyseniz bu özellik Chrome 123'ten itibaren geçerli olmaya başlayacaktır. CSS'nizde align-content
kullanımı olup olmadığını arayın ve bu durum sizin için geçerliyse sitelerinizi ve uygulamalarınızı test etmek üzere beta sürümünü kullanın.