Comment puis-je déterminer la largeur d'un enfant Flexbox en fonction de son contenu ?

Largeur enfant Flexbox

Un conteneur parent div avec affichage : flex a un enfant a. Comment l'enfant peut-il apparaître "en ligne" avec sa largeur déterminée par son contenu ?

Solution

Utiliser align-items : flex-start sur le conteneur ou align-self : flex-start sur chaque enfant.

Analyse

Les conteneurs Flex ont un paramètre par défaut d'align-items : stretch, provoquant l'expansion des éléments enfants le long de l'axe transversal. En définissant align-items : flex-start ou align-self : flex-start, vous pouvez empêcher l'expansion de la largeur de l'enfant et obtenir une apparence en ligne.

Informations supplémentaires

• align-self s'applique aux éléments flexibles individuels, tandis que align-items s'applique à l'ensemble du conteneur.
• align-items : flex-start assure l'alignement transversal avec le début du conteneur.

• Pour en savoir plus sur l'alignement flexible, reportez-vous à :

  • [Comment fonctionne flex-wrap ? ](link1)
  • [Pourquoi n'y a-t-il pas de "justify-items" et de "justify-self" propriétés ?](link2)

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!