justify-content、align-contentを使ってフレックスアイテムの位置を調整する【CSS】
フレックスアイテム（Flexboxまたはdisplay:flex;などで横並びにした要素）の位置を調整する方法を紹介します。
【justify-content】横方向に位置を指定する
justify-contentはフレックスアイテム（Flexboxまたはdisplay:flex;などで横並びにした要素）の主軸方向の位置を横方向に指定します。
justify-content: flex-start;（初期値。行頭揃え。通常は左揃え。）
justify-content: flex-end;（行末揃え。通常は右揃え。）
justify-content: center;（中央揃え。）
【align-content】縦方向に位置を指定する
align-contentはフレックスアイテム（Flexboxまたはdisplay:flex;などで横並びにした要素）の主軸方向の位置を縦方向に指定します。
align-content: stretch;（初期値。フレックスアイテムが伸ばされて揃えられる。）
align-content: flex-end;（終了位置揃え。通常は下端揃え。）
align-content: center;（中央揃え。）
まとめ
justify-content、align-contentはフレックスアイテム（Flexboxまたはdisplay:flex;などで横並びにした要素）の位置を調整するプロパティです。
margin:auto;などを設定するよりも簡単にアイテムの縦横中央揃えや、等間隔配置が実現できるのでぜひ使用してみてください。