Bagaimanakah Saya Boleh Memusatkan Elemen Tengah Antara Elemen Adik Beradik Bersaiz Dinamik?

Memusatkan Elemen Tengah dengan Lebar Adik Beradik Dinamik

Bayangkan susun atur yang terdiri daripada tiga kotak yang dijajarkan secara mendatar dengan titik yang mewakili jarak antaranya:

[Left box]......[Center box]......[Right box]

Apabila salah satu kotak sisi dikeluarkan, kotak tengah harus kekal berpusat:

[Left box]......[Center box].................

Dan begitu juga apabila kotak sisi yang satu lagi dikeluarkan:

................[Center box].................

Selain itu, kandungan kotak tengah harus mengembang untuk mengisi ruang yang tersedia, manakala kotak sisi kekal tetap dalam saiz. Limpahan akan dikendalikan dengan limpahan: tersembunyi dan limpahan teks: elipsis untuk menggunting kandungan.

[Left box][Center boxxxxxxxxxxxxx][Right box]

Walaupun struktur flexbox menjajarkan elemen secara mendatar, ia tidak mengekalkan pemusatan apabila kotak sisi mempunyai lebar yang berbeza. Untuk mencapai kesan yang diingini, kami memperkenalkan bekas flex bersarang dan jidar auto:

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

Strategi ini menggunakan jidar automatik untuk memusatkan item tengah secara automatik, tanpa mengira lebar kotak sisi. The justify-content: pusat; penjajaran memastikan kandungan dalam kotak tengah kekal di tengah.

Dengan meletakkan bekas fleksibel, kami mengehadkan jidar kepada kotak individu, menghalangnya daripada menjejaskan reka letak elemen lain. Kaedah ini mencapai pemusatan sebenar walaupun apabila lebar kotak sisi berbeza dengan ketara.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memusatkan Elemen Tengah Antara Elemen Adik Beradik Bersaiz Dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!