【CSS】flex-stretchを理解して、要素をスマートに揃えよう！

はじめに
flex-stretchの概要
- Flexboxの基本
- align-items: stretch とは？
どういうところで使うのか？
- 実用例1：高さを揃えたいカードレイアウト
- 実用例2：ボタンやメニューを均等な高さに
注意点
終わりに

はじめに

CSSでレスポンシブなレイアウトを実装するうえで、Flexboxは非常に強力なツールです。
特に最近では、Web制作において「display: flex」はもはや当たり前のように使われていますよね。

そのFlexboxのプロパティの一つに「align-items」がありますが、その初期値である stretch（flex-stretch）については意外と深く理解されていないことが多いです。

この記事では、「flex-stretch」ってそもそも何？という疑問から、どういうときに便利なのか、実際の活用例までを解説します。

Flexboxを使いこなすための第一歩として、「stretch」の特性をしっかりと押さえておきましょう！

flex-stretchの概要

Flexboxの基本

まず、Flexboxの基本的な仕組みをおさらいしておきましょう。

CSS

.container {
  display: flex;
}

上記のように display: flex を指定すると、その子要素たちは「flexアイテム」として並びます。
このとき、子要素（アイテム）同士をどのように揃えるかを制御するのが、以下の2つのプロパティです。

justify-content：主軸（通常は横）の揃え方
align-items：交差軸（通常は縦）の揃え方

この中で、今回注目するのが align-items: stretch; です。

`align-items: stretch` とは？

align-items: stretch; は、親要素の高さに合わせて、子要素（flexアイテム）の高さを自動で引き伸ばす動作をします。

CSS

.container {
  display: flex;
  align-items: stretch;
}

これは align-items の初期値（デフォルト値）でもあり、特別に指定しなくても適用されています。

どういうところで使うのか？

実用例1：高さを揃えたいカードレイアウト

よくあるのが、3列のカードレイアウトで各要素の高さを揃えたいときです。

例えば以下のようなHTMLとCSSがあったとします。

HTML

<div class="card-container">
  <div class="card">カード1</div>
  <div class="card">カード2（中のテキストが多い）</div>
  <div class="card">カード3</div>
</div>

CSS

.container {
  display: flex;
  align-items: stretch;
}

この状態では、テキストの量が多いカードだけ高さが伸びて、他のカードはそのままです。
ここで align-items: stretch; を指定すると、全てのカードの高さが最も高いカードに合わせて引き伸ばされます。

つまり、視覚的に整った3列レイアウトを作ることができるわけです。

実用例2：ボタンやメニューを均等な高さに

ナビゲーションメニューやボタンの並びなどでも、要素の高さを揃えたいケースがあります。
特に、デザイン上「高さが揃っている」ことでUIの一体感が出ます。

以下のような例でも使えます。

CSS

.menu {
  display: flex;
  align-items: stretch;
}

.menu-item {
  flex: 1;
  padding: 10px;
}

こうすることで、メニューのテキスト量に関係なく、すべてのメニューが同じ高さになり、整った印象を与えられます。

注意点

ただし、flexアイテムに height を明示的に指定してしまうと、stretch の効果は無効になります。
つまり、stretchの効果は「高さを指定していないflexアイテム」にしか効かないことに注意が必要です。

CSS

.card {
  height: 200px; /* この指定があると stretch は効かなくなる */
}

また、align-items: stretch が効くのは「ブロック要素」的な性質を持ったアイテムに限ります。
インライン要素（例：span）には適用されないので注意しましょう。

終わりに

Flexboxは便利だけど、「細かい動作がよく分からない」ということ、ありますよね。
align-items: stretch; は、実は初期状態で効いているけれど、意識して使うと「整ったデザイン」「一体感のあるレイアウト」を作るのに非常に役立ちます。

特に、要素の高さをそろえたい場合は、わざわざJavaScriptで高さを揃えるような処理をせずとも、CSSだけで完結できるのが大きなメリットです。

「なんだかレイアウトがガタつくな…」というときは、ぜひ一度 align-items: stretch を疑ってみてください。

Flexboxをより深く理解して、効率的で美しいレイアウトを目指しましょう！