Comment puis-je réorganiser les divisions à l'aide de CSS Flexbox en fonction de la largeur de l'écran ?

Modifier l'ordre des divisions avec CSS, en fonction de la largeur de l'appareil

Lors de la création de sites Web réactifs, le maintien de la mise en page souhaitée sur différents appareils peut être un défi. L'un de ces problèmes est le réarrangement des divs lorsque la taille de l'écran change. Bien qu'il soit simple d'empiler des divs verticalement sur des écrans plus petits, il peut être plus complexe de les ordonner différemment en fonction de la disposition.

Par exemple, considérons un scénario avec deux colonnes de divs. Sur les écrans plus grands, les divs sont affichés horizontalement, mais lorsque la largeur de l'écran se rétrécit, ils s'empilent verticalement. Cependant, nous exigeons un ordre spécifique pour les divs dans la disposition verticale.

Traditionnellement, JavaScript serait utilisé pour de telles tâches. Toutefois, dans ce scénario, JavaScript n’est pas une option. Par conséquent, nous nous tournons vers la spécification CSS flexbox polyvalente pour atteindre notre objectif.

En utilisant les propriétés 'order' et 'flex-flow', nous pouvons créer une mise en page qui répond à nos exigences. Notez que cette solution est prise en charge par tous les navigateurs persistants et IE11, bien qu'avec un préfixe de fournisseur pour IE10.

Dans notre CSS, nous définissons les propriétés div telles que la largeur, la hauteur et l'affichage des blocs en ligne. Nous attribuons également des classes de couleurs à chaque div.

Ensuite, nous définissons une requête multimédia qui s'active lorsque la largeur de l'écran descend en dessous de 531 pixels. Dans cette requête, nous modifions les propriétés d'affichage du conteneur en « flex » et « column », garantissant que les divs s'empilent verticalement sur des écrans plus étroits.

Ensuite, nous spécifions l'ordre dans lequel les divs doivent apparaître verticalement. mise en page. À l'aide de la propriété « order », nous attribuons une valeur d'ordre plus élevée aux divs qui doivent apparaître en haut de la pile verticale.

Voici un exemple illustratif :

.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>

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!