Bagaimanakah Saya Boleh Membuat Reka Letak Kotak Flex Tiga Lajur dengan Lajur Sisi Lebar Tetap dan Lajur Pusat Fleksibel?

Mengekalkan Lajur Lebar Tetap dengan Pusat Fleksibel

Anda sedang berusaha untuk mereka bentuk susun atur kotak flex dengan tiga lajur, di mana lajur kiri dan kanan mengekalkan lebar tetap, manakala lajur tengah mengembang untuk menduduki ruang yang tinggal. Walaupun menetapkan dimensi untuk lajur, ia mengecut secara tidak diingini apabila saiz tetingkap dilaraskan.

Penyelesaian

Untuk mencapai reka letak yang anda inginkan, gantikan sifat lebar dengan spesifikasi flex berikut untuk lajur lebar tetap:

flex: 0 0 230px;

Spesifikasi ini menandakan:

• 0 untuk flex-grow: jangan kembangkan lajur.
• 0 untuk flex-shrink: jangan mampatkan lajur.
• 230px untuk flex -asas: tetapkan lebar awal kepada 230px.

Pada dasarnya, konfigurasi ini memastikan lajur kekal pada 230px tanpa mengira saiz tetingkap.

Ciri Tambahan

Mengenai keperluan tambahan anda untuk menyembunyikan lajur kanan berdasarkan interaksi pengguna, sementara mengekalkan lebar tetap lajur kiri dan mengembangkan lajur tengah dengan sewajarnya, anda boleh memasukkan berikut:

.column.center {
  flex: 1 0 calc(100% - 230px);
}

Pengubahsuaian ini memastikan bahawa apabila lajur kanan disembunyikan, lajur tengah mengisi ruang yang tinggal manakala lajur kiri kekal pada 230px.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Reka Letak Kotak Flex Tiga Lajur dengan Lajur Sisi Lebar Tetap dan Lajur Pusat Fleksibel?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!