Bagaimanakah Harta `pesanan` Flexbox Boleh Digunakan Dengan Berkesan untuk Reka Letak Berbilang Skrin yang Kompleks?

Menggunakan Flex Order Property untuk Pelbagai Reka Letak Skrin

Apabila ia berkaitan dengan penyusunan semula elemen untuk saiz skrin yang berbeza, sifat flex dan atribut tertibnya boleh memberikan penyelesaian yang fleksibel. Walau bagaimanapun, cabaran tertentu boleh timbul apabila cuba mencapai reka letak tertentu.

Paparan Mudah Alih:

Menggunakan sifat fleksibel dan perintah berfungsi seperti yang diharapkan pada mudah alih, membolehkan anda memesan elemen mengikut nilai pesanan mereka.

Desktop Paparan:

Walau bagaimanapun, kesukaran timbul apabila menggunakan prinsip yang sama pada paparan skrin yang lebih besar. Sifat row wrap dalam flexbox menimbulkan had yang menyukarkan untuk mencapai reka letak tertentu.

Masalah:

Dalam struktur HTML yang diberikan, tiga div diletakkan di dalam div kontena tanpa bersarang. Menggunakan sifat flex dan susunan, matlamatnya adalah untuk menyusun semula elemen dalam susunan tertentu pada paparan desktop. Masalah berlaku kerana sifat pesanan tidak membenarkan item dibalut di bawah satu sama lain dalam baris yang sama.

Penyelesaian:

Untuk menyelesaikan isu ini, pertimbangkan untuk melaksanakan balutan lajur bukannya balut baris:

/*************** MOBILE *************/

.container {
  display: flex;
  flex-direction: column;
  height: 200px; /* necessary so items know where to wrap */
}
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%;
  }
}

Pendekatan ini menggunakan balut lajur untuk menjajarkan elemen secara menegak pada paparan desktop. Sifat flex-direction ditetapkan kepada lajur dan sifat flex-wrap ditetapkan untuk membalut pada titik putus yang sesuai. Nilai pesanan dilaraskan untuk mencapai susunan yang diingini.

Atas ialah kandungan terperinci Bagaimanakah Harta `pesanan` Flexbox Boleh Digunakan Dengan Berkesan untuk Reka Letak Berbilang Skrin yang Kompleks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!