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

Menjajarkan Elemen Kiri dan Tengah dengan Flexbox

Flexbox menyediakan cara yang berkesan untuk menjajarkan elemen dalam bekas. Walau bagaimanapun, cabaran biasa timbul apabila cuba menjajarkan satu elemen ke kiri dan satu lagi ke tengah tanpa menggunakan kedudukan mutlak.

Masalahnya

Apabila menggunakan margin- kanan: auto untuk menjajarkan elemen kiri, ia secara tidak sengaja menolak elemen tengah ke kanan. Ini kerana nilai auto mengagihkan baki ruang secara sama rata antara elemen yang telah digunakan.

Penyelesaian tanpa Kedudukan Mutlak

Untuk memintas isu ini tanpa kedudukan mutlak, tambahkan elemen kosong ketiga pada bekas:

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

Kemudian, gunakan CSS berikut:

<code class="css">.parent {
  display: flex;
}

.left, .right {
  flex: 1;
}</code>

Cara Ia Berfungsi

The sifat flex menentukan bagaimana ruang yang ada diagihkan di antara elemen yang semakin meningkat. Dalam kes ini, kedua-dua kiri dan kanan ditetapkan untuk berkembang dan akan mengagihkan sama rata ruang antara mereka. Memandangkan hanya terdapat dua elemen yang berkembang, elemen tengah akan sentiasa berpusat dengan sempurna.

Faedah Pendekatan Ini

Pendekatan ini lebih baik daripada jawapan yang diterima dalam beberapa cara :

• Ia tidak memerlukan menyalin kandungan kiri ke kanan dan menyembunyikannya untuk mencapai lebar yang sama bagi kedua-dua belah pihak.
• Ia bergantung pada sifat sedia ada flexbox untuk mencapai yang diingini penjajaran, menjadikannya penyelesaian yang lebih elegan.

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