Comment empêcher les éléments flexibles de s'étirer jusqu'à la largeur du conteneur ?

Comment forcer les éléments flexibles à s'adapter au contenu, pas à la largeur du conteneur

Dans les mises en page flexibles, les éléments s'étirent naturellement pour remplir la largeur de leur parent récipient. Cela peut être indésirable lorsque vous souhaitez que les éléments enfants enveloppent uniquement leur contenu. Voici comment appliquer ce comportement :

Solution utilisant align-items/align-self

Définissez align-items : flex-start sur le conteneur, ou align-self : flex-start sur les éléments flex. Cela remplace la valeur par défaut align-items: stretch, qui provoque l'expansion des éléments pour remplir l'espace horizontal du conteneur lorsque la direction flexible est la colonne.

Comment ça marche

En définissant align-items: flex-start, vous forcez les éléments à s'aligner sur le bord de départ du conteneur. Puisque la direction de la colonne est définie, le bord de départ est le bord gauche. Cela oblige les éléments à rester aussi larges que leur contenu uniquement.

Exemple :

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
a {
  padding: 10px 40px;
  background: pink;
}

Concepts associés

• Axe transversal : L'axe perpendiculaire à l'axe de disposition principal (horizontalement dans la colonne mises en page).
• align-items : Aligne les éléments flexibles le long de l'axe transversal.
• align-self : Semblable à align-items, mais spécifique aux éléments flexibles individuels.

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!