Jajarkan elemen kiri dan tengah menggunakan Flexbox

Question

Saya menggunakan Flexbox untuk menyelaraskan elemen anak saya. Apa yang saya mahu lakukan ialah memusatkan satu elemen dan menyelaraskan elemen lain ke kiri. Biasanya saya akan menggunakan margin-right: auto Masalahnya ialah menolak elemen tengah dari pusat. Adakah ini boleh dilakukan tanpa menggunakan kedudukan mutlak?

HTML dan CSS

#parent {
  align-item: tengah;
  sempadan: 1px hitam pejal;
  paparan: flex;
  justify-content: pusat;
  margin: 0 auto;
  lebar: 500px;
}
#dibiarkan {
  margin-kanan: auto;
}
#center {
  margin: auto;
}

<div id="parent">
  <span id="left">Left</span>
  <span id="center">Center</span>
</div>

Answer 1

Tambah elemen kosong ketiga:

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

dan gaya berikut:

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

Hanya kiri dan kanan sahaja yang akan membesar, dan disebabkan hakikatnya...

• Hanya terdapat dua elemen yang semakin meningkat (tidak kira jika ia kosong) dan
• Kedua-duanya mempunyai lebar yang sama (mereka akan mengagihkan ruang yang ada secara merata)

...Elemen tengah akan sentiasa berpusat dengan sempurna.

Pada pendapat saya ini adalah lebih baik daripada jawapan yang diterima kerana anda tidak perlu menyalin kandungan kiri ke kanan dan menyembunyikannya untuk mendapatkan lebar yang sama pada kedua-dua belah pihak, ia berlaku secara ajaib (flexbox is magic).

---

Pembedahan praktikal:

.parent {
  display: flex;
}

.left,
.right {
  flex: 1;
}


/* Styles for demonstration */
.parent {
  padding: 5px;
  border: 2px solid #000;
}
.left,
.right {
  padding: 3px;
  border: 2px solid red;
}
.center {
  margin: 0 3px;
  padding: 3px;
  border: 2px solid blue;
}

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

Answer 2

EDIT: Lihat Jawapan Solo di bawah, yang merupakan penyelesaian yang lebih baik.

---

Idea di sebalik flexbox adalah untuk menyediakan rangka kerja untuk menjajarkan elemen dengan mudah dengan dimensi berubah dalam bekas. Oleh itu, tidak masuk akal untuk menyediakan susun atur yang benar-benar mengabaikan lebar elemen. Pada asasnya, ini adalah tujuan kedudukan mutlak, kerana ia mengeluarkan elemen daripada aliran biasa.

Setahu saya tidak ada cara yang baik untuk melakukan ini tanpa menggunakan position:absolute; jadi saya cadangkan untuk menggunakannya... tetapi jika anda benar-benar tidak mahu melakukannya atau tidak boleh menggunakan kedudukan mutlak maka saya fikir anda boleh menggunakan salah satu penyelesaian berikut.

---

Jika anda tahu lebar tepat div "kiri", maka anda boleh meletakkan justify-content 更改为 flex-start (kiri) dan kemudian selaraskan div "tengah" seperti ini:

#center {
    position: relative;
    margin: auto;
    left: -{half width of left div}px;
}

---

Jika anda tidak tahu lebarnya maka anda boleh salin "Kiri" di sebelah kanan, gunakan justify-content: space- Between; dan kemudian sembunyikan elemen kanan baharu: Untuk menjadi jelas, ini benar-benar hodoh...lebih baik menggunakan kedudukan mutlak daripada menyalin kandungan. :-)

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

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