Bagaimana untuk Memusatkan Item Tengah dalam Bekas Flexbox dengan Kotak Sisi Tidak Sekata?

Item Tengah Berpusat dengan Kotak Sisi Asimetri

Matlamatnya adalah untuk memusatkan item tengah dalam bekas apabila item bersebelahan mempunyai lebar yang berbeza, mengekalkan penjajaran yang betul tanpa mengira limpahan kandungan.

Menggunakan Flexbox

Flexbox menyediakan penyelesaian menggunakan bekas bersarang dan margin automatik:

.container {
  display: flex;
}

.box {
  flex: 1;
  display: flex;
  justify-content: center;
}

.box:first-child > div { margin-right: auto; }
.box:last-child  > div { margin-left: auto; }

Penjelasan:

• Bekas paling luar ialah bekas lentur yang terbentang secara mendatar.
• Setiap elemen "kotak" juga merupakan lenturan bekas, dengan kandungannya ditengahkan.
• "margin-kanan: auto;" pada elemen dalam kotak pertama menolaknya tepat ke tepi bekas, menjajarkannya dengan bahagian kiri dengan berkesan.
• "margin-left: auto;" pada elemen dalam kotak terakhir menariknya ke kiri ke tepi bekas, menjajarkannya dengan bahagian kanan.
• Gaya tambahan (cth., ketinggian, pelapik) boleh ditambah untuk tujuan pembentangan.

Contoh:

<div class="container">
  <div class="box"><div class="inner">short box</div></div>
  <div class="box"><div class="inner">centered box</div></div>
  <div class="box"><div class="inner">looooooooooooooooooooooong box</div></div>
</div>

<p>→ true center</p>

Pendekatan ini menyelaraskan elemen tengah tanpa mengira lebar kotak sisi, walaupun dengan kandungan yang melimpah.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Item Tengah dalam Bekas Flexbox dengan Kotak Sisi Tidak Sekata?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!