Buat item fleksibel mengambil lebar konten, bukan lebar wadah induk

Saya memiliki sebuah wadah <div>dengan display: flex. Ia memiliki anak <a>.

Bagaimana saya bisa membuat anak tampak "inline"?

Secara khusus, bagaimana saya bisa membuat lebar anak ditentukan oleh kontennya, dan tidak memperluas ke lebar induknya?

Apa yang saya coba:

Saya mengatur anak untuk display: inline-flex, tetapi masih mengambil lebar penuh. Saya juga mencoba semua properti tampilan lainnya, tetapi tidak ada yang berpengaruh.

Contoh:

.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

Gunakan align-items: flex-startpada wadah, atau align-self: flex-startpada item fleksibel.

Tidak perlu display: inline-flex.

Pengaturan awal wadah fleksibel adalah align-items: stretch. Ini berarti bahwa item fleksibel akan mengembang untuk menutupi panjang penuh wadah di sepanjang sumbu silang.

The align-selfproperti melakukan hal yang sama seperti align-items, kecuali bahwa align-selfberlaku untuk item fleksibel sementara align-itemsberlaku untuk wadah fleksibel .

Secara default, align-selfmewarisi nilai align-items.

Karena wadah Anda adalah flex-direction: column, sumbu silang horizontal, dan align-items: stretchmemperluas lebar elemen anak sebanyak mungkin.

Anda dapat mengganti default dengan align-items: flex-startpada wadah (yang diwarisi oleh semua item fleksibel) atau align-self: flex-startpada item (yang terbatas pada item tunggal).

Pelajari lebih lanjut tentang penyejajaran fleksibel di sepanjang sumbu silang di sini:

• Bagaimana cara flex-wrap bekerja dengan align-self, align-items, dan align-content?

Pelajari lebih lanjut tentang pensejajaran fleksibel di sepanjang sumbu utama di sini:

• Di CSS Flexbox, mengapa tidak ada properti "justify-items" dan "justify-self"?

Selain itu align-selfAnda juga dapat mempertimbangkan margin otomatis yang akan melakukan hal yang hampir sama

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