Comment empêcher les éléments flexibles de s'étirer dans Flexbox ?

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, il existe des situations dans lesquelles 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 espace disponible.

Empêcher 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 de prendre plus de place que nécessaire.

Exemple

Considérons l'exemple suivant :

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

<div>
  <span>This is some text.</span>
</div>

Dans cet exemple, l'élément flexible (span) s'étend jusqu'à remplir toute la hauteur de son récipient. 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 pour remplir toute la hauteur.

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!