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

Réorganisation dynamique des divisions en fonction de la largeur de l'appareil avec CSS

Lors de la création de sites Web réactifs, la gestion de l'affichage et de l'ordre des éléments devient essentielle. Un défi courant survient lorsque les divs doivent être réorganisés en fonction de la largeur de l'écran. Bien que cette tâche puisse être facilement réalisée avec moins de divs, elle devient plus complexe avec un nombre croissant.

Créer des colonnes avec deux divs

Commençons par un scénario simple de deux divs côte à côte. Dans un premier temps, nous pouvons utiliser CSS pour créer deux colonnes :

.container {
  width: 80%;
  margin: 0 auto;
}

.column-half {
  display: table-cell;
  padding: 25px;
  vertical-align: top;
  width: 40%;
}

.column-half-1 {
  float: left;
}

.column-half-2 {
  float: right;
}

Cette approche positionne les divs côte à côte dans des écrans plus larges mais les empile verticalement lorsque l'écran est trop étroit.

Défi avec quatre colonnes

Étendre cette approche à quatre colonnes devient problématique. En utilisant des flotteurs, nous pouvons créer quatre colonnes alignées horizontalement. Cependant, cet ordre ne peut pas être facilement modifié sur des écrans plus étroits.

Solution utilisant Flexbox

La solution à ce problème réside dans les propriétés Flexbox, « ordre » et « flex-flow'. Flexbox nous permet de contrôler la disposition et l'ordre des éléments dans les lignes et les colonnes. Grâce à ces propriétés, nous pouvons définir l'ordre des divs sur des écrans plus étroits sans compromettre la disposition sur des écrans plus larges :

.container {
  display: flex; /* Switches to a flex layout */
  flex-flow: column; /* Stacks elements vertically in narrower screens */
}

.column-quarter {
  width: 25%; /* Adjust percentage based on the number of columns */
}

.column-quarter-1 {
  order: 3; /* Defines the order in narrower screens */
}

.column-quarter-2 {
  order: 2;
}

.column-quarter-3 {
  order: 1;
}

.column-quarter-4 {
  order: 4;
}

Cette solution garantit que les divs s'affichent sous forme de lignes lorsque la largeur de l'écran le permet, puis se réorganisent automatiquement. en colonnes en fonction de l'ordre spécifié lorsque l'écran se rétrécit. Cette méthode relève efficacement le défi de la gestion dynamique de l'ordre des divisions dans les dispositions en lignes et en colonnes.

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!