Mengimbangi berputar dengan Flexbox

Artikel ini membentangkan teknik flexbox pintar untuk elemen berpusat di sekitar titik "pivot", mengelakkan HTML kompleks atau CSS lanjutan. Penulis menggunakan analogi teka -teki silang kata untuk menggambarkan masalah: kata -kata yang berpusat di sekitar huruf tengah, yang tidak semestinya titik tengah.

Pendekatan awal offset keras dikodkan dianggap tidak fleksibel dan berlebihan. Sebaliknya, strategi "membahagikan dan menakluk" digunakan. Perkataan itu dibahagikan kepada dua bahagian: "kepala" (sebelum pivot) dan "ekor" (pivot dan selepas).

Penyelesaian teras memanfaatkan harta order Flexbox untuk membalikkan susunan kepala dan ekor. Gaya CSS kemudian memanipulasi kedudukan:

• margin-right: auto pada elemen ekor terakhir menolak kepala ke kanan.
• position: relative , left: 50% , dan right: 50% digunakan untuk memusatkan kedua -dua kepala dan ekor di sekitar pivot.

Inilah penyelesaian CSS ringkas:

 .container {
  Paparan: Flex;
}
.Item: anak terakhir {
  margin-kanan: auto;
}
.item {
  Perintah: 2;
  Kedudukan: Relatif;
  Kanan: 50%;
}
.pivot, .pivot ~ .item {
  Perintah: 1;
  Kiri: 50%;
}

Kaedah ini boleh disesuaikan dengan susun atur menegak dengan menukar flex-direction ke column . Ia juga lebih cekap daripada membungkus kepala dan ekor dalam bekas yang berasingan. Yang penting, pendekatan ini mengekalkan perintah HTML semantik, memastikan kebolehcapaian untuk pembaca skrin.

Penulis menyimpulkan dengan menonjolkan persamaan antara cabaran pengekodan ini dan pemaju Akta Balancing yang lebih luas menghadapi dalam mencari penyelesaian yang optimum. Contoh codepen disediakan untuk demonstrasi praktikal.

Atas ialah kandungan terperinci Mengimbangi berputar dengan Flexbox. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!