justify-contentプロパティは、コンテナ内全体の主軸方向(初期値では横方向)の揃え位置を指定する際に使用します。
align-contentプロパティの主軸方向(初期値では横方向)版と考えると理解しやすいでしょう。
尚、コンテナ内のアイテムの主軸方向や交差軸方向が横になるか縦になるかは、 flex-directionプロパティの値によって変化します。 詳しくは、「フレックスコンテナの主軸方向と交差軸方向」を参考にしてください。
W3Cのページに掲載されている以下の図が分かりやすいでしょう。
ul.sample_menu { display:-webkit-flex; display:flex; width:100%; background-color:#ffeeaa; list-style-type:none; margin:0; padding:0; } ul.sample_menu a { display:block; margin:2px; padding:10px; font-size:10px; background-color:#66cc99; color:#ffffff; text-align:center; text-decoration:none; }
<h5>justify-content:flex-start; を指定</h5> <ul class="sample_menu" style="justify-content:flex-start;"> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー4</a></li> </ul> <h5>justify-content:flex-end; を指定</h5> <ul class="sample_menu" style="justify-content:flex-end;"> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー4</a></li> </ul> <h5>justify-content:center; を指定</h5> <ul class="sample_menu" style="justify-content:center;"> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー4</a></li> </ul> <h5>justify-content:space-between; を指定</h5> <ul class="sample_menu" style="justify-content:space-between;"> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー4</a></li> </ul> <h5>justify-content:space-around; を指定</h5> <ul class="sample_menu" style="justify-content:space-around;"> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー4</a></li> </ul>