Bagaimanakah Saya Boleh Memusatkan Item Tengah dalam Susun Atur Flexbox dengan Item Sampingan Tidak Sekata?

Memusatkan Item Tengah Ditengah-tengah Pelbagaikan Lebar Item Sisi

Dalam susun atur kotak flex, menjajarkan item tengah dengan sempurna boleh mencabar apabila item sisi mempunyai lebar yang berbeza. Untuk menangani isu ini, kami boleh menggunakan bekas flex bersarang dengan margin auto.

Konsep utama di sebalik pendekatan ini ialah:

• Menggunakan bekas flex bersarang memastikan item diedarkan di dalam dan di antara kotak seperti yang dikehendaki.
• Menarapkan jidar auto pada bekas dalam dalam kotak kiri dan kanan secara automatik melaraskan kedudukan untuk memusatkan item tengah.

Berikut ialah kod yang menunjukkan teknik ini:

.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;
}

/* non-essential */
.box {
  align-items: center;
  height: 40px;
}

.inner {
  background: pink;
  border: 1px solid deeppink;
  padding: 0 5px;
}

p {
  text-align: center;
  margin: 5px 0 0 0;
}

Dalam kod ini, bekas ditetapkan sebagai kotak lentur dan kotak adalah item fleksibel dengan nisbah lentur 1. Setiap kotak menggunakan kotak lentur bersarang untuk memusatkan kandungannya.

Langkah utama ialah menetapkan margin auto kepada bekas dalam dalam kotak pertama dan terakhir. Untuk bahagian kiri, margin-kanan: auto; secara automatik melaraskan ruang di sebelah kanan elemen, manakala margin-kiri: auto; melakukan perkara yang sama di sebelah kiri. Ini memastikan kotak tengah kekal tengah, tanpa mengira lebar kotak sisi.

Dengan menggunakan pendekatan ini, anda boleh mencapai pemusatan sebenar item tengah, walaupun item sisi mempunyai lebar yang berbeza.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memusatkan Item Tengah dalam Susun Atur Flexbox dengan Item Sampingan Tidak Sekata?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!