Comment puis-je créer une grille de carrés CSS entièrement réactive à l'aide de Flexbox ?

Grille de carrés CSS avec Flexbox

L'objectif est de créer une grille de carrés entièrement réactive à l'aide de CSS et Flexbox, où les carrés évoluent et s'ajustent parfaitement pour s'adapter au largeur de la fenêtre, tout en conservant un rapport d'aspect carré quelle que soit la hauteur de la fenêtre.

Rendre les carrés carrés

Pour garantir les carrés conservent leur forme carrée, nous exploitons la propriété CSS aspect-ratio. Cette propriété permet de spécifier le rapport hauteur/largeur intrinsèque d'un élément, préservant ainsi ses dimensions. Voici le CSS mis à jour :

.flex-item {
  aspect-ratio: 1 / 1;
}

Maintenant, les carrés conserveront toujours leurs proportions carrées.

Mise à l'échelle des carrés

Pour redimensionner les carrés de manière appropriée, nous utilisons le propriété flex dans Flexbox. La propriété flex est chargée de contrôler le comportement d'un élément dans son conteneur flex. Voici comment nous l'utilisons :

.flex-item {
  flex: 1 0 auto;
}

• flex : 1 signifie que chaque carré occupera une quantité égale d'espace dans le conteneur.
• 0 signifie que les carrés ne rétrécira pas en dessous de sa taille initiale.
• auto signifie que les carrés grandiront pour remplir l'espace disponible espace.

Préserver l'ajustement horizontal

Même avec Flexbox, les carrés peuvent s'enrouler sur plusieurs lignes si la fenêtre d'affichage devient trop étroite. Pour éviter cela, nous définissons la propriété justification-content du conteneur flexible sur space-around. Cela garantit que les carrés sont uniformément répartis et justifiés dans le conteneur sans emballage.

CSS mis à jour pour le conteneur flexible :

.flex-container {
  justify-content: space-around;
}

Résultat final

En implémentant ces techniques , nous pouvons maintenant créer une grille CSS de carrés qui s'adapte et s'ajuste parfaitement à la largeur de la fenêtre d'affichage. Les carrés conservent leur rapport d'aspect carré quelle que soit la hauteur de la fenêtre, garantissant une disposition cohérente et visuellement agréable.

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!