Categories: HTML&CSS

【Flexbox】親要素の位置を変えずに子要素を上下左右中央揃えにする

親要素の位置を変えずに子要素を上下左右中央揃えにするサンプルコードです。
justify-contentalign-itemsを用いて上下左右中央揃えを実現します。
justify-contentについては以下の記事を参照してください。


align-itemsについては以下の記事を参照してください。

子要素を左右上中央揃えしたい場合

子要素を左右上中央揃えにするための大事なポイント
  • 親要素に以下を設定する。
    • display:flex;
    • justify-content:center;
  • 子要素には何も設定しない。

See the Pen
child-margin-auto3
by shiakisudev (@shiakisu)
on CodePen.

CSS

.parent {
  height:300px;
  width: 300px;
  background-color:lime;
  display:flex; /* ここは子要素divの上下左右を決めるための指定*/
  justify-content: center; /* 水平方向の指定*/
}
.child {
  height:50px;
  width: 50px;
  border:solid 1px;
  background-color:pink;
}

複数の子要素が存在する場合

複数の子要素が存在する場合のレイアウトは以下のようになります。

See the Pen
flexbox-hukusu1
by shiakisudev (@shiakisu)
on CodePen.

複数の子要素を均等割り付けしたい場合1

複数の子要素を均等割り付けしたい場合は、justify-content:center;の代わりにjustify-content: space-around;を指定します。

See the Pen
child-kinto
by shiakisudev (@shiakisu)
on CodePen.

CSS

.parent {
  height:300px;
  width: 300px;
  background-color:lime;
  display:flex; /* ここは子要素divの上下左右を決めるための指定*/
  justify-content: space-around; /* 水平方向の指定*/
}
.child {
  height:50px;
  width: 50px;
  border:solid 1px;
  background-color:pink;
}

複数の子要素を均等割り付けしたい場合2

justify-content: space-around;の代わりにjustify-content: space-between;を指定する方法もあります。

See the Pen
space-between
by shiakisudev (@shiakisu)
on CodePen.

CSS

.parent {
  height:300px;
  width: 300px;
  background-color:lime;
  display:flex; /* ここは子要素divの上下左右を決めるための指定*/
  justify-content: space-between; /* 水平方向の指定*/
}
.child {
  height:50px;
  width: 50px;
  border:solid 1px;
  background-color:pink;
}

子要素を左右下中央揃えしたい場合

子要素を左右下中央揃えにするための大事なポイント
  • 親要素に以下を設定する。
    • display:flex;
    • justify-content:center;
    • align-items:flex-end;
  • 子要素には何も設定しない。

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

CSS

.parent {
  height:300px;
  width: 300px;
  background-color:lime;
  display:flex; /* ここは子要素divの上下左右を決めるための指定*/
  justify-content: center; /* 水平方向の指定*/
  align-items:flex-end; /* 垂直方向の指定*/
}
.child {
  height:50px;
  width: 50px;
  border:solid 1px;
  background-color:pink;
}

複数の子要素が存在する場合

複数の子要素が存在する場合のレイアウトは以下のようになります。

See the Pen
bottom-center-hukusu
by shiakisudev (@shiakisu)
on CodePen.

複数の子要素を均等割り付けしたい場合1

複数の子要素を均等割り付けしたい場合は、justify-content:center;の代わりにjustify-content: space-around;を指定します。

See the Pen
bottom-center-hukusu-around
by shiakisudev (@shiakisu)
on CodePen.

CSS

.parent {
  height:300px;
  width: 300px;
  background-color:lime;
  display:flex; /* ここは子要素divの上下左右を決めるための指定*/
  justify-content: space-around; /* 水平方向の指定*/
  align-items:flex-end; /* 垂直方向の指定*/
}
.child {
  height:50px;
  width: 50px;
  border:solid 1px;
  background-color:pink;
}

複数の子要素を均等割り付けしたい場合2

justify-content: space-around;の代わりにjustify-content: space-between;を指定する方法もあります。

See the Pen
bottom-center-between
by shiakisudev (@shiakisu)
on CodePen.

CSS

.parent {
  height:300px;
  width: 300px;
  background-color:lime;
  display:flex; /* ここは子要素divの上下左右を決めるための指定*/
  justify-content: space-between; /* 水平方向の指定*/
  align-items:flex-end; /* 垂直方向の指定*/
}
.child {
  height:50px;
  width: 50px;
  border:solid 1px;
  background-color:pink;
}

子要素を上下左中央揃えしたい場合

子要素を上下左中央揃えにするための大事なポイント
  • 親要素に以下を設定する。
    • display:flex;
    • align-items:center;
  • 子要素には何も設定しない。

See the Pen
child-margin-auto4
by shiakisudev (@shiakisu)
on CodePen.

CSS

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

}
.child {
  height:50px;
  width: 50px;
  border:solid 1px;
  background-color:pink;
}

複数の子要素が存在する場合

複数の子要素が存在する場合のレイアウトは以下のようになります。

See the Pen
flexbox-hukusu2
by shiakisudev (@shiakisu)
on CodePen.

子要素を上下右中央揃えしたい場合

子要素を上下右中央揃えにするための大事なポイント
  • 親要素に以下を設定する。
    • display:flex;
    • justify-content:flex-end;
    • align-items:center;
  • 子要素には何も設定しない。

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

CSS

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

}
.child {
  height:50px;
  width: 50px;
  border:solid 1px;
  background-color:pink;
}

複数の子要素が存在する場合

複数の子要素が存在する場合のレイアウトは以下のようになります。

See the Pen
right-center-hukusu
by shiakisudev (@shiakisu)
on CodePen.

子要素を上下左右中央揃えしたい場合

子要素を左右中央揃えにするための大事なポイント
  • 親要素に以下を設定する。
    • display:flex;
    • justify-content:center;
    • align-items: center;
  • 子要素には何も設定しない。

See the Pen
child-margin-auto5
by shiakisudev (@shiakisu)
on CodePen.

CSS

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

}
.child {
  height:50px;
  width: 50px;
  border:solid 1px;
  background-color:pink;
}

複数の子要素が存在する場合

複数の子要素が存在する場合のレイアウトは以下のようになります。

See the Pen
flexbox-hukusu3
by shiakisudev (@shiakisu)
on CodePen.

複数の子要素を均等割り付けしたい場合1

複数の子要素を均等割り付けしたい場合は、justify-content:center;の代わりにjustify-content: space-around;を指定します。

See the Pen
flexbox-kintou2
by shiakisudev (@shiakisu)
on CodePen.

CSS

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

}
.child {
  height:50px;
  width: 50px;
  border:solid 1px;
  background-color:pink;
}

複数の子要素を均等割り付けしたい場合2

justify-content:space-around;の代わりにjustify-content: space-between;を指定する方法もあります。

See the Pen
space-between-center
by shiakisudev (@shiakisu)
on CodePen.

CSS

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

}
.child {
  height:50px;
  width: 50px;
  border:solid 1px;
  background-color:pink;
}

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

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

issiki_wp