Dukungan untuk align-content dalam tata letak blok dan tabel

Rachel Andrew

Mulai Chrome 123, Anda dapat menggunakan properti align-content dari CSS Box Alignment pada tata letak blok dan tabel. Ini akan memungkinkan penyelarasan arah blok tanpa perlu membuat tata letak fleksibel atau {i>grid<i}. Namun, Anda mungkin perlu memperbarui CSS jika telah menggunakan align-content di luar metode tata letak ini karena sekarang akan diterapkan.

align-content dalam tata letak fleksibel dan petak

Anda mungkin telah menggunakan align-content untuk menyelaraskan item fleksibel atau trek petak. Dalam tata letak fleksibel, properti align-content digunakan pada penampung fleksibel untuk meratakan item fleksibel pada sumbu silang. Dalam contoh berikut, parameter memiliki nilai space-between sehingga mendistribusikan ruang yang tersedia dalam container fleksibel di antara baris fleksibel.

Letakkan item di tengah secara vertikal

Saat align-content sangat berguna, Anda dapat menempatkan item di tengah secara vertikal dalam container. Untuk melakukannya, gunakan display: flex beserta align-content: center. Hal ini menyebabkan item menjadi item fleksibel, dan perilaku item fleksibel default lainnya juga diterapkan. Pada contoh berikut, judul dipusatkan secara vertikal dengan align-content: center, hal ini menyebabkan item menyusut agar sesuai dengan konten, sehingga Anda perlu menerapkan flex-grow: 1 ke item tersebut.

Dengan align-content yang tersedia untuk tata letak blok, Anda dapat mencapai perataan vertikal tanpa perlu membuat tata letak fleksibel agar properti dapat berfungsi. Tidak ada properti tambahan yang diperlukan karena item tetap menjadi item blok, satu-satunya perubahan adalah pada perataan.

Menguji dukungan align-content dalam tata letak blok

Sayangnya, pengujian dukungan align-content tidak dapat dilakukan dalam tata letak blok. Karena align-content telah didukung sejak lama dalam tata letak fleksibel dan petak, penggunaan kueri fitur dengan @supports akan selalu menampilkan benar (true). Ini adalah situasi yang sama dengan yang terjadi dengan properti gap di flexbox. CSS Working Group sedang mengeksplorasi solusi untuk implementasi parsial seperti ini.

Periksa apakah ada penyelarasan yang tidak terduga di situs Anda

Properti align-content telah ditentukan selama bertahun-tahun di spesifikasi sebagai mengerjakan tata letak blok. Karena tidak ada browser yang mendukung align-content di luar konteks ini, browser tidak melakukan apa pun. Namun, jika Anda telah menambahkan properti ke sesuatu yang bukan penampung fleksibel atau petak, properti tersebut akan mulai berlaku di Chrome 123. Telusuri CSS Anda untuk mengetahui penggunaan align-content dan gunakan versi beta untuk menguji situs dan aplikasi Anda jika hal ini terjadi pada Anda.