web-dev-qa-db-fra.com

Faire en sorte que les éléments flexibles prennent la largeur du contenu et non celle du conteneur parent

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 définir la largeur de l'enfant en fonction de son contenu sans élargir celle du parent?

Ce que j'ai essayé:

Je règle l'enfant sur display: inline-flex, mais il occupe encore 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>

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

htmlcsscss3flexbox
104
Don P

Utilisez align-items: flex-start sur le conteneur ou align-self: flex-start sur les éléments flexibles.

Pas besoin de display: inline-flex.

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

La propriété align-self fait la même chose que align-items, sauf que align-self s'applique aux éléments flex tandis que align-items s'applique au conteneur flex .

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

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

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

En savoir plus sur l’alignement de flexion le long de l’axe transversal ici:

En savoir plus sur l’alignement de flexion le long de l’axe principal ici:

182
Michael_B