Categories: HTML&CSS

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

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

MEMO

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

要素を上揃えにする

要素を上揃えにするための大事なポイント
  • 親要素に以下を設定する。
    • 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がオススメ!同僚に差をつけよう!

issiki_wp