Bagaimanakah Saya Boleh Menyusun Semula Item Flexbox dengan Cekap untuk Saiz Skrin Berbeza?

Harta Pesanan Fleksibel: Menyusun Semula Item untuk Paparan Mudah Alih dan Desktop

Apabila menguruskan susun atur item dalam bekas, sifat pesanan bersama-sama dengan flexbox boleh menjadi alat yang berkuasa. Walau bagaimanapun, cabaran boleh timbul apabila cuba menyusun semula item khusus untuk paparan skrin mudah alih dan lebih besar.

Pertimbangkan senario berikut: Anda mempunyai tiga div dalam bekas, dengan pesanan ditetapkan kepada 2, 1 dan 3 pada mudah alih menggunakan harta pesanan. Ini berfungsi dengan baik pada peranti mudah alih. Walau bagaimanapun, pada skrin yang lebih besar, susunan itu kelihatan tidak betul.

Punca isu ini terletak pada sifat flexbox. Flexbox direka bentuk untuk menjajarkan kandungan dengan mengagihkan ruang dalam bekas. Dalam bekas balut baris, item mesti dibalut ke baris baharu, tidak seperti sistem grid di mana item boleh dibalut sewenang-wenangnya.

Oleh itu, dalam bekas flexbox, item div3 tidak boleh membalut di bawah item div2 kerana ia akan mewujudkan grid- seperti susun atur dan bukannya baris lurus. Akibatnya, jurang muncul antara item yang bukan yang paling tinggi dalam baris.

Untuk mengelakkan jurang yang tidak sedap dipandang ini, pertimbangkan untuk menggunakan balut lajur dan bukannya balut baris. Dalam bekas balut lajur, balut item ke lajur baharu, membenarkan reka letak di mana div2 dan div3 boleh dijajarkan secara menegak.

Contohnya:

.container {
    display: flex;
    flex-direction: column;
    height: 200px;
}
div.orange {
  background-color: orange;
}
div.blue {
  order: -1;
  background-color: aqua;
}
div.green {
  background-color: lightgreen;
}
.container > div {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 800px) {
    .container {
        flex-wrap: wrap;
    }
    div.orange {
        flex-basis: 100%;
        width: 50%;
    }
    div.blue {
        flex-basis: 50%;
        width: 50%;
        order: 0;
    }
    div.green {
        flex-basis: 50%;
        width: 50%;
    }
}

Dalam contoh ini, reka letak mudah alih mengekalkan tertib 2, 1, 3, manakala susun atur desktop menyusun semula item kepada 1, 2, 3. Jurang dihapuskan kerana item membalut secara menegak dan bukannya secara mendatar.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyusun Semula Item Flexbox dengan Cekap untuk Saiz Skrin Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!