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

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

2022/04/11

2024/06/26

画像やテキストを横並びにするとき、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 は、flexアイテムを縦軸で見たときに「上下のどこで揃えるか」を指定するプロパティです。具体的には上揃え・中央揃え・下揃えなどができます。

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

align-itemsの使い方

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

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;
}

出力結果