Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Mengekalkan Lajur Sisi Lebar Tetap Sambil Membenarkan Lajur Pusat Menjadi Fleksibel?

Bagaimanakah Saya Boleh Mengekalkan Lajur Sisi Lebar Tetap Sambil Membenarkan Lajur Pusat Menjadi Fleksibel?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-12-03 03:28:13232semak imbas

How Can I Maintain Fixed-Width Side Columns While Allowing a Center Column to Be Flexible?

Memastikan Lajur Lebar Tetap dengan Lajur Pusat Fleksibel

Dalam mengejar reka letak web yang fleksibel, selalunya wajar untuk mempunyai dua tetap- lajur lebar dengan lajur tengah yang melaraskan lebarnya secara dinamik. Walau bagaimanapun, pengguna biasanya menghadapi masalah dengan lajur tetap mengecut apabila tetingkap penyemak imbas mengecut.

Untuk menangani perkara ini, adalah penting untuk mengelak daripada menyatakan sifat lebar pada lajur tetap. Sebaliknya, gunakan sifat khusus flexbox untuk mengawal gelagat lajur.

Pendekatan pilihan ialah menggunakan flex: 0 0 230px; untuk kedua-dua lajur kiri dan kanan. Ini mengarahkan penyemak imbas untuk mengekalkan lebar tetap 230px untuk lajur ini, memastikan ia kekal malar tanpa mengira saiz tetingkap.

flex: 0 0 230px; dekonstruk kepada tiga bahagian:

  • 0 menandakan tiada pertumbuhan (flex-grow)
  • 0 menandakan tiada pengecutan (flex-shrink)
  • 230px menentukan awal dan tetap lebar (asas lentur)

Selain itu, ia adalah mungkin untuk menyembunyikan lajur kanan secara responsif menggunakan sifat pesanan CSS flexbox. Ini membolehkan lajur tengah mengisi ruang kosong yang dicipta oleh lajur kanan tersembunyi, mengekalkan tingkah laku fleksibel.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengekalkan Lajur Sisi Lebar Tetap Sambil Membenarkan Lajur Pusat Menjadi Fleksibel?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn