【Flexbox】親要素の位置を変えずに子要素を上下左右中央揃えにする
親要素の位置を変えずに子要素を上下左右中央揃えにするサンプルコードです。
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.
複数の子要素を均等割り付けしたい場合は、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;
}
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.
複数の子要素を均等割り付けしたい場合は、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;
}
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.
複数の子要素を均等割り付けしたい場合は、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;
}
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がオススメ！同僚に差をつけよう！