Comment empêcher les articles flexibles de s'étirer en hauteur ?

Application de l'indépendance de taille pour les éléments flexibles

Dans les mises en page flexibles, il est courant de rencontrer des scénarios dans lesquels des éléments flexibles spécifiques ne doivent pas s'étirer pour remplir le conteneur. hauteur. Ce comportement, appelé « étirement », peut perturber les intentions de conception. Explorons les raisons de ce problème et identifions la solution appropriée pour l'éviter.

Pourquoi un élément s'étire-t-il en hauteur ?

Par défaut, les éléments flexibles héritent de leur hauteur à partir de la propriété height du conteneur. Lorsqu'un conteneur reçoit une hauteur, ses éléments flexibles ajusteront leur taille en conséquence.

Empêcher l'étirement

Pour empêcher un élément de s'étirer en hauteur, vous pouvez le cibler spécifiquement dans le conteneur flexible. Une approche efficace consiste à modifier la propriété align-items du conteneur :

Étape 1 : aligner les éléments sur le début

Définir le Propriété align-items sur flex-start. Cela garantit que les éléments flexibles s’alignent sur le bord supérieur du conteneur. Par conséquent, les articles ne dépasseront pas leur hauteur inhérente, conservant ainsi leur taille d'origine.

Exemple de code :

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

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

En appliquant ces étapes, vous pouvez efficacement empêcher les éléments flexibles de s'étirer en hauteur sans affecter la taille ou l'alignement des autres éléments dans le conteneur flexible. La mise en œuvre de cette technique vous permet de garder le contrôle sur la mise en page et la présentation précises de vos éléments Web.

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!