justify-contentとは

flexアイテムの配置を指定するプロパティで、左寄せ・右寄せ・中央寄せなど、アイテムの間の余白などを指定することができます。

また、justify-contentは、display:flex;で横並びにした要素の配置を指定するプロパティです。

web制作をしている時、横に並べた要素の間隔を均等に配置したりとか、要素を中央に寄せたりすることができます。

justify-contentには使い方が何種類かあるのですが今回はよく使うものでいうと

・flex-start（左寄せ）
・flex-end （右寄せ）
・center（中央寄せ）
・space-between（両端揃え）
・space-around（アイテムの両側に均等な余白をつける）

などになります。

具体的にどんな変化があるのか見ていきます。

まずboxを作っていきます。
HTMLは親要素である「content」というクラスのついたdivの中に子要素である「box」というクラスのついたdivが入っています。

<div class="content">
 <div class="box">1</div>
 <div class="box">2</div>
 <div class="box">3</div>
</div>

.content {
display:flex;
/* ここにjustify-contentを指定する */
}
.box {
background:lightskyblue;
width:300px;
height:300px;

}

display:flex;の下にjustify-contentを指定します。

justify-content の余白は、主軸方向につけられます。
主軸とは、flexアイテムが並ぶ向き（縦・横）のことを指します。

justify-content：flex-start；（左寄せ）を指定した場合

justify-content：flex-end；（右寄せ）を指定した場合

justify-content：center；（中央寄せ）を指定した場合

justify-content：space-between；（両端揃え）を指定した場合

justify-content：space-around；（アイテムの両側に均等な余白をつける）を
指定した場合

最後に

justify-contentはdisplay:flex;とセットで使われるので
justify-contentのコードを指定しているのに効いていないなと思ったら
display:flex;を指定しているか確認してみましょう。