Crêpe déstructurée

Il s'agit d'une mise en page courante pour les sites marketing, par exemple, qui peuvent comporter une ligne de trois éléments, généralement avec une image, un titre, puis du texte décrivant certaines caractéristiques d'un produit. Sur les petits écrans, il est préférable que ceux-ci s'empilent et se développent à mesure que vous augmentez la taille de l'écran.

En utilisant Flexbox pour cet effet, vous n'aurez pas besoin de requêtes média pour ajuster la position de ces éléments lorsque l'écran redimensionne.

Le raccourci flex signifie: flex: <flex-grow> <flex-shrink> <flex-basis>.

Étirements de flex-grow

Si vous voulez que les cases s'étirent et remplissent l'espace à mesure qu'elles passent à la ligne suivante, définissez la valeur de <flex-grow> sur 1, par exemple:

.parent {
  display: flex;
}

.child {
  flex: 1 1 150px;
}

Désormais, à mesure que vous augmentez ou diminuez la taille de l'écran, ces éléments flexibles se rétrécissent et s'agrandissent.

Pas d'étirements

Si vous voulez que vos cartons se remplissent à leur taille de <flex-basis>, rétrécissez pour les tailles plus petites, mais pas étirer pour remplir un espace supplémentaire, saisissez flex: 0 1 <flex-basis>. Dans ce cas, la taille de votre <flex-basis> est de 150 px:

.parent {
  display: flex;
}

.child {
  flex: 0 1 150px;
}

HTML

<div class="parent">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

CSS

        .parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.box {
  /*  Stretching: */
  flex: 1 1 150px; 
  margin: 5px;
  background: red;
  gap: 1rem;
}