web-dev-qa-db-ja.com

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

私はコンテナ<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

htmlcsscss3flexbox
91
Don P

コンテナには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-items: flex-start（すべてのflexアイテムに継承される）またはアイテムのalign-self: flex-start（単一のアイテムに限定されている）を使用してデフォルトをオーバーライドできます。

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

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

166
Michael_B