頭脳一式 
要素の位置を左、右、中央のように水平方向に指定したい場合はjustify-contentを使用します。
justify-contentはフレックスボックスだけでなくグリッドレイアウトにも使用できます。目次
左揃えにする：justify-content:flex-start
justify-content:flex-startを指定すると左揃えにできます。
display:flex;justify-content:flex-start;
See the Pen
justify-content1 by shiakisudev (@shiakisu)
on CodePen.
HTML
<div id="container1">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
CSS
#container1{
display:flex;
justify-content:flex-start;
height:50px;
width:180px;
border: 1px black solid;
}
#container1 > div{
height:30px;
width:30px;
box-sizing:border-box;
border: 1px black solid;
background-color:lime;
}
右揃えにする：justify-content:flex-end
justify-content:flex-endを指定すると右揃えにできます。
display:flex;justify-content:flex-end;
See the Pen
by shiakisudev (@shiakisu)
on CodePen.
HTML
<div id="container2">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
CSS
#container2{
display:flex;
justify-content:flex-end;
height:50px;
width:180px;
border: 1px black solid;
}
#container2 > div{
height:30px;
width:30px;
box-sizing:border-box;
border: 1px black solid;
background-color:lime;
}
中央揃えにする：justify-content:center
justify-content:centerを指定すると中央揃えにできます。
display:flex;justify-content:center;
See the Pen
justify-content3 by shiakisudev (@shiakisu)
on CodePen.
HTML
<div id="container3">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
CSS
#container3{
display:flex;
justify-content:center;
height:50px;
width:180px;
border: 1px black solid;
}
#container3 > div{
height:30px;
width:30px;
box-sizing:border-box;
border: 1px black solid;
background-color:lime;
}
両端揃えにする：justify-content:space-between
justify-content:space-betweenを指定すると両端揃えにできます。
間にある要素は、間隔を開けて均等揃えになります。
display:flex;justify-content:space-between;
See the Pen
justify-content4 by shiakisudev (@shiakisu)
on CodePen.
HTML
<div id="container4">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
CSS
#container4{
display:flex;
justify-content:space-between;
height:50px;
width:180px;
border: 1px black solid;
}
#container4 > div{
height:30px;
width:30px;
box-sizing:border-box;
border: 1px black solid;
background-color:lime;
}
均等揃えにする（両端の要素の間隔は半分）：justify-content:space-around
justify-content:space-aroundを指定すると最初と最後の要素も含めて均等揃えになります。
このとき、両端の間隔の大きさは、残りの要素の間隔の大きさの半分になります。
display:flex;justify-content:space-around;
See the Pen
ustify-content5 by shiakisudev (@shiakisu)
on CodePen.
HTML
<div id="container5">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
CSS
#container5{
display:flex;
justify-content:space-around;
height:50px;
width:180px;
border: 1px black solid;
}
#container5 > div{
height:30px;
width:30px;
box-sizing:border-box;
border: 1px black solid;
background-color:lime;
}
均等揃えにする（間隔も均等）：justify-content:space-evenly
justify-content:space-evenlyを指定すると間隔の大きさも均等に、均等揃えになります。
See the Pen
justify-content6 by shiakisudev (@shiakisu)
on CodePen.
HTML
<div id="container6">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
CSS
#container6{
display:flex;
justify-content:space-evenly;
height:50px;
width:180px;
border: 1px black solid;
}
#container6 > div{
height:30px;
width:30px;
box-sizing:border-box;
border: 1px black solid;
background-color:lime;
}
まとめ
See the Pen
justify-content-all by shiakisudev (@shiakisu)
on CodePen.
