頭脳一式 
親要素の位置を変えずに子要素を上下左右中央揃えにするサンプルコードです。
justify-contentとalign-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がオススメ！同僚に差をつけよう！
