Pourquoi la définition d'une hauteur fixe sur un élément flexible n'affecte-t-elle pas sa taille ?

Pour cet exemple, il suffit de manipuler cette ligne :

.flex-item {
    ... ;
    height: auto;
}

Modifier sa valeur par :

.flex-item {
    ... ;
    height: 50px;
}

Cette modification va ne change rien du tout. La hauteur sera toujours calculée automatiquement.

Pour que toutes les cellules soient carrées, lisez juste en dessous :

Voici une façon possible de rendre toutes les cellules carrées à l'aide de Flexbox.

1. Pour contraindre le rapport hauteur/largeur, soit manuellement, soit en valeur absolue, définissez-le avec des pourcentages comme vous l'avez déjà fait.
2. Réinitialisez ensuite les éléments liés à Flexbox hauteur/largeur sur ces cellules sur auto. Ceux-ci garantissent que les éléments ne sont pas redimensionnés pour s'adapter à la taille du conteneur lorsqu'elle change.

.flex-item {
  ... ;
  height: auto;
  width: auto;
  min-width: 50px; /* minimum width of 50px; adapt to your needs */ 
}

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!