Rumah >hujung hadapan web >tutorial css >Bagaimana Anda Membuat Bekas Flexbox Mengembang Secara Mendatar untuk Menampung Kandungan Berbalut?

Bagaimana Anda Membuat Bekas Flexbox Mengembang Secara Mendatar untuk Menampung Kandungan Berbalut?

Susan Sarandon
Susan Sarandonasal
2024-11-08 08:37:02970semak imbas

How Do You Make Flexbox Containers Expand Horizontally to Accommodate Wrapped Content?

Cara Bekas Flexbox Berkembang Secara Mendatar

Flexbox menawarkan kawalan bernuansa ke atas reka letak dan penjajaran elemen halaman. Satu cabaran terletak pada membuat bekas flexbox mengembang secara mendatar untuk menampung kandungan yang dibalut. Penyemak imbas mempamerkan gelagat yang berbeza-beza dalam hal ini, memerlukan penyelesaian khusus.

Pertimbangkan grid imej yang diingini:

.container {
  display: inline-flex;
  flex-flow: column wrap;
  align-content: flex-start;
  height: 100%;
}

Walaupun menyatakan pembalut lajur, Firefox mengehadkan lebar bekas kepada elemen lajur pertama, manakala Chrome mengembangkannya kepada lebar ibu bapa tanpa mengira kandungan. Untuk mencapai tingkah laku IE11, pendekatan alternatif diperlukan.

Mengeksploitasi Mod Penulisan

Pelayar secara amnya menyokong mod penulisan dengan baik. Mod penulisan membenarkan pertukaran blok dan arah sebaris, membolehkan aliran menegak item fleksibel. Di dalam item fleksibel, mod tulisan mendatar boleh dipulihkan.

.container {
  display: inline-flex;
  writing-mode: vertical-lr;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 350px;
  background: blue;
}

.photo {
  writing-mode: horizontal-tb;
  width: 150px;
  height: 100px;
  background: red;
  margin: 2px;
}

Dengan menetapkan mod tulisan bekas kepada menegak-lr dan menggunakan mod tulisan: horizontal-tb pada item fleksibel, anda boleh mencapai dengan berkesan aliran menegak dan pengembangan mendatar. Penyelesaian ini sejajar dengan sokongan penyemak imbas untuk mod penulisan dan menangani keperluan khusus untuk bekas flexbox mengembangkan mendatar.

Atas ialah kandungan terperinci Bagaimana Anda Membuat Bekas Flexbox Mengembang Secara Mendatar untuk Menampung Kandungan Berbalut?. 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