Bagaimana untuk Memusatkan Baris Terakhir Item dalam Reka Letak Grid CSS?

Cara Mencapai Penjajaran Pusat pada Baris Terakhir Grid CSS

Apabila menggunakan Grid CSS untuk elemen susun atur, ia menjadi mencabar untuk dicapai penjajaran tengah pada baris terakhir disebabkan oleh sifat trek grid. Walau bagaimanapun, flexbox menyediakan penyelesaian yang lebih sesuai untuk keperluan penjajaran sedemikian.

Untuk menjajarkan baris terakhir item secara mendatar di tengah, gunakan sifat flexbox pada elemen bekas:

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

Fleks -wrap: wrap property membenarkan item mengalir ke dalam berbilang baris jika perlu, manakala justify-content: tengah mengemas semua item dalam arah mendatar berbanding keseluruhan baris.

Seterusnya, tetapkan gelagat fleksibel untuk item individu:

.item {
  flex: 0 0 calc(16.66% - 20px);
  background: teal;
  color: white;
  padding: 20px;
  margin: 10px;
}

Di sini, flex: 0 0 calc(16.66% - 20px) menentukan dimensi item dan memastikan semua item adalah sama saiz. saiz kotak: kotak sempadan hendaklah disertakan untuk pengiraan yang tepat.

Akibatnya, item akan diagihkan sama rata merentas baris dan baris terakhir akan dipusatkan kerana kandungan justify: harta pusat. Pendekatan ini menghapuskan batasan Grid CSS dan menyediakan penyelesaian yang fleksibel untuk memusatkan item baris terakhir untuk bilangan unsur yang sewenang-wenangnya.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Baris Terakhir Item dalam Reka Letak Grid CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!