Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Mencipta Lajur Pusat Fleksibel dengan Lajur Sisi Lebar Tetap Menggunakan Flexbox?

Bagaimanakah Saya Boleh Mencipta Lajur Pusat Fleksibel dengan Lajur Sisi Lebar Tetap Menggunakan Flexbox?

Linda Hamilton
Linda Hamiltonasal
2024-12-04 08:23:12569semak imbas

How Can I Create a Flexible Center Column with Fixed-Width Side Columns Using Flexbox?

Mencapai Lajur Lebar Tetap dengan Lajur Pusat Fleksibel dalam Reka Letak Kotak Fleksibel

Dalam susun atur kotak fleksibel, mengurus lebar lajur dan fleksibiliti boleh menjadi mencabar. Artikel ini menangani isu biasa untuk mengekalkan lajur kiri dan kanan lebar tetap sambil membolehkan lajur tengah melentur dan mengisi ruang yang tersedia.

Flexbox dengan Lebar Tetap Co

Untuk membuat lajur lebar tetap, elakkan menggunakan sifat lebar, yang boleh menyebabkan pengecutan yang tidak diingini. Sebaliknya, gunakan sintaks trengkas flex dengan nilai khusus untuk flex-grow, flex-shrink dan flex-basis. Contohnya:

.fixed-column {
  flex: 0 0 230px; /* Don't grow, don't shrink, start at 230px */
}

Membengkokkan Lajur Tengah

Fleksibiliti lajur tengah membolehkannya mengembang atau mengecut berdasarkan saiz tetingkap. Dengan menetapkan sifat lenturnya kepada 1 (atau mana-mana nilai bukan sifar), ia akan menggunakan ruang yang tinggal selepas lajur lebar tetap.

.flex-column {
  flex: 1 1 0; /* Grow, don't shrink, start at 0px */
}

Sembunyikan/Tunjukkan Responsif

Untuk menyembunyikan lajur kanan tanpa menjejaskan lebar lajur kiri atau fleksibiliti lajur tengah, gunakan pertanyaan media CSS atau JavaScript untuk menogol keterlihatannya. Contohnya:

@media screen and (max-width: 600px) {
  .right-column {
    display: none;
  }
}

Contoh Kod Lengkap

Menggabungkan pelarasan di atas, coretan kod lengkap mungkin kelihatan seperti:

.fixed-column {
  flex: 0 0 230px;
}

.flex-column {
  flex: 1 1 0;
}

@media screen and (max-width: 600px) {
  .right-column {
    display: none;
  }
}

Oleh melaksanakan teknik ini, anda boleh mencapai susun atur kotak fleksibel fleksibel dengan lajur lebar tetap dan lajur tengah dinamik dengan berkesan yang menyesuaikan dengan saiz tetingkap dan interaksi pengguna.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Lajur Pusat Fleksibel dengan Lajur Sisi Lebar Tetap Menggunakan Flexbox?. 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