Bagaimana untuk Membuat Bekas Flexbox Mengembang Secara Mendatar untuk Membungkus Kandungan?

Bagaimana untuk Mengembangkan Bekas Flexbox Secara Mendatar untuk Membungkus Kandungan?

Apabila menggunakan CSS flexbox, penyemak imbas mempamerkan gelagat yang berbeza-beza, terutamanya dalam konteks saiz semula bekas. Untuk menangani ketidakkonsistenan ini, kami mencari penyelesaian untuk menjadikan bekas flexbox mengembang secara mendatar untuk menampung kandungannya yang dibalut.

Dalam senario tertentu, seseorang mungkin memerlukan bekas untuk merangkumi berbilang elemen div yang disusun dalam reka letak lajur. Objektifnya adalah untuk membolehkan elemen ini mengalir secara menegak, membalut apabila sampai ke bahagian bawah, menghasilkan lajur teks atau imej. Walau bagaimanapun, mengawal pengembangan mendatar bekas untuk memadankan elemen yang dibalut kekal sebagai cabaran.

Untuk mencapai gelagat yang diingini, adalah mungkin untuk memanfaatkan bekas lentur baris dengan mod tulisan menegak. Dengan berbuat demikian, arah sebaris dan blok diterbalikkan, menyebabkan item lentur mengalir secara menegak. Akibatnya, mod penulisan yang dijajarkan diterbalikkan dalam item fleksibel, memulihkan penjajaran mendatar.

Untuk demonstrasi praktikal, pertimbangkan coretan kod berikut:

.container {
  display: inline-flex;
  writing-mode: vertical-lr; /* Reverses inline and block directions */
  flex-wrap: wrap;
  align-content: flex-start;
  height: 350px;
  background: blue;
}

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

<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>

Melalui teknik ini , bekas akan berkembang secara mendatar secara dinamik apabila kandungan baharu ditambah, memastikan pembalut dan penjajaran yang betul bagi individu tersebut elemen.

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