Spraw, by elementy flex miały szerokość zawartości, a nie szerokość kontenera nadrzędnego

Mam pojemnik <div>z display: flex. Ma dziecko <a>.

Jak ustawić dziecko jako „w tekście”?

W szczególności, w jaki sposób mogę ustawić szerokość dziecka na podstawie jego zawartości, a nie rozszerzać do szerokości rodzica?

Co próbowałem:

Ustawiłem dziecko display: inline-flex, ale nadal zajmowało całą szerokość. Wypróbowałem także wszystkie inne właściwości wyświetlania, ale nic nie przyniosło efektu.

Przykład:

.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

Użyj align-items: flex-startna pojemniku lub align-self: flex-startna elementach elastycznych.

Nie ma potrzeby display: inline-flex.

Początkowe ustawienie kontenera elastycznego to align-items: stretch. Oznacza to, że elementy elastyczne będą się rozszerzać i pokrywać całą długość pojemnika wzdłuż osi poprzecznej.

align-selfNieruchomość robi to samo, co align-items, poza tym, że align-selfodnosi się do typu flex przedmiotów natomiast align-itemsodnosi się do elastycznego pojemnika .

Domyślnie align-selfdziedziczy wartość align-items.

Ponieważ twój kontener jest flex-direction: column, oś poprzeczna jest pozioma i align-items: stretchrozszerza szerokość elementu podrzędnego tak bardzo, jak to możliwe.

Możesz zastąpić domyślne ustawienie align-items: flex-startna kontenerze (które jest dziedziczone przez wszystkie elementy flex) lub align-self: flex-startna elemencie (który jest ograniczony do pojedynczego elementu).

Dowiedz się więcej o wyrównaniu giętkim wzdłuż osi poprzecznej tutaj:

• Jak działa flex-wrap z align-self, align-items i align-content?

Dowiedz się więcej o wyrównaniu flex wzdłuż głównej osi tutaj:

• Dlaczego w CSS Flexbox nie ma właściwości „justify-items” i „justify-self”?

Oprócz tego align-selfmożesz również rozważyć automatyczny margines, który zrobi prawie to samo

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