Son referans hizalaması

Tüm önemli tarayıcı motorları artık CSS ızgarasında ve flexbox'ta son referans hizalamasını desteklemektedir.

Rachel Andrew

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.

İ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 hizalıdı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.