ZeroPlus Media > Web制作 > HTML/CSS > 【CSS】align-itemsの使い方を解説！flexアイテムの高さを揃える方法

【CSS】align-itemsの使い方を解説！flexアイテムの高さを揃える方法

HTML/CSS

2022/04/11

2025/12/24

画像やテキストを横並びにするとき、display: flex;を指定することが多くあります。そのとき、「画像の並び方を整えたい」「要素を上下の中央に配置したい」と思うことはありませんか？

このような実装を行うには、align-items プロパティを使用します。align-items はflexアイテムの上下の配置を指定することができるプロパティです。要素の配置を統一すればレイアウトが見やすくなります。

この記事では align-items の使い方を解説します。align-items はdisplay: flex;を使用するうえで欠かせないプロパティなので、しっかり学習しておきましょう。

この記事で身につく内容

align-itemsとは
align-itemsの使い方

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

ZeroPlus Gateの詳細を見る

align-itemsとは
align-itemsの使い方
実務でalign-itemsプロパティを使うケース
- アイコンとテキストを上下中央に揃えるとき
- カードレイアウトで画像とテキストを揃えたいとき
まとめ

align-itemsとは

align-items は、flexアイテムを縦軸で見たときに「上下のどこで揃えるか」を指定するプロパティです。具体的には上揃え・中央揃え・下揃えなどができます。

flexアイテムに対して有効なプロパティであるため、display: flex;と併用して親要素に記述します。

align-itemsの使い方

align-items は、flexアイテムに対して有効なプロパティであるため、display: flex;と一緒に親要素（flexコンテナ）に指定します。

以下がCSSの基本形です。

.flexbox {
  display: flex;
  align-items: 値;
}

align-items には、以下の値を指定します。

align-itemsの値

flex-start：子要素を上部で揃える
flex-end：子要素を下部で揃える
center：子要素を中央で揃える
baseline：子要素をテキストの下部（ベースライン）で揃える
stretch / normal：親要素の高さに合わせて子要素を伸縮する

flex-start：上揃え

align-items: flex-start;は、子要素を上部で揃える指定です。

例として子要素の高さをバラバラに指定します。

HTMLの記述

<div class="flexbox">
  <div class="flex-item item01"></div>
  <div class="flex-item item02"></div>
  <div class="flex-item item03"></div>
  <div class="flex-item item04"></div>
  <div class="flex-item item05"></div>
</div>

CSSの記述

.flexbox {
  display: flex;
  align-items: flex-start;/*子要素を上部で揃える指定*/
  height: 150px;
  border: 1px solid #000;
}

.flex-item {
  background: orange;
  border: 1px solid #000;
  width: 30px;
}

.item01 {
  height: 30px;
}

.item02 {
  height: 60px;
}

.item03 {
  height: 20px;
}

.item04 {
  height: 10px;
}

.item05 {
  height: 100px;
}

出力結果

子要素が上揃えになっています。

flex-start は初期値であるため、align-items を指定しない場合にもこの値が適応されます。

flex-end：下揃え

align-items: flex-end;は、子要素を下部で揃える指定です。

HTMLの記述

<div class="flexbox">
  <div class="flex-item item01">①</div>
  <div class="flex-item item02">②</div>
  <div class="flex-item item03">③</div>
  <div class="flex-item item04">④</div>
  <div class="flex-item item05">⑤</div>
</div>

CSSの記述

.flexbox {
  display: flex;
  align-items: flex-end;
  height: 150px;
  border: 1px solid #000;
}
 
.flex-item {
  background: orange;
  border: 1px solid #000;
  width: 30px;
}

.item01 {
  height: 30px;
}

.item02 {
  height: 60px;
}

.item03 {
  height: 20px;
}

.item04 {
  height: 10px;
}

.item05 {
  height: 100px;
}

出力結果

子要素（flexアイテム）が親要素（flexコンテナ）の中で下揃えになっています。

center：上下中央揃え

align-items: center;は、子要素を上下中央で揃える指定です。

HTMLの記述

<div class="flexbox">
  <div class="flex-item item01">①</div>
  <div class="flex-item item02">②</div>
  <div class="flex-item item03">③</div>
  <div class="flex-item item04">④</div>
  <div class="flex-item item05">⑤</div>
</div>

CSSの記述

.flexbox {
  display: flex;
  align-items: flex-end;
  height: 150px;
  border: 1px solid #000;
}
 
.flex-item {
  background: orange;
  border: 1px solid #000;
  width: 30px;
}

.item01 {
  height: 30px;
}

.item02 {
  height: 60px;
}

.item03 {
  height: 20px;
}

.item04 {
  height: 10px;
}

.item05 {
  height: 100px;
}

出力結果

子要素（flexアイテム）が親要素（flexコンテナ）の中で中央揃えになっています。

baseline：テキストの下部で揃える

align-items: baseline;は、子要素をベースライン（テキストの下部）を基準として配置する指定です。例として子要素にテキストを記述して表示します。加えて、分かりやすくするために font-size を指定します。

HTMLの記述

<div class="flexbox">
  <div class="flex-item item01">①</div>
  <div class="flex-item item02">②</div>
  <div class="flex-item item03">③</div>
  <div class="flex-item item04">④</div>
  <div class="flex-item item05">⑤</div>
</div>

CSSの記述

.flexbox {
  display: flex;
  /*追加*/
  align-items: baseline;/*子要素をテキストの下部で揃える指定*/
  height: 150px;
  border: 1px solid #000;
}

