Bagaimana untuk Mencapai Pengembangan Mendatar Konsisten untuk Item Fleksibel yang Dibalut Merentasi Pelayar?

Bekas Flex Mengembangkan Mendatar untuk Kandungan Dibalut

Apabila menggunakan CSS Flexbox, penyemak imbas mungkin menunjukkan gelagat yang berbeza-beza untuk sifat tertentu. Khususnya, mencipta grid imej yang disusun dalam lajur dan membenarkannya membungkus boleh memberikan cabaran dalam mencapai tingkah laku yang konsisten merentas penyemak imbas.

Pertimbangkan kod HTML 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>

Dan yang disertakan bersama CSS:

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

Matlamatnya ialah untuk bekas mengembang secara mendatar untuk menampung elemen yang dibalut, menyediakan reka letak seperti grid dengan lajur imej. Walau bagaimanapun, seperti yang mungkin anda alami dalam jsFiddle yang disediakan, gelagat penyemak imbas berbeza:

• IE 11: Bekas mengembang secara mendatar, membalut setiap lajur elemen.
• Firefox: Hanya lajur pertama elemen dibalut, dengan selebihnya melimpah.
• Chrome: Bekas sentiasa meregang untuk memenuhi lebar induknya.

Untuk menangani ketidakkonsistenan ini dan mencapai tingkah laku yang diperhatikan dalam IE 11, laksanakan penyelesaian berikut:

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

Pendekatan ini menggunakan bekas lentur baris dengan mod penulisan menegak. Dengan menukar arah blok dan sebaris, item flex terpaksa mengalir secara menegak. Mod penulisan dalam item fleksibel individu kemudian ditetapkan semula kepada mendatar. Akibatnya, bekas akan mengembang secara mendatar untuk dipadankan dengan kandungan yang dibalut, meniru gelagat yang diperhatikan dalam IE 11.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Pengembangan Mendatar Konsisten untuk Item Fleksibel yang Dibalut Merentasi Pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!