Bagaimana untuk Menjajarkan Satu Elemen Kiri dan Satu Lagi Pusat dengan Flexbox Tanpa Kedudukan Mutlak?

Menjajarkan Kiri dan Tengah dengan Flexbox: Penyelesaian tanpa Kedudukan Mutlak

Apabila menggunakan flexbox untuk menjajarkan elemen kanak-kanak, ia boleh menjadi mencabar untuk menjajarkan satu elemen ke kiri dan tengah satu lagi tanpa menggunakan kedudukan mutlak. Berikut ialah penyelesaian yang menggunakan elemen kosong tambahan:

HTML:

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

CSS:

<code class="css">.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;
}</code>

Penjelasan:

1. Elemen kiri dan kanan ditetapkan kepada lentur: 1, yang menjadikannya berkembang untuk mengagihkan ruang yang tersedia secara sama rata.
2. Elemen kanan kosong menjamin bahawa elemen kiri tidak akan menolak elemen tengah dari tengah.

Pendekatan ini mewujudkan penjajaran yang konsisten dan berpusat tanpa memerlukan kedudukan mutlak atau menduplikasi kandungan kiri di sebelah kanan.

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