Chrome 123'te, blok ve tablo düzenlerinde CSS Box Alignment'teki align-content özelliğini kullanabilirsiniz. Bu, esnek veya ızgara düzeni oluşturmaya gerek kalmadan blok yönü hizalamasını sağlar. Ancak, align-content öğesini bu düzen yöntemlerinin dışında kullandıysanız CSS'niz artık geçerli olacağından
CSS'nizi güncellemeniz gerekebilir.
Tarayıcı Desteği
- 123
- 123
- 125
- 17,4
Esnek ve ızgara düzenlerinde align-content
Esnek öğeleri veya kılavuz kanallarını hizalamak için muhtemelen align-content kullandınız. Esnek düzende, flex öğeleri çapraz eksende hizalamak için flex container'da align-content özelliği kullanılır. Aşağıdaki örnekte, space-between değerine sahip olduğu için esnek kapsayıcıdaki kullanılabilir alanı esnek satırlar arasında dağıtıyor.
align-content özelliği, esnek kapsayıcının çapraz ekseninde boş alan bulunduğu için esnek öğe satırlarını boşluk bırakır.Öğeyi dikey olarak ortala
align-content öğesinin özellikle kullanışlı olduğu yer, bir öğenin kapsayıcı içinde dikey olarak ortalanmasıdır. Bunun için align-content: center ile birlikte display: flex politikasını kullanın. Bu durum, öğenin esnek öğe haline gelmesine neden olur ve diğer varsayılan esnek öğe davranışları da geçerli olur. Aşağıdaki örnekte başlık, align-content: center ile dikey olarak ortalanır. Bu durum, öğenin içeriğe sığması için daralmasına neden olur. Bu nedenle, öğeye flex-grow: 1 uygulamanız gerekir.
align-content özelliği, başlığı bir esnek container içinde dikey olarak ortalar.Blok düzeninde kullanılabilen align-content sayesinde, mülkün çalışması için esnek bir düzen oluşturmaya gerek kalmadan dikey hizalamayı gerçekleştirebilirsiniz. Öğe blok öğesi olarak kaldığı için ek özellik gerekmez, tek değişiklik hizalamadadır.
align-content özelliği, başlığı bir blok kapsayıcı içinde dikey olarak ortalar (Chrome 123 veya Safari 17.4 veya sonraki bir sürüm gerekir).Blok düzenlerde align-content desteğini test edin
Maalesef blok düzeninde align-content desteğini test etmek mümkün değildir. align-content, esnek ve tablo düzeninde uzun süredir desteklendiğinden, @supports ile özellik sorgularının kullanılması her zaman "doğru" değerini döndürür. Bu, flexbox'taki gap özelliğinde yaşananla aynıdır. CSS Çalışma Grubu, bu gibi kısmi uygulamalar için bir çözüm arıyor.
Beklenmedik hizalama olup olmadığını görmek için sitelerinizi kontrol edin
align-content özelliği, spesifikasyonda yıllardır blok düzenleri üzerinde çalışma olarak tanımlanmıştır. Hiçbir tarayıcı bu bağlamlar dışında align-content özelliğini desteklemediğinden hiçbir şey yapmadı. Bununla birlikte, özelliği esnek veya ızgara kapsayıcı olmayan bir şeye eklediyseniz Chrome 123'ten itibaren geçerli olmaya başlayacaktır. CSS'nizde align-content kullanımı için arama yapın ve bu durumda sitelerinizi ve uygulamalarınızı test etmek için betayı kullanın.