要素の位置【flex-box】

今回の記事では横並びにした子要素の表示される位置の変え方について紹介いたします。

やり方

display:flex;で指定した親要素に対して

justify-conten: ○○;と指定します。

〇〇の位置に値を入れます。

justify-conten: flex-start;

こちらは左寄せ（初期値）になります。

何も指定しなくても、この表示になります。

justify-conten: center;

こちらは中央寄せになります。

justify-conten: flex-end;

これで右寄せになります。

他にも子要素同士の間隔を空けて表示する指定のやり方や、子要素同士の間隔も開けながら両端の間隔も空ける指定もするやり方もあります。