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:

1. Balut item dalam bekas fleksibel.
2. Tetapkan sifat justify-content ke tengah untuk menjajarkan item secara mendatar dalam bekas.
3. Gunakan sifat fleksibel untuk menentukan lebar dan fleksibiliti yang diingini bagi setiap item.
4. Pastikan semua elemen mempunyai sifat bersaiz kotak yang ditetapkan kepada kotak sempadan untuk memasukkan pelapik dan sempadan dalam pengiraan lebar keseluruhan mereka.

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:

• #bekas disediakan sebagai bekas fleksibel dengan flex-wrap: balut untuk membenarkan item dibalut pada berbilang baris.
• The justify-content: tengah memastikan item dipusatkan secara mendatar dalam bekas.
• Sifat flex digunakan untuk mengira lebar setiap item secara dinamik berdasarkan ruang yang ada.
• Menetapkan saiz kotak: kotak sempadan menjamin bahawa pelapik dan sempadan disertakan dalam lebar keseluruhan item, mengelakkan jarak tidak sekata.

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!