Esnek öğelerin ana kabın genişliğini değil içerik genişliğini almasını sağlayın

İle bir kabım <div>var display: flex. Bir çocuğu var <a>.

Çocuğu nasıl "satır içi" olarak gösterebilirim?

Özellikle, çocuğun genişliğini içeriğine göre belirleyebilir ve ebeveynin genişliğine nasıl genişletemezim?

Ne denedim:

Çocuğu ben ayarladım display: inline-flex, ama yine de tam genişliğini aldı. Diğer tüm ekran özelliklerini de denedim, ancak hiçbir şeyin etkisi olmadı.

Misal:

.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

Kullanım align-items: flex-startkabın üzerine veya align-self: flex-startesnek öğeler üzerinde.

Gerek yok display: inline-flex.

Esnek bir kabın başlangıç ​​ayarı align-items: stretch. Bu, esnek öğelerin, kabın tüm uzunluğunu çapraz eksen boyunca kaplayacak şekilde genişleyeceği anlamına gelir.

align-selfMülkiyet olarak aynı şeyi yapar align-itemsdışında align-selfgeçerli olduğu esnek öğeler ise align-itemsuygulanır esnek konteyner .

Varsayılan olarak, align-selfdeğerini devralır align-items.

Kabınız olduğundan flex-direction: column, çapraz eksen yataydır ve align-items: stretchalt öğenin genişliğini olabildiğince genişletmektedir.

align-items: flex-startKapsayıcıda (tüm esnek öğeler tarafından devralınan) veya align-self: flex-startöğede (tek öğeyle sınırlı olan ) varsayılan değeri geçersiz kılabilirsiniz .

Çapraz eksen boyunca esnek hizalama hakkında daha fazla bilgiyi burada bulabilirsiniz:

• Esnek sarma, hizalama-benlik, hizalama öğeleri ve hizalama içeriği ile nasıl çalışır?

Burada ana eksen boyunca esnek hizalama hakkında daha fazla bilgi edinin :

• CSS Flexbox'ta neden "bloklama öğeleri" ve "bloklama" özellikleri yoktur?

Buna ek olarak align-self, neredeyse aynı şeyi yapacak otomatik marjı da düşünebilirsiniz.

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