Dukungan untuk align-content dalam tata letak blok dan tabel

Rachel Andrew

Mulai Chrome 123, Anda dapat menggunakan properti align-content dari Penyesuaian Kotak CSS 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 memperbarui CSS jika telah menggunakan align-content di luar metode tata letak ini karena sekarang akan diterapkan.

Browser Support

• 123
• 123
• 125
• 17.4

align-content dalam tata letak flex dan petak

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

Properti align-content menjauhkan baris item fleksibel, karena penampung fleksibel memiliki ruang kosong di sumbu silang.

Menempatkan item di tengah 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 berlaku. Dalam contoh berikut, judul dipusatkan secara vertikal dengan align-content: center, sehingga item menyusut agar sesuai dengan konten, dan oleh karena itu Anda perlu menerapkan flex-grow: 1 ke item.

Properti align-content memusatkan heading 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 ada properti tambahan yang diperlukan karena item tetap menjadi item blok, satu-satunya perubahan adalah pada perataan.

Properti align-content memusatkan heading 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 untuk align-content tidak dapat diuji 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 nilai benar. Ini adalah situasi yang sama yang terjadi dengan properti gap di flexbox. Grup Kerja CSS sedang mengeksplorasi solusi untuk penerapan parsial seperti ini.

Periksa situs Anda untuk melihat adanya penyejajaran yang tidak terduga

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