Fai in modo che gli elementi flessibili assumano la larghezza del contenuto, non la larghezza del contenitore principale

Ho un contenitore <div>con display: flex. Ha un figlio <a>.

Come posso far apparire il bambino "in linea"?

In particolare, come posso determinare la larghezza del bambino in base al suo contenuto e non espandere la larghezza del genitore?

Cosa ho provato:

Ho impostato il bambino su display: inline-flex, ma ha comunque occupato l'intera larghezza. Ho anche provato tutte le altre proprietà di visualizzazione, ma nulla ha avuto effetto.

Esempio:

.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

Utilizzare align-items: flex-startsul contenitore o align-self: flex-startsugli articoli flessibili.

Non c'è bisogno di display: inline-flex.

Un'impostazione iniziale di un contenitore flessibile è align-items: stretch. Ciò significa che gli articoli flessibili si espandono per coprire l'intera lunghezza del contenitore lungo l'asse trasversale.

La align-selfproprietà fa la stessa cosa align-items, tranne che si align-selfapplica agli oggetti flessibili mentre si align-itemsapplica al contenitore flessibile .

Per impostazione predefinita, align-selferedita il valore di align-items.

Poiché il contenitore è flex-direction: column, l'asse trasversale è orizzontale e align-items: stretchsta espandendo la larghezza dell'elemento figlio il più possibile.

È possibile ignorare l'impostazione predefinita con align-items: flex-startsul contenitore (che è ereditato da tutti gli articoli flessibili) o align-self: flex-startsull'elemento (che è limitato al singolo articolo).

Ulteriori informazioni sull'allineamento flessibile qui lungo l' asse trasversale :

• Come funziona flex-wrap con align-self, align-items e align-content?

Ulteriori informazioni sull'allineamento flessibile qui lungo l' asse principale :

• Nel CSS Flexbox, perché non ci sono proprietà "justify-items" e "justify-self"?

Inoltre align-self, puoi anche considerare il margine automatico che farà quasi la stessa cosa

.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>