Bagaimana untuk Membuat Reka Letak Kotak Flex Tiga Lajur dengan Lajur Luar Lebar Tetap?

Reka Letak Kotak Fleksibel Tiga Lajur dengan Lajur Luar Lebar Tetap

Anda sedang cuba mewujudkan reka letak kotak lentur tiga lajur dengan lajur luar lebar tetap dan pusat fleksibel lajur. Walaupun mentakrifkan dimensi untuk lajur ini, ia kelihatan mengecut apabila port pandang mengecil.

Penyelesaian

Kunci kepada reka letak ini ialah menggunakan fleksibel dan bukannya lebar. Gantikan lebar dengan sifat flex dalam CSS anda:

#container {
  display: flex;
}

.column.left,
.column.right {
  flex: 0 0 230px;
}

Berikut ialah perkara yang ditandakan oleh setiap nilai dalam sifat flex:

• 0 untuk flex-grow: Ini menghalang lajur daripada berkembang melebihi lebar awalnya.
• 0 untuk pengecutan lentur: Ini menghalang lajur daripada mengecut di bawah lebar awal.
• 230px untuk asas fleksibel: Ini menetapkan lebar awal lajur kepada 230px.

Dengan menetapkan sifat ini, anda menentukan dimensi tetap untuk lajur luar yang akan kekal malar walaupun port pandangan berubah.

Nota Tambahan

Untuk keperluan pilihan untuk menyembunyikan lajur kanan, cuma tetapkan sifat paparan .column.right kepada tiada:

.column.right {
  display: none;
}

Ini akan menyembunyikan lajur kanan sambil mengekalkan lebar tetap lajur kiri dan lebar fleksibel daripada lajur tengah.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Reka Letak Kotak Flex Tiga Lajur dengan Lajur Luar Lebar Tetap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!