Bagaimana untuk Membuat Bekas Flexbox Berkembang Secara Mendatar dengan Kandungan Berbalut Merentasi Pelayar?

Meluaskan Bekas Flexbox Secara Mendatar dengan Kandungan Berbalut

Flexbox menawarkan penyelesaian yang berkuasa untuk mencipta reka letak yang fleksibel. Walau bagaimanapun, percanggahan dalam tingkah laku penyemak imbas boleh timbul, yang membawa kepada hasil yang tidak dijangka. Satu isu sedemikian timbul apabila cuba membuat bekas flexbox mengembang secara mendatar dengan kandungannya yang dibalut.

Pertimbangkan kod HTML dan CSS berikut:

<div class="container">
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
</div>

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

Kod ini bertujuan untuk mencipta grid imej yang mengalir dari atas ke bawah, membalut apabila ia sampai ke bahagian bawah. Walau bagaimanapun, gelagat penyemak imbas berbeza-beza:

• IE 11: Bekas mengembang untuk menampung elemen yang dibalut dengan jayanya.
• Firefox: Hanya membalut yang pertama lajur unsur, dengan yang lain melimpah.
• Chrome: Bekas sentiasa memenuhi lebar induknya.

Untuk mencapai gelagat yang diingini dalam penyemak imbas lain, pertimbangkan menggunakan bekas lentur baris dengan mod tulisan menegak.

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

<div class="container">
  <div class="photo">1</div>
  <div class="photo">2</div>
  <div class="photo">3</div>
  <div class="photo">4</div>
  <div class="photo">5</div>
  <div class="photo">6</div>
  <div class="photo">7</div>
  <div class="photo">8</div>
  <div class="photo">9</div>
</div>

Dengan menukar arah blok dengan arah sebaris, item lentur mengalir secara menegak. Memulihkan mod penulisan mendatar di dalam item flex melengkapkan penyelesaian. Teknik ini membolehkan penciptaan bekas flexbox yang mengembang secara mendatar untuk memadankan kandungan balut lajurnya dengan cara yang konsisten merentas penyemak imbas.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Bekas Flexbox Berkembang Secara Mendatar dengan Kandungan Berbalut Merentasi Pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!