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.
Dukungan Browser
- 123
- 123
- 125
- 17,4
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.
align-content
menempatkan baris item fleksibel karena penampung fleksibel memiliki
ruang kosong di sumbu silang.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.
align-content
mengpusatkan heading secara vertikal dalam container fleksibel.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.
align-content
mengpusatkan judul secara vertikal dalam container blok (memerlukan Chrome
123 atau Safari 17.4 atau yang lebih baru).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.