☰

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

tag-icon • tag-icon html css flexbox
フレックスアイテムが親コンテナの幅ではなくコンテンツの幅を取るようにする 質問する

<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

ベストアンサー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子要素の幅を可能な限り拡張しています。 (設定が が機能しないcolumn理由でもあります。)display: inline-flex

align-items: flex-startコンテナー (すべてのフレックス アイテムに継承されます) またはalign-self: flex-startアイテム (単一のアイテムに限定されます) を使用してデフォルトをオーバーライドできます。

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

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

おすすめ記事