Bagaimana untuk Menjajarkan Elemen Kiri dan Tengah dalam Flexbox Tanpa Kedudukan Mutlak?

Menjajarkan Elemen Kiri dan Tengah dengan Flexbox

Masalah:

Sejajarkan elemen kanak-kanak dalam bekas flexbox, dengan satu elemen berpusat dan satu lagi dijajarkan ke kiri.

Kod:

#parent {
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: 500px;
}
#left {
  margin-right: auto;
}
#center {
  margin: auto;
}

Isu:

Menggunakan margin-kanan: auto menolak elemen berpusat di luar tengah.

Penyelesaian tanpa Kedudukan Mutlak:

Tambah elemen kosong ketiga:

<div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right"></div>
</div>

Gunakan gaya berikut:

.parent {
  display: flex;
}
.left, .right {
  flex: 1;
}

Penjelasan:

Kedua-dua kiri dan kanan ditetapkan untuk berkembang (flex: 1), mengagihkan sama rata ruang yang ada. Memandangkan elemen kanan kosong mempunyai lebar yang sama seperti kiri, elemen tengah kekal berpusat dengan sempurna.

Faedah Penyelesaian ini:

• Tidak perlu menyalin kandungan antara elemen.
• Elemen berpusat dengan sempurna, tanpa mengira lebar kandungan.

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Elemen Kiri dan Tengah dalam Flexbox Tanpa Kedudukan Mutlak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!