Les éléments flexibles doivent prendre la largeur du contenu et non celle du conteneur parent.

Question

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

Comment faire pour que l'enfant apparaisse "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 s'étende pas à la largeur du parent ?

Ce que j'ai essayé :

J'ai réglé l'enfant sur display: inline-flex mais il occupe toujours 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

Answer 1

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

Pas besoin de display: inline-flex .

---

Le paramètre initial d'un conteneur flexible est align-items: stretch . Cela signifie que les articles flexibles se dilateront pour couvrir toute la longueur du conteneur le long de l'axe transversal.

El align-self fait la même chose que align-items sauf que align-self s'applique à articles flexibles tandis que align-items s'applique à la conteneur souple .

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

Puisque votre conteneur est flex-direction: column l'axe transversal est horizontal, et align-items: stretch étend la largeur de l'élément enfant autant qu'il le peut.

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 align-self: flex-start sur l'article (qui se limite à l'article unique).

---

Apprenez-en davantage sur l'alignement des flexibles le long du axe transversal ici :

• Comment fonctionne le flex-wrap avec align-self, align-items et align-content ?

Apprenez-en davantage sur l'alignement des flexibles le long du axe principal ici :

• Dans CSS Flexbox, pourquoi n'y a-t-il pas de propriétés "justify-items" et "justify-self" ?

Answer 2

En plus de align-self vous 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>