Crêpe déstructurée

Il s'agit d'une mise en page courante pour les sites marketing, 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 écrans plus petits, ils doivent s'empiler correctement et s'étendre à mesure que la taille de l'écran augmente.

En utilisant flexbox pour cet effet, vous n'aurez pas besoin de requêtes multimédias pour ajuster l'emplacement de ces éléments lorsque l'écran sera redimensionné.

L'abréviation flex correspond à: flex: <flex-grow> <flex-shrink> <flex-basis>.

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

.parent {
  display: flex;
}

.child {
  flex: 1 1 150px;
}

Maintenant, lorsque vous augmentez ou diminuez la taille de l'écran, ces éléments Flex se réduisent et se développent.

Pas d'étirement

Si vous souhaitez que vos zones se remplissent à la taille <flex-basis>, qu'elles se réduisent pour les tailles plus petites, mais qu'elles ne s'étendent pas pour remplir tout espace supplémentaire, écrivez: flex: 0 1 <flex-basis>. Dans ce cas, votre <flex-basis> est de 150 px:

.parent {
  display: flex;
}

.child {
  flex: 0 1 150px;
}
<div class="parent">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

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

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