Flexboxで子要素が縦に伸びるのを防ぐ方法|CSSで高さのストレッチを解消する3つのテクニック

Flexboxコンテナの中にボタンが入っているケースを考えてみましょう。

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

このボタン(子要素)を、justify-contentプロパティを使って水平方向に中央揃えしてみます。

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

すると、ボタンの高さが親要素の高さ(この場合は300px)いっぱいに引き伸ばされてしまいます。

これはおそらく意図した動作ではないはずです。

Flexコンテナの子要素(Flexアイテム)が垂直方向に引き伸ばされるのを防ぐには、いくつかの方法があります。それぞれ詳しく見ていきましょう。

方法1: align-itemsで中央揃えする

align-itemsプロパティを使ってFlexアイテムを垂直方向に中央揃えすると、ストレッチは自動的に解除されます。

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

  /* 垂直方向の中央揃え */
  align-items: center;
}

ただし、この方法は「Flexアイテムを垂直方向に中央揃えしたい場合」にしか使えません。中央揃え以外の配置にしたいときは、次の方法を検討しましょう。

方法2: height: max-content を指定する

Flexアイテムを垂直方向に中央揃えしたくない場合は、Flexアイテム側のCSSでheightプロパティにmax-contentという値を指定します。

.button {
  height: max-content;
}

これにより、Flexアイテムの高さはそのコンテンツによって決まるようになります。このボタンの例ではテキストがコンテンツにあたるため、文字サイズ14px(+ボタンのデフォルトのパディング)が高さとなります。

方法3: align-self を使う

もうひとつの方法として、Flexアイテム側にalign-selfプロパティを指定することもできます。

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

シンプルなユースケースであれば、max-contentを使った場合と同じ結果が得られます。ただし、どちらの方法が適切かは具体的な状況によって異なるため、両方試して比較してみるのがおすすめです。