フレックスアイテムを親コンテナの幅ではなくコンテンツの幅にする

Question

私はコンテナ<div>とdisplay: flexを持っています。それは子供が<a>です。

子供を「インライン」に見えるようにするにはどうすればよいですか？

具体的には、子の幅を内容で決めることができますが、親の幅まで拡大することはできません。私が試した何

：

私はdisplay: inline-flexに子を設定し、それはまだ完全な幅を取り上げました。他のすべての表示プロパティも試しましたが、何も効果がありませんでした。

例：

.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

利用フレックス項目のコンテナ上align-items: flex-start、またはalign-self: flex-start。

display: inline-flexの必要はありません。

---

フレックスコンテナの初期設定はalign-items: stretchです。これは、可撓性のアイテムが、交差軸に沿って容器の全長をカバーするように拡張することを意味する。そのalign-selfがフレックスのアイテムに適用される以外align-itemsがフレックスコンテナに適用されながら

align-selfプロパティは、align-itemsと同じことを行います。

デフォルトでは、align-selfはalign-itemsの値を継承します。

コンテナはflex-direction: columnなので、横軸は水平で、align-items: stretchはできるだけ子要素の幅を広げています。

コンテナ（すべてのフレックスアイテムに継承されています）またはalign-self: flex-start（単一アイテムに限定されています）のデフォルト値をalign-items: flex-startで上書きできます。

：ここ 主軸に沿ってフレックスアライメント詳細については、こちらをご覧ください
• How does flex-wrap work with align-self, align-items and align-content?

：

---

はここクロス軸に沿ってフレックスアライメント詳細については、こちらをご覧ください

• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?