Flexboxの子要素の高さがCSSで垂直方向に伸びないようにする方法

フレックスボックスがあるとします 内部にボタンが付いたコンテナ：

<div class="container">
  <button class="button">Button</button>
</div>

ボタン（子要素）をjustify-contentと水平方向に中央揃えしようとする場合 このようなプロパティ：

.container {
  height: 300px;
  display: flex;
  justify-content: center;
}

次に、ボタン（子要素）の高さは、親要素の高さ（この場合は300px）に合わせて拡張されます。 ）：

これはおそらくあなたが望むものではありません！

フレックスアイテムを防ぐには、いくつかの方法があります。 （フレックスコンテナの子供）垂直に伸びないようにします。

フレックスアイテムをalign-itemsで垂直方向に中央揃えにする場合 プロパティ、ストレッチは自動的に消えます：

.container {
  height: 300px;
  display: flex;
  justify-content: center;

  /*Vertical center alignment:*/
  align-items: center;
}

しかし、フレックスコンテナのフレックスアイテムを垂直に配置したくない場合はどうなりますか？

次に、CSSのheightを使用できます プロパティのmax-content フレックスアイテムの値：

.button {
  height: max-content;
}

これで、フレックスアイテムの高さは、コンテンツの高さによって決まります。このボタンの例では、テキストは14px（+ボタンのデフォルトのパディング）です：

align-selfを使用することもできます フレックスアイテムのプロパティ：

.button {
  align-self: flex-start;
}

これにより、max-contentを使用した場合と同じ結果が得られます。 単純なユースケースですが、特定のコンテキストによって異なります（両方を試してください）。