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

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

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アイテム（単一のアイテムに限定されます）で、デフォルトを上書きできます。

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

• flex-wrapはalign-self、align-items、align-contentとどのように連携しますか？

主軸に沿ったフレックス配置の詳細については、こちらをご覧ください：

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

addtionでalign-selfあなたも、ほぼ同じことを行います自動マージンを考慮することができます

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