Bagaimana untuk Mencapai Gelagat Bekas Flexbox Mengembangkan Mendatar yang Konsisten Merentasi Pelayar?

Bekas Flexbox Mengembangkan Mendatar

Isu

Dalam flexbox, gelagat bekas dengan kandungan berbalut berbeza-beza merentas penyemak imbas. IE 11 mempamerkan gelagat yang diingini dengan meregangkan bekas secara mendatar untuk membalut elemen, manakala Firefox dan Chrome menunjukkan ketidakkonsistenan.

Penyelesaian

Walaupun penyemak imbas kekurangan pelaksanaan penuh bekas flex lajur, mereka menyokong mod penulisan dengan baik. Dengan menggunakan bekas lentur baris dengan mod tulisan menegak, arah sebaris bekas ditukar dengan arah blok. Item fleksibel akan mengalir secara menegak dan mod tulisan mendatar boleh dipulihkan dalam item fleksibel.

Kod Contoh

.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;
}

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

Pendekatan ini meniru gelagat IE 11 dengan memastikan bekas meregang secara mendatar untuk menampung kandungan yang dibungkus dalam Firefox dan Chrome.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Gelagat Bekas Flexbox Mengembangkan Mendatar yang Konsisten Merentasi Pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!