Comment puis-je réorganiser efficacement les éléments Flexbox pour différentes tailles d'écran ?

Propriété de commande flexible : réorganisation des éléments pour les vues mobiles et de bureau

Lors de la gestion de la disposition des articles dans un conteneur, la propriété de commande ainsi que flexbox peut être un outil puissant. Cependant, des difficultés peuvent survenir lorsque vous tentez de réorganiser des éléments spécifiquement pour les appareils mobiles et les affichages sur écran plus grand.

Considérez le scénario suivant : vous avez trois divs dans un conteneur, avec l'ordre défini sur 2, 1 et 3 sur mobile. en utilisant la propriété order. Cela fonctionne bien sur les appareils mobiles. Cependant, sur des écrans plus grands, l'ordre semble incorrect.

La cause première de ce problème réside dans la nature de flexbox. Flexbox est conçu pour aligner le contenu en répartissant l'espace dans le conteneur. Dans un conteneur de retour à la ligne, les éléments doivent être renvoyés dans de nouvelles lignes, contrairement à un système de grille où les éléments peuvent être renvoyés arbitrairement.

Par conséquent, dans un conteneur flexbox, l'élément div3 ne peut pas être placé sous l'élément div2 car cela créerait une grille. comme une mise en page plutôt qu'une ligne droite. En conséquence, des espaces apparaissent entre les éléments qui ne sont pas les plus hauts de la ligne.

Pour éviter ces espaces disgracieux, pensez à utiliser le retour à la ligne de colonne au lieu du retour à la ligne. Dans un conteneur de renvoi à la ligne, les éléments sont renvoyés dans de nouvelles colonnes, ce qui permet une mise en page dans laquelle div2 et div3 peuvent s'aligner verticalement.

Par exemple :

.container {
    display: flex;
    flex-direction: column;
    height: 200px;
}
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%;
    }
}

Dans cet exemple, la mise en page mobile conserve l'ordre de 2, 1, 3, tandis que la disposition du bureau réorganise les éléments en 1, 2, 3. Les espaces sont éliminés car les éléments s'enroulent verticalement au lieu de horizontalement.

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!