Bagaimana untuk Mencegah Balutan Flexbox daripada Memusatkan Elemen Terakhir pada Skrin yang Lebih Kecil?

Balut Flexbox: Menyesuaikan Peletakan Elemen

Dalam Flexbox, mengawal gelagat pembalut elemen adalah penting untuk mencapai reka letak yang diingini. Untuk menangani isu yang diterangkan dalam soalan, di mana dua kad terakhir dipusatkan dan bukannya dijajarkan ke kiri apabila skrin mengecil, kami boleh menggunakan beberapa teknik.

1. Elemen Hantu:

Satu pendekatan melibatkan mencipta elemen "hantu" yang mengisi ruang kosong pada baris terakhir. Sebagai contoh, jika kita menjangkakan maksimum empat lajur, kita boleh memperkenalkan tiga div kosong sebagai elemen hantu. Ini memastikan elemen membalut dari kiri, menjajarkan sama pada berbilang baris.

2. Elemen Pseudo:

Pilihan lain ialah memanfaatkan elemen pseudo (:sebelum dan :selepas). Menambah div kosong sebelum dan selepas elemen sebenar berkesan mengurangkan bilangan elemen hantu yang diperlukan oleh dua. Kaedah ini juga menghalang sebarang gangguan visual pada baris terakhir.

Pelaksanaan:

Dalam kod yang disediakan, kita boleh mengubah suai CSS seperti berikut untuk mencapai gelagat yang diingini:

.card {
  /* Styles for the card elements */
}

.card:empty {
  width: 300px; /* Width of empty card */
  box-shadow: none; /* Remove box-shadow for empty cards */
  margin: 2rem; /* Keep empty cards aligned with actual cards */
  padding-bottom: 0; /* Remove padding for empty cards */
}

.recipe-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

Dalam HTML, kami menambah elemen hantu yang diperlukan:

<div class="container">
  <div class="recipe-grid">
    <!-- Actual card elements -->
    <div class="card">
      <!-- Card content -->
    </div>
    <!-- ... more card elements -->
    
    <!-- Ghost elements -->
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
</div>

Pendekatan ini memastikan bahawa kad dibalut dari kiri, bermula pada baris baharu apabila lebar skrin memerlukan ia. Elemen hantu menduduki ruang yang tinggal pada baris terakhir, menjajarkan kad secara sama rata merentas berbilang baris.

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Balutan Flexbox daripada Memusatkan Elemen Terakhir pada Skrin yang Lebih Kecil?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!