Comment surmonter les limites de Flex Order lors de la réorganisation des éléments dans des mises en page réactives ?

Ordre flexible : défis liés à la réorganisation des éléments pour des vues réactives

Dans la conception de mises en page réactives, la propriété d'ordre flexible offre un moyen pratique de manipuler les ordre des éléments sur différentes tailles d’écran. Cependant, certains scénarios peuvent exposer les limites de l'utilisation de order dans un conteneur flexible.

Le problème : commande sur mobile, échec sur ordinateur

Considérez une mise en page avec trois divs à l'intérieur. un conteneur, disposé verticalement sur des écrans mobiles. En utilisant l'ordre flexible, nous visons à réorganiser les divs comme suit : 2, 1, 3 sur mobile et 1, 2, 3 sur ordinateur. Cependant, la mise en page tombe en panne sur les vues du bureau.

La cause profonde : enroulement de ligne incompatible avec Flex

Le problème vient du fait que flexbox est un système de retour à la ligne, ce qui signifie que les éléments sont placés dans de nouvelles lignes. Dans la mise en page souhaitée, nous souhaitons qu'un élément soit placé sous un autre dans la même ligne. Cela n'est pas possible dans un conteneur flexible droit.

Les éléments flexibles sont confinés à des lignes droites et inflexibles, donc div3 ne peut pas être placé sous div2 tout en conservant un retour à la ligne. Cela entraîne des espaces disgracieux et une disposition cassée.

Conteneurs imbriqués et enveloppes de colonnes

Une solution possible consiste à imbriquer div2 et div3 dans leur propre conteneur, ce qui en fait un frère de div1. Ce nouveau conteneur peut alors devenir un conteneur flexible avec enroulement de colonnes, éliminant les espaces et alignant correctement les éléments.

Cependant, dans ce scénario, le conteneur flexible imbriqué viole l'exigence pour tous les éléments. pour avoir le même parent, car la propriété order doit être appliquée aux éléments parents.

Exploration de la colonne Wrap

Une approche alternative consiste à utiliser un wrap de colonne au lieu d'un retour à la ligne pour le conteneur. En définissant la direction de flexion du conteneur sur la colonne et en fournissant une hauteur fixe, nous pouvons contrôler l'endroit où les éléments s'enroulent.

Cette technique nous permet d'obtenir le réarrangement souhaité pour les vues mobiles et de bureau, comme démontré dans l'extrait de code CSS et HTML fourni.

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!