Bagaimanakah Saya Boleh Memusatkan Elemen Hanya pada Baris Terakhir Susun Atur Grid Responsif?

Memusatkan Elemen pada Baris Terakhir: Grid CSS lwn. Flexbox

Dilema:
Apabila menggunakan Grid CSS untuk menjajarkan item dalam grid sama rata, bagaimana anda boleh memusatkan elemen pada baris terakhir sahaja sambil menampung sebarang bilangan item?

Tidak Sesuai untuk Grid CSS:
Grid CSS tidak sesuai untuk menjajarkan item merentas seluruh baris atau lajur, kerana trek silang silang menghalang kesan yang diingini.

Alternatif: Flexbox
Untuk mencapai pemusatan yang diingini, pertimbangkan menggunakan flexbox dengan justify-content: center. Ini akan mengemas item secara mendatar di tengah-tengah baris, manakala jidar menolaknya.

Mekanik:
Pada baris penuh, justify-content tidak memberi kesan, menjadikan item sepenuhnya dibenarkan tanpa ruang kosong. Walau bagaimanapun, pada baris dengan ruang kosong (iaitu, baris terakhir), item akan menjadi berpusat.

Contoh:

CSS:

#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;
}

HTML:

<div>

Keputusan:
Dengan pendekatan ini, item pada baris terakhir akan dipusatkan manakala reka letak kekal responsif kepada kiraan item yang berbeza.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memusatkan Elemen Hanya pada Baris Terakhir Susun Atur Grid Responsif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!