Comment la propriété « order » de Flexbox peut-elle être utilisée efficacement pour des mises en page multi-écrans complexes ?

Utilisation de la propriété Flex Order pour plusieurs dispositions d'écran

Lorsqu'il s'agit de réorganiser des éléments pour différentes tailles d'écran, la propriété flex et son attribut order peut fournir des solutions flexibles. Cependant, certains défis peuvent survenir lorsque vous tentez de réaliser des mises en page spécifiques.

Vue mobile :

L'utilisation des propriétés flex et order fonctionne comme prévu sur mobile, vous permettant de commander des éléments. en fonction de leurs valeurs de commande.

Vue du bureau :

Cependant, des difficultés surviennent en appliquant les mêmes principes à des vues d’écran plus grandes. La propriété de retour à la ligne dans flexbox pose des limitations qui rendent difficile l'obtention d'une mise en page spécifique.

Problème :

Dans la structure HTML donnée, trois divs sont placés à l'intérieur d'un conteneur div sans imbrication. À l’aide des propriétés flex et order, l’objectif est de réorganiser les éléments dans un ordre spécifique sur la vue du bureau. Le problème se produit car la propriété order ne permet pas aux éléments de s'enrouler les uns sous les autres dans la même ligne.

Solution :

Pour résoudre ce problème, envisagez d'implémenter le retour à la ligne des colonnes. au lieu du retour à la ligne :

/*************** 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%;
  }
}

Cette approche utilise le retour à la ligne de colonne pour aligner les éléments verticalement sur la vue du bureau. La propriété flex-direction est définie sur column et la propriété flex-wrap est définie pour s'enrouler au point d'arrêt approprié. Les valeurs des commandes sont ajustées pour obtenir l'arrangement souhaité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!