Empêcher les éléments flexibles de s'étirer

Lors de l'utilisation de la disposition Flexbox, il est possible que les éléments flexibles s'étirent et remplissent l'espace disponible dans leur conteneur. . Cependant, dans certaines situations, vous souhaiterez peut-être éviter que cela ne se produise.

Pourquoi les éléments flexibles peuvent-ils s'étirer ?

Par défaut, les éléments flexibles s'étirent le long de l'axe principal. de leur conteneur, qui est généralement horizontal (ligne) ou vertical (colonne). En effet, la propriété flex est définie sur 1 par défaut, ce qui indique que l'élément doit être flexible et s'étendre pour remplir tout l'espace disponible.

Prévenir l'étirement de l'élément flexible

Pour empêcher un élément flexible de s'étirer, vous pouvez remplacer la valeur de flexion par défaut en la définissant sur 0. Cela entraînera le rétrécissement de l'élément pour l'adapter à son contenu, l'empêchant ainsi d'occuper plus d'espace que nécessaire.

Exemple

Considérez l'exemple suivant :

div {
  display: flex;
  height: 200px;
  background: tan;
}
span {
  background: red;
}

  This is some text.

Dans cet exemple, l'élément flexible (span) s'étire pour remplir toute la hauteur de son conteneur. Pour éviter cela, ajoutez le style suivant à l'élément div :

align-items: flex-start;

Cela aligne les éléments flexibles au début de leur conteneur, les empêchant de s'étirer jusqu'à remplir toute la hauteur.