Bagaimanakah anda boleh menyelaraskan elemen ke kiri dan tengah secara serentak menggunakan Flexbox tanpa kedudukan mutlak?

Menjajarkan Elemen Kiri dan Tengah dengan Flexbox

Dalam bidang reka bentuk web, flexbox telah muncul sebagai alat reka letak yang berkuasa, menawarkan kawalan yang tepat ke atas penjajaran dan pengedaran elemen. Walau bagaimanapun, menjajarkan elemen dengan cara tertentu, seperti membiarkan satu elemen dijajar ke kiri dan serentak memusatkan yang lain, boleh memberikan cabaran tertentu.

Secara tradisinya, menetapkan sifat jidar kanan kepada auto untuk elemen kiri akan digunakan. Walaupun teknik ini menjajarkan elemen kiri dengan berkesan, ia juga mengganggu pemusatan elemen jiran. Untuk mengatasi had ini tanpa menggunakan kedudukan mutlak, kami meneroka penyelesaian yang bijak.

Menambah Elemen Ketiga Kosong

Dengan memperkenalkan elemen ketiga kosong ke dalam campuran , kami mencipta reka bentuk yang menjajarkan elemen kiri dengan sempurna sambil mengekalkan penjajaran berpusat elemen tengah. Berikut ialah struktur HTML yang disemak:

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

Menggunakan Gaya Flexbox

Untuk memastikan penjajaran yang betul, kami menggunakan gaya CSS berikut:

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

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

Gaya ini secara berkesan menetapkan kedua-dua elemen kiri dan kanan untuk berkembang dan mengagihkan ruang yang tersedia secara sama rata, memastikan elemen tengah kekal berpusat dengan sempurna.

Cara Ia Berfungsi

Keajaiban penyelesaian ini terletak pada fakta bahawa hanya dua elemen ditetapkan untuk berkembang dan kedua-duanya menerima lebar yang sama. Akibatnya, ruang yang ada diagihkan sama rata antara elemen kiri dan kanan, meninggalkan elemen tengah tidak terjejas. Akibatnya, ia mengekalkan kedudukan tengahnya dengan mudah.

Pendekatan ini lebih baik daripada kaedah lain kerana ia menghilangkan keperluan untuk menyalin atau menyembunyikan kandungan untuk mencapai penjajaran yang diingini. Sebaliknya, pemusatan berlaku secara semula jadi, mempamerkan kuasa dan fleksibiliti reka letak kotak flex.

Atas ialah kandungan terperinci Bagaimanakah anda boleh menyelaraskan elemen ke kiri dan tengah secara serentak menggunakan Flexbox tanpa kedudukan mutlak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!