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

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!