Comment puis-je créer une grille CSS de carrés parfaits à l'aide de Flexbox ?

Grille CSS de carrés à l'aide de Flexbox

Dans l'extrait de code fourni, vous avez créé une grille de carrés à l'aide de Flexbox. Cependant, ils ne sont pas de forme carrée et leur hauteur change également lorsque la hauteur de la fenêtre d'affichage change.

Pour obtenir la mise en page souhaitée, vous devez appliquer une propriété CSS nommée aspect-ratio à chacun des éléments carrés. La propriété de rapport d'aspect oblige l'élément à conserver un rapport largeur/hauteur spécifique. Dans votre cas, vous voulez que vos carrés soient carrés, vous devez donc définir le rapport hauteur/largeur sur 1 / 1.

Voici à quoi ressemblerait votre code mis à jour :

.flex-item {
  aspect-ratio: 1 / 1;
  /* Rest of your styles here */
}

Par en définissant la propriété de rapport d'aspect, vos carrés conserveront toujours une forme carrée, quelle que soit la largeur ou la hauteur de la fenêtre.

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!