Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Menyusun Semula Div Menggunakan CSS Flexbox Berdasarkan Lebar Skrin?

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

Susan Sarandon
Lepaskan: 2024-12-16 11:57:11
asal
770 orang telah melayarinya

How Can I Reorder Divs Using CSS Flexbox Based on Screen Width?

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; }
}
Salin selepas log masuk
<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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan