Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Memusatkan Elemen pada Baris Terakhir dengan Flexbox?
Cara Memusatkan Elemen pada Baris Terakhir Menggunakan Flexbox
Apabila menggunakan grid CSS untuk menyusun berbilang item, ia boleh menjadi mencabar untuk menjajarkan mereka dalam satu baris. Grid direka bentuk terutamanya untuk menjajarkan item dalam lajur atau runut, menjadikannya sukar untuk mencapai penjajaran merentas seluruh baris.
Mengapa Grid CSS Tidak Sesuai
Grid CSS menggunakan sistem trek dan sel, dengan trek berjalan sama ada secara mendatar atau menegak. Apabila meletakkan item dalam sel grid, anda boleh mengawal penjajarannya dalam sel tertentu itu. Walau bagaimanapun, menjajarkan item merentas berbilang sel atau keseluruhan baris terhalang oleh trek silang.
Menggunakan Flexbox untuk Penjajaran
Pendekatan yang lebih sesuai untuk menjajarkan item merentas baris ialah menggunakan flexbox. Flexbox direka khusus untuk menyusun item di sepanjang paksi tunggal (mendatar atau menegak), memberikan anda lebih kawalan ke atas penjajaran.
Untuk memusatkan elemen pada baris terakhir menggunakan flexbox, gunakan langkah berikut:
Contoh Kod
Coretan kod berikut menunjukkan cara untuk mencapai penjajaran berpusat pada baris terakhir menggunakan flexbox:
#container { display: flex; flex-wrap: wrap; justify-content: center; } .item { flex: 0 0 calc(16.66% - 20px); background: teal; color: white; padding: 20px; margin: 10px; } * { box-sizing: border-box; }
Penjelasan
Dalam contoh ini:
Dengan menggunakan flexbox, anda boleh mencapai penjajaran berpusat pada baris terakhir, tanpa mengira bilangan item, menjadikan reka letak anda lebih menarik secara visual.
Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Elemen pada Baris Terakhir dengan Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!