【Flexbox】要素を垂直方向に揃える「align-items」の使い方

【CSS3】【Flexbox】align-itemsの使い方

要素の位置を上、下、中央のように垂直方向に指定したい場合はalign-itemsを使用します。

MEMO

align-items<はフレックスボックスだけでなくグリッドレイアウトにも使用できます。

要素を上揃えにする
要素を下揃えにする
要素を中央揃えにする
要素をテキストのベースライン揃えにする
要素ごとに位置をバラバラにする：align-self

目次へ

要素を上揃えにする

要素を上揃えにするための大事なポイント

親要素に以下を設定する。
- display:flex;
- align-items:flex-start;
子要素には何も設定しない。

See the Pen
align-flex-start by shiakisudev (@shiakisu)
on CodePen.

CSS

.parent {
  height:300px;
  width: 300px;
  background-color:lime;
  display:flex;/* ここは子要素divの上下左右を決めるための指定*/
  align-items: flex-start; /* 垂直方向の指定*/

}
.childA {
  height:50px;
  width: 50px;
  background-color:skyblue;
}
.childB {
  height:100px;
  width: 100px;
  background-color:yellow;
}
.childC {
  height:150px;
  width: 150px;
  background-color:pink;
}
.parent div {
    border:solid 1px;
}

要素を下揃えにする

要素を下揃えにするための大事なポイント

親要素に以下を設定する。
- display:flex;
- align-items:flex-end;
子要素には何も設定しない。

See the Pen
align-flex-end by shiakisudev (@shiakisu)
on CodePen.

CSS

.parent {
  height:300px;
  width: 300px;
  background-color:lime;
  display:flex;/* ここは子要素divの上下左右を決めるための指定*/
  align-items: flex-end; /* 垂直方向の指定*/

}
.childA {
  height:50px;
  width: 50px;
  background-color:skyblue;
}
.childB {
  height:100px;
  width: 100px;
  background-color:yellow;
}
.childC {
  height:150px;
  width: 150px;
  background-color:pink;
}
.parent div {
    border:solid 1px;
}

要素を中央揃えにする

要素を中央揃えにするための大事なポイント

親要素に以下を設定する。
- display:flex;
- align-items:center;
子要素には何も設定しない。

See the Pen
align-flex-center by shiakisudev (@shiakisu)
on CodePen.

CSS

.parent {
  height:300px;
  width: 300px;
  background-color:lime;
  display:flex;/* ここは子要素divの上下左右を決めるための指定*/
  align-items: center; /* 垂直方向の指定*/

}
.childA {
  height:50px;
  width: 50px;
  background-color:skyblue;
}
.childB {
  height:100px;
  width: 100px;
  background-color:yellow;
}
.childC {
  height:150px;
  width: 150px;
  background-color:pink;
}
.parent div {
    border:solid 1px;
}

要素をテキストのベースライン揃えにする

使いどころ

各要素の文字のベースラインを基準に揃えることが出来ます。

要素をベースライン揃えにするための大事なポイント

親要素に以下を設定する。
- display:flex;
- align-items:baseline;
子要素には何も設定しない。

See the Pen
align-flex-baseline by shiakisudev (@shiakisu)
on CodePen.

CSS

.parent {
  height:300px;
  width: 300px;
  background-color:lime;
  display:flex;/* ここは子要素divの上下左右を決めるための指定*/
  align-items: baseline; /* 垂直方向の指定*/

}
.childA {
  height:50px;
  width: 50px;
  background-color:skyblue;
}
.childB {
  height:100px;
  width: 100px;
  font-size:2em;
  background-color:yellow;
}
.childC {
  height:150px;
  width: 150px;
  font-size:3em;
  background-color:pink;
}
.parent div {
    border:solid 1px;
}

要素ごとに位置をバラバラにする：`align-self`

要素の位置を個別にするための大事なポイント

親要素に以下を設定する。
- display:flex;
要素ごとに以下を設定する。
- align-self: 指定したい向き;

See the Pen
align-self by shiakisudev (@shiakisu)
on CodePen.

CSS

.parent {
  height:300px;
  width: 300px;
  background-color:lime;
  display:flex;/* ここは子要素divの上下左右を決めるための指定*/
}
.childA {
  height:50px;
  width: 50px;
  background-color:skyblue;
  align-self: flex-end; /* 垂直方向の指定*/
}
.childB {
  height:100px;
  width: 100px;
  background-color:yellow;
  align-self: center; /* 垂直方向の指定*/
}
.childC {
  height:150px;
  width: 150px;
  background-color:pink;
  align-self: flex-end; /* 垂直方向の指定*/
}
.parent div {
    border:solid 1px;
}

以上で記事の解説はお終い！

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！

【Udemy厳選】2023年HTML、CSS、JavaScriptで人気のオススメ動画コース13選

issiki_wp