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

はじめに

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

そのFlexboxのプロパティの1つに「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をより深く理解して、効率的で美しいレイアウトを目指しましょう！