【8/27まで】Udemyの人気コースが今なら1,200円から!!

【Flexbox】align-itemsの使い方

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

要素の位置を上、下、中央のように垂直方向に指定したい場合は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;
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です