Tüm önemli tarayıcı motorları artık CSS ızgarasında ve flexbox'ta son referans hizalamasını desteklemektedir.
first
ve last
anahtar kelimelerini kullanarak hizalama artık önde gelen tüm motorlarda yapılabilmektedir. Bu, esnek veya ızgara öğelerinden oluşan grupları hizalarken başka bir seçenek olarak son referans hizalamasını kullanabileceğimiz anlamına gelir.
Tarayıcı Desteği
- 108
- 108
- 52
- 16,2
İlk temel hizalama
align-items
değerini baseline
olarak ayarlarsanız sonuç ilk referans hizalaması olur. Bu nedenle, hizaladığınız öğenin ilk referans çizgisi (hizalama konusu olarak tanımlanır), gruptaki diğer öğelerin ilk referans çizgisiyle uyumlu olur. Bunu aşağıdaki örnekte görebilirsiniz. İlk iki esnek öğe, align-items: baseline
kullanılarak hizalanır ve böylece daha büyük metin tarafından oluşturulan referans çizgisi boyunca hizalanır. Son öğe flex-start
ile hizalandığından esnek kapsayıcının başlangıcına hizalanır.
Son referans hizalaması
Bir ızgara veya esnek öğeyi last baseline
değeriyle hizalarken, söz konusu öğenin son referans değeri, dahil olduğu referans paylaşım grubunun son referansıyla uyumlu olur. Aşağıdaki örnekte son referans hizalaması gösterilmektedir. İlk esnek öğe, büyük öğedeki metnin son satırıyla hizalanır. Bu gruptaki son öğe, esnek kapsayıcının sonu olan flex-end
ile hizalanır.
Yedek hizalama
Hizalama konusunun uyumlu hale getirilecek bir temel paylaşım grubu yoksa yedek hizalama kullanılır. baseline
ve first baseline
için yedek hizalaması start
, last baseline
için yedek hizalaması end
şeklindedir.
Yeni birlikte çalışabilirlik serisinin kapsamında