Faire en sorte que les éléments flexibles prennent la largeur du contenu, pas la largeur du conteneur parent

154

J'ai un conteneur <div>avec display: flex. Il a un enfant <a>.

Comment puis-je faire apparaître l'enfant "en ligne"?

Plus précisément, comment puis-je faire en sorte que la largeur de l'enfant soit déterminée par son contenu et ne pas s'étendre à la largeur du parent?

Ce que j'ai essayé:

J'ai mis l'enfant à display: inline-flex, mais il a toujours pris toute la largeur. J'ai également essayé toutes les autres propriétés d'affichage, mais rien n'a eu d'effet.

Exemple: 

.container {
  background: red;
  height: 200px;
  flex-direction: column;
  padding: 10px;
  display: flex;
}
a {
  display: inline-flex;
  padding: 10px 40px;
  background: pink;
}
<div class="container">
  <a href="#">Test</a>
</div>
Développer l'extrait

http://codepen.io/donpinkus/pen/YGRxRY

html css flexbox Don P
la source

Réponses:

264

Utiliser align-items: flex-startsur le conteneur ou align-self: flex-startsur les éléments flexibles.

Pas besoin de display: inline-flex.

Un paramètre initial d'un conteneur flexible est align-items: stretch. Cela signifie que les éléments flexibles s'étendent pour couvrir toute la longueur du conteneur le long de l'axe transversal.

La align-selfpropriété fait la même chose que align-items, sauf que cela align-selfs'applique aux éléments flexibles tandis que align-itemss'applique au conteneur flex .

Par défaut, align-selfhérite de la valeur de align-items.

Puisque votre conteneur est flex-direction: column, l'axe transversal est horizontal et align-items: stretchélargit la largeur de l'élément enfant autant que possible.

Vous pouvez remplacer la valeur par défaut avec align-items: flex-startsur le conteneur (qui est hérité par tous les éléments flexibles) ou align-self: flex-startsur l'élément (qui est limité à l'élément unique).

En savoir plus sur l'alignement flex le long de l' axe transversal ici:

En savoir plus sur l'alignement flex le long de l' axe principal ici:

Michael Benjamin
la source
2

En plus, align-selfvous pouvez également envisager la marge automatique qui fera presque la même chose

.container {
  background: red;
  height: 200px;
  flex-direction: column;
  padding: 10px;
  display: flex;
}
a {
  margin-right:auto;
  padding: 10px 40px;
  background: pink;
}
<div class="container">
  <a href="#">Test</a>
</div>
Développer l'extrait

Temani Afif
la source