Comment faire en sorte que la largeur des éléments flexibles soit déterminée par le contenu et non par le conteneur parent ?

Comment faire en sorte que les éléments flexibles occupent la largeur du contenu au lieu de la largeur parent

Flexbox offre un moyen pratique d'organiser les éléments. Cependant, par défaut, les éléments flexibles s'étendent jusqu'à la largeur de leur conteneur parent. Ce comportement n'est pas toujours souhaitable.

Problème :

Vous disposez d'un conteneur flexible avec un élément d'ancrage enfant (). Comment pouvez-vous faire en sorte que l'enfant apparaisse « en ligne », avec sa largeur déterminée par son contenu plutôt que de s'étendre sur toute la largeur du parent ?

Tentatives infructueuses :

Définition de la afficher la propriété de l'enfant sur inline-flex ne le fait pas travail.

Solution :

Utilisez les stratégies suivantes :

1. Utilisez align-items: flex-start sur le conteneur :

Cela définit l'alignement de tous les éléments flexibles verticalement vers le haut. Il remplace l'alignement « étirement » par défaut, empêchant les éléments de s'étendre sur toute la largeur du parent.

2. Utilisez align-self : flex-start sur l'élément Flex :

Cela définit l'alignement de l'élément flexible spécifique vers le haut, contrôlant son propre alignement indépendamment de l'autre flex. items.

Exemple :

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

a {
  padding: 10px 40px;
  background: pink;
}

Explication :

En utilisant align-items : flex-start ou align -self : flex-start, vous dites en fait que le ou les éléments flexibles pertinents doivent s'aligner sur le haut du conteneur le long de l'axe transversal (verticalement) et ne doit pas s'étendre sur toute la largeur du parent. Cela permet de déterminer la largeur de l'élément en fonction de son contenu, obtenant ainsi l'effet "en ligne" souhaité.

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!