Comment empêcher les éléments flexibles de s'étirer de manière indésirable dans un conteneur flexible ?

Comment empêcher les éléments flexibles de s'étirer de manière indésirable

Lors de l'imbrication d'éléments dans un conteneur flexible, il est courant de rencontrer des situations dans lesquelles des éléments enfants s'étirent pour remplir toute la hauteur du conteneur, même s'ils ne contiennent qu'un contenu minimal. Cela peut être indésirable, surtout si vous souhaitez contrôler la taille d'éléments flexibles spécifiques.

Comprendre le problème

Par défaut, les éléments flexibles s'étirent pour occuper toute la hauteur de leur conteneur. Cela se produit car la propriété align-items est définie sur stretch. Cela signifie que le conteneur répartira l'espace disponible de manière égale entre ses éléments enfants, les obligeant à s'étirer verticalement.

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

Pour empêcher des éléments flexibles spécifiques de s'étirer, vous pouvez ajuster la propriété align-items. Voici deux approches pour y parvenir :

1. Appliquer align-items: flex-start au conteneur Flex

En définissant align-items: flex-start sur le conteneur flex, vous demandez au navigateur d'aligner les éléments en haut du conteneur. Cela signifie qu'ils ne s'étireront plus pour remplir toute la hauteur.

div {
  align-items: flex-start;
  background: tan;
  display: flex;
  height: 200px;
}
span {
  background: red;
}

2. Utilisez flex-shrink : 0 sur l'élément flexible spécifique

Si vous souhaitez empêcher des éléments flexibles spécifiques de s'étirer tout en permettant à d'autres de remplir l'espace restant, vous pouvez utiliser la propriété flex-shrink. En définissant flex-shrink: 0 sur les éléments souhaités, vous évitez qu'ils ne rétrécissent (et ne s'étirent) au-delà de leur taille d'origine.

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

span {
  background: red;
  flex-shrink: 0;
}

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!