Comment réorganiser les éléments Flexbox de manière réactive tout en maintenant le référencement ?

Personnalisation de l'ordre Flexbox pour des mises en page DOM réactives

Question :

Comment réorganiser les divs à l'aide de Flexbox tout en maintenant une recherche structure optimisée pour le moteur sans éléments répétitifs ?

Réponse :

Bien que CSS à lui seul ne puisse pas accomplir pleinement cette tâche, une approche hybride est disponible.

Flexbox avec hauteur statique :

Vous pouvez tirer parti de la flexbox et de la hauteur fixe pour commander des divs :

<code class="css">.flex {
  height: 90vh;
  display: flex;
  flex-flow: column wrap;
}
.flex div:nth-child(2) {
  order: -1;
}</code>

Cela empilera les éléments verticalement et placera le deuxième div en bas.

Requête multimédia pour un comportement réactif :

Utilisez une requête multimédia pour gérer différentes tailles d'écran :

<code class="css">@media (max-width:768px) {
  .flex div:nth-child(2) {
    order: 0;
  }
}</code>

Sur des écrans plus petits, la deuxième div sera être positionné à nouveau en haut.

Style :

<code class="css">.flex-child {
  font-size: 2em;
  font-weight: bold;
}
.flex-child:nth-child(1) {
  background: #e6007e;
}
.flex-child:nth-child(2) {
  background: #f4997c;
}
.flex-child:nth-child(3) {
  background: #86c06b;
}</code>

Démo :

Voir ce CodePen pour un fonctionnement exemple : DÉMO CODEPEN

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!