Bagaimanakah Saya Boleh Mencipta Lajur Pusat Fleksibel dengan Lajur Sisi Lebar Tetap Menggunakan 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!