Bagaimanakah Saya Boleh Menyusun Semula Div Menggunakan CSS Flexbox Berdasarkan Lebar Skrin?

Tukar Tertib Div dengan CSS, Bergantung pada Lebar Peranti

Apabila membuat tapak web responsif, mengekalkan reka letak yang dikehendaki merentas peranti berbeza boleh satu cabaran. Satu isu sedemikian ialah penyusunan semula div apabila saiz skrin berubah. Walaupun mudah untuk menyusun div secara menegak pada skrin yang lebih kecil, ia boleh menjadi lebih rumit untuk menyusunnya secara berbeza berdasarkan reka letak.

Sebagai contoh, mari kita pertimbangkan senario dengan dua lajur div. Pada skrin yang lebih besar, div dipaparkan secara mendatar, tetapi apabila lebar skrin mengecil, ia disusun secara menegak. Walau bagaimanapun, kami memerlukan susunan khusus untuk div dalam reka letak menegak.

Secara tradisinya, JavaScript akan digunakan untuk tugasan tersebut. Walau bagaimanapun, dalam senario ini, JavaScript bukan pilihan. Oleh itu, kami beralih kepada spesifikasi CSS flexbox serba boleh untuk mencapai matlamat kami.

Menggunakan sifat 'order' dan 'flex-flow', kami boleh membuat reka letak yang memenuhi keperluan kami. Ambil perhatian bahawa penyelesaian ini disokong oleh semua penyemak imbas malar hijau dan IE11, walaupun dengan awalan vendor untuk IE10.

Dalam CSS kami, kami mentakrifkan sifat div seperti lebar, tinggi dan paparan blok sebaris. Kami juga menetapkan kelas warna kepada setiap div.

Seterusnya, kami mentakrifkan pertanyaan media yang diaktifkan apabila lebar skrin turun di bawah 531px. Dalam pertanyaan ini, kami mengubah suai sifat paparan bekas kepada 'flex' dan 'lajur,' memastikan bahawa div disusun secara menegak pada skrin yang lebih sempit.

Kemudian, kami menentukan susunan div yang sepatutnya muncul dalam menegak susun atur. Menggunakan sifat 'pesanan', kami menetapkan nilai tertib yang lebih tinggi kepada div yang sepatutnya muncul berhampiran bahagian atas tindanan menegak.

Berikut ialah contoh ilustrasi:

.container div {
  width: 100px;
  height: 50px;
  display: inline-block;
}

.one { background: red; }
.two { background: orange; }
.three { background: yellow; }
.four { background: green; }
.five { background: blue; }

@media screen and (max-width: 531px) {
  .container {
    display: flex;
    flex-flow: column;
  }
  .five { order: 1; }
  .four { order: 2; }
  .three { order: 3; }
  .two { order: 4; }
  .one { order: 5; }
}

<div class="container">
  <div class="one">I'm first</div>
  <div class="two">I'm second</div>
  <div class="three">I'm third</div>
  <div class="four">I'm fourth</div>
  <div class="five">I'm fifth</div>
</div>

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyusun Semula Div Menggunakan CSS Flexbox Berdasarkan Lebar Skrin?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!