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. Hal ini akan memungkinkan perataan arah blok tanpa perlu membuat tata letak fleksibel atau petak. Namun, Anda mungkin perlu mengupdate CSS jika telah menggunakan align-content di luar metode tata letak ini karena metode tersebut akan diterapkan sekarang.

Browser Support

• 123
• 123
• 125
• 17.4

align-content dalam tata letak fleksibel dan petak

Anda mungkin telah menggunakan align-content untuk meratakan item fleksibel atau jalur petak. Dalam tata letak fleksibel, properti align-content digunakan pada penampung fleksibel untuk meratakan item fleksibel pada sumbu silang. Dalam contoh berikut, nilainya adalah space-between sehingga mendistribusikan ruang yang tersedia di penampung flex di antara baris flex.

Properti align-content memberi spasi pada baris item fleksibel, karena penampung fleksibel memiliki ruang cadangan di sumbu silang.

Memusatkan item secara vertikal

align-content sangat berguna untuk memusatkan item secara vertikal dalam penampung. Untuk melakukannya, gunakan display: flex bersama dengan align-content: center. Hal ini menyebabkan item menjadi item fleksibel, dan perilaku item fleksibel default lainnya juga akan diterapkan. Dalam 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.

Properti align-content memusatkan judul secara vertikal dalam penampung fleksibel.

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

Properti align-content menempatkan judul di tengah secara vertikal dalam penampung blok (memerlukan Chrome 123 atau Safari 17.4 atau yang lebih baru).

Menguji dukungan align-content dalam tata letak blok

Sayangnya, dukungan align-content dalam tata letak blok tidak dapat diuji. Karena align-content telah didukung sejak lama dalam tata letak flex dan grid, menggunakan kueri fitur dengan @supports akan selalu menampilkan true. Ini adalah situasi yang sama dengan yang terjadi pada properti gap di flexbox. Grup Kerja CSS sedang mempelajari solusi untuk implementasi parsial seperti ini.

Periksa situs Anda untuk melihat apakah ada perataan yang tidak diharapkan

Properti align-content telah ditentukan selama bertahun-tahun dalam spesifikasi sebagai bekerja pada 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 flex atau petak, properti tersebut akan mulai berpengaruh mulai Chrome 123. Telusuri CSS Anda untuk penggunaan align-content dan gunakan versi beta untuk menguji situs dan aplikasi Anda jika hal ini mungkin terjadi pada Anda.