[解決済み】フレックスアイテムの幅を親コンテナの幅ではなく、コンテンツの幅にする。

質問

コンテナ <div> と display: flex . これは、子 <a> .

子プロセスを "inline"で表示するにはどうしたらよいですか？

具体的には、子の幅をコンテンツによって決定し、親の幅に拡大しないようにするにはどうしたらよいでしょうか。

試したこと

子プロセスを 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

解決方法は？

使用方法 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 をコンテナ上に置くか (これはすべてのフレックスアイテムに継承されます)、あるいは align-self: flex-start を指定します (これは単一のアイテムに限定されます)。

に沿ったフレックスアライメントについて詳しく説明します。 横軸 をご覧ください。

• align-self、align-items、align-contentでのflex-wrapの動作は？

フレックスアライメントについて、詳しくは 主軸 をご覧ください。

• CSS Flexbox には、なぜ "justify-items" と "justify-self" というプロパティがないのですか？