Bagaimana untuk Menghalang Item Flexbox Berpusat pada Talian Tidak Lengkap?

Bagaimana untuk Menghalang Item Flexbox daripada Berpusat pada Talian Patah?

Dalam Flexbox, jika anda mempunyai bekas fleksibel dengan item yang tidak sesuai sama rata dalam garis dalam lebarnya, item yang tinggal pada baris itu dipusatkan. Tetapi bagaimana jika anda mahu item yang tinggal bermula dari kiri dan mempunyai jarak yang sama, sama seperti item pada baris lengkap?

Penyelesaian: Menggunakan Elemen "Hantu"

Tanpa menggunakan JavaScript, anda boleh mencipta elemen kosong (dikenali sebagai elemen "hantu") yang mengisi ruang yang tinggal pada baris yang tidak lengkap.

Contohnya, jika potensi panjang lajur bekas anda ialah 4, anda memerlukan 3 unsur hantu. Anda boleh menambah ini pada penghujung HTML anda:

<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

CSS yang dikemas kini:

.card:empty {
    width: 300px;
    box-shadow: none;
    margin: 2rem;
    padding-bottom: 0;
}

Ini memastikan elemen hantu menduduki ruang yang sama dengan kad sebenar.

Menggunakan Elemen Pseudo

Anda juga boleh menggunakan elemen pseudo CSS untuk mengurangkan bilangan elemen hantu yang diperlukan:

.card:empty::before {
    content: "";
    width: 300px;
    box-shadow: none;
    margin: 2rem;
}

Ini mencipta elemen pseudo untuk setiap kad kosong yang mengambil tempatnya pada baris yang tidak lengkap. Dengan menggantikan 2 elemen hantu dengan 2 elemen pseudo, anda hanya memerlukan 1 elemen hantu sebenar untuk panjang lajur 4.

Contoh Kod:

<div class="container">
  <div class="recipe-grid">

    <div class="card">
      <!-- Card content -->
    </div>

    <div class="card">
      <!-- Card content -->
    </div>

    <div class="card">
      <!-- Card content -->
    </div>

    <div class="card">
      <!-- Card content -->
    </div>

    <div class="card"></div> <!--- Ghost element -->

  </div>
</div>

Dengan menggunakan elemen hantu atau unsur pseudo, anda boleh menghalang item Flexbox daripada tertumpu pada garisan yang tidak lengkap dan memastikan susunan yang lebih menarik secara visual.

Atas ialah kandungan terperinci Bagaimana untuk Menghalang Item Flexbox Berpusat pada Talian Tidak Lengkap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!