先生と生徒の会話形式で理解しよう

生徒

「先生、Flexboxでボックスを縦方向に揃えたいときはどうしたらいいですか？」

先生

「その場合はalign-itemsというプロパティを使います。横方向を揃えるjustify-contentと似ていますが、こちらは縦方向を整列させるためのものです。」

生徒

「縦方向って、上下のことですよね？例えばボタンを上下中央に揃えたい場合に使えますか？」

先生

「はい、その通りです。縦方向の揃え方を覚えると、Flexboxでのレイアウト調整がとても簡単になります。」

1. align-itemsとは何か？

align-itemsは、Flexboxでフレックスコンテナ内の子要素を縦方向に整列させるためのCSSプロパティです。例えば、カードやボタンの高さが異なる場合でも、上揃えや下揃え、中央揃えなどを簡単に設定できます。縦方向に揃えるので、画面の高さやコンテナの高さが変わっても見た目が崩れにくくなります。

2. align-itemsの基本的な値

align-itemsには主に次の値があります。

flex-start：上端に揃える
flex-end：下端に揃える
center：中央に揃える
baseline：テキストの基準線に揃える
stretch：子要素の高さを自動で引き伸ばして揃える（初期値）

これらの値を使い分けることで、縦方向の整列を自由に調整できます。

3. align-itemsで中央揃えにする方法

縦方向の中央揃えを行いたいときは、align-itemsにcenterを指定します。


<style>
.center-vertical {
    display: flex;
    align-items: center; /* 縦方向中央揃え */
    justify-content: center; /* 横方向も中央揃え */
    height: 150px;
    background-color: #f0f0f0;
}
.box {
    width: 50px;
    height: 50px;
    background-color: #3498db;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}
</style>

<div class="center-vertical">
    <div class="box">A</div>
    <div class="box">B</div>
    <div class="box">C</div>
</div>

ブラウザ表示

このように、子要素がコンテナの縦方向中央に揃います。

4. 上端・下端に揃える方法

上端に揃えたい場合はflex-start、下端に揃えたい場合はflex-endを指定します。画面上部や下部に要素を整列させたいときに便利です。


<style>
.edge-vertical {
    display: flex;
    align-items: flex-end; /* 下端揃え */
    justify-content: space-around; /* 横方向の間隔も調整 */
    height: 150px;
    background-color: #f7f7f7;
}
.edge-box {
    width: 50px;
    height: 50px;
    background-color: #e67e22;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>

<div class="edge-vertical">
    <div class="edge-box">A</div>
    <div class="edge-box">B</div>
    <div class="edge-box">C</div>
</div>

ブラウザ表示

flex-startを指定すれば上端揃えになり、flex-endで下端揃えになります。

5. stretchとbaselineの使い方

stretchは子要素の高さを自動で引き伸ばして揃える初期値です。カードやボックスの高さを揃えたいときに便利です。baselineはテキストの基準線を揃える方法で、文章やラベルの整列に役立ちます。


<style>
.stretch-vertical {
    display: flex;
    align-items: stretch; /* 高さを自動で揃える */
    justify-content: space-between;
    height: 150px;
    background-color: #ecf0f1;
}
.stretch-box {
    width: 50px;
    background-color: #1abc9c;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>

<div class="stretch-vertical">
    <div class="stretch-box">A</div>
    <div class="stretch-box">B</div>
    <div class="stretch-box">C</div>
</div>

ブラウザ表示

このように、align-itemsの値を変えるだけで縦方向の配置を柔軟に操作できます。

6. align-itemsを覚えるコツ

初心者はまず、中央揃えcenter、上端揃えflex-start、下端揃えflex-end、stretchの4つを覚えると便利です。Flexboxは画面サイズに応じて自動で整列できるので、ナビゲーションやカードレイアウトの縦方向調整が簡単にできます。慣れてきたらbaselineも活用して、テキストやラベルの整列を整えるとより見やすいデザインが作れます。