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

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

Susan Sarandon
Susan Sarandonoriginal
2024-12-16 11:57:11774parcourir

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

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn