Perataan garis dasar terakhir

Semua mesin browser utama kini mendukung penyelarasan garis dasar terakhir dalam petak CSS dan flexbox.

Rachel Andrew

Penyelarasan menggunakan kata kunci first dan last kini tersedia di semua mesin utama. Ini berarti bahwa kita dapat menggunakan perataan garis dasar terakhir sebagai opsi lain saat menyelaraskan kelompok item fleksibel atau petak.

Perataan dasar pengukuran pertama

Jika Anda menetapkan nilai align-items ke baseline, hasilnya akan menjadi penyelarasan dasar pengukuran pertama. Oleh karena itu, dasar pengukuran pertama item yang Anda selaraskan (dijelaskan sebagai subjek perataan) akan selaras dengan dasar pengukuran pertama item lain dalam grup. Anda dapat melihatnya dalam contoh berikut, dengan dua item fleksibel pertama diratakan menggunakan align-items: baseline, sehingga disejajarkan di sepanjang dasar pengukuran yang dibuat oleh teks yang lebih besar. Item terakhir disejajarkan dengan flex-start sehingga selaras dengan awal penampung fleksibel.

Perataan garis dasar terakhir

Saat menyelaraskan item petak atau fleksibel dengan nilai last baseline, dasar pengukuran terakhir item tersebut akan disejajarkan dengan dasar pengukuran terakhir grup berbagi dasar pengukuran yang menjadi bagiannya. Contoh berikut menunjukkan perataan garis dasar terakhir, dengan item fleksibel pertama yang disejajarkan dengan baris terakhir teks dalam item yang lebih besar. Item terakhir dalam grup ini disejajarkan dengan flex-end, yang merupakan akhir dari penampung fleksibel.

Penyelarasan penggantian

Jika subjek perataan tidak memiliki grup berbagi dasar pengukuran untuk disejajarkan, perataan penggantian akan digunakan. Untuk baseline, dan first baseline, perataan penggantian adalah start, dan untuk last baseline perataan penggantiannya adalah end.