.flex-item {
  background: orange;
  border: 1px solid #000;
  width: 30px;
}
.item01 {
  height: 30px;
}

.item02 {
  height: 60px;
}

.item03 {
  height: 20px;
}

.item04 {
  height: 10px;
}

.item05 {
  height: 100px;
}

出力結果

一列に並んだ文字（①〜⑤）に合わせて、子要素（flexアイテム）が配置されるようになりました。

stretch / normal：要素の伸縮

align-items: stretch;もしくはalign-items: normal;は、親要素の高さに合わせて子要素の高さを伸縮する指定です。

例として親要素の高さを150pxと指定します。

HTMLの記述

<div class="flexbox">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

CSSの記述

.flexbox {
  display: flex;
  height: 150px;/*高さを150pxに指定*/
  align-items: stretch;/*子要素の高さが伸縮する指定*/
}

.flex-item {
  background: orange;
  border: 1px solid #000;
  width: 30px;
}

出力結果

子要素（flexアイテム）には height を指定していませんが、親要素（flexコンテナ）の高さに合わせて子要素の高さが変化しています。

実務でalign-itemsプロパティを使うケース

align-itemsプロパティを実務で使うケースについて紹介します。

アイコンとテキストを上下中央に揃えるとき

アイコンとテキストを横並びに配置したとき、文字サイズやアイコンサイズによって縦位置がずれることがあります。

その際にalign-item: center; を適用してアイコンとテキストを上下中央に揃えることができます。

<div class="container">
    <p>align-items: center; で上下中央寄せ</p>
    <div class="category">
      <span class="category__item center">
        <span class="category__icon"></span>
        カテゴリー
      </span>
      <span class="category__item center">
        <span class="category__icon"></span>
        カテゴリーカテゴリー
      </span>
      <span class="category__item center">
        <span class="category__icon"></span>
        カテゴリー
      </span>
    </div>
    <p>align-items: center; 指定なし</p>
    <div class="category">
      <span class="category__item">
        <span class="category__icon"></span>
        カテゴリー
      </span>
      <span class="category__item">
        <span class="category__icon"></span>
        カテゴリーカテゴリー
      </span>
      <span class="category__item">
        <span class="category__icon"></span>
        カテゴリー
      </span>
    </div>
  </div>

.category {
    display: flex;
    gap: 20px;
    margin-top: 10px;
    margin-bottom: 40px;
}
.category__item {
    position: relative;
    display: flex;
    gap: 5px;
    line-height: 1.6;
    border: 1px solid #ccc;
}

.center {
    align-items: center;
}

.category__icon {
    width: 5px;
    height: 5px;
    background-color: orange;
    border-radius: 50%;
    display: block;
}
/* レイアウト調整 */
.container {
    padding: 40px;
}

以下のように拡大してみると、オレンジ色のアイコンとテキストがそれぞれ上下中央配置になっていることがわかります。

カードレイアウトで画像とテキストを揃えたいとき

カードレイアウトで画像とテキストを横並び配置にする場合、画像とテキストを上端で揃えたいときに使用します。

<div class="container">
    <p class="text">上端に揃える <span>align-items: flex-start;</span></p>
    <div class="cardList">
      <div class="cardList__item">
        <div class="card start">
          <div class="card__img"></div>
          <div class="card__textBox">
            <h2>見出し</h2>
            <p>テキストテキストテキストテキストテキストテキスト</p>
          </div>
        </div>
      </div>
      <div class="cardList__item">
        <div class="card start">
          <div class="card__img"></div>
          <div class="card__textBox">
            <h2>見出し</h2>
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
          </div>
        </div>
      </div>
    </div>
    <p class="text">上下中央に揃える <span>align-items: center;</span></p>
    <div class="cardList">
      <div class="cardList__item">
        <div class="card center">
          <div class="card__img"></div>
          <div class="card__textBox">
            <h2>見出し</h2>
            <p>テキストテキストテキストテキストテキストテキスト</p>
          </div>
        </div>
      </div>
      <div class="cardList__item">
        <div class="card center">
          <div class="card__img"></div>
          <div class="card__textBox">
            <h2>見出し</h2>
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
          </div>
        </div>
      </div>
    </div>
    <p class="text">下端に揃える <span>align-items: flex-end;</span></p>
    <div class="cardList">
      <div class="cardList__item">
        <div class="card end">
          <div class="card__img"></div>
          <div class="card__textBox">
            <h2>見出し</h2>
            <p>テキストテキストテキストテキストテキストテキスト</p>
          </div>
        </div>
      </div>
      <div class="cardList__item">
        <div class="card end">
          <div class="card__img"></div>
          <div class="card__textBox">
            <h2>見出し</h2>
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
          </div>
        </div>
      </div>
    </div>
  </div>

.cardList {
    display: flex;
    gap: 20px;
    margin-top: 10px;
    margin-bottom: 40px;
    justify-content: center;
}
.cardList__item {
    max-width: 200px;
}
.card {
    border: 1px solid #000;
    padding: 10px;
    display: flex;
    column-gap: 10px;
    height: 100%;
}


.start {
    align-items: flex-start;
}


.center {
    align-items: center;
}
.end {
    align-items: flex-end;
}


.card__img {
    background-color: orange;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}
.card__textBox {
    font-size: 14px;
}
/* レイアウト調整 */
.container {
    padding: 100px;
}


.text {
    font-size: 24px;
    text-align: center;
}
.text span {
    color: red;
}