今回の記事ではflex-boxで横並びにした子要素の間隔の空け方について紹介いたします。

前回の記事では均等に余白を空けるやり方を紹介しました。

今回の記事は均等に余白を空けて、両端にも余白を空けるやり方を紹介します。

まずは何も指定していない通常の状態を見ていきます。

display:flex;で横並

何も指定していない状態だと左寄せで余白がない状態です。

やり方

親要素の対してdisplay;flex;で横並びにします。

その親要素に対して、justify-content: space-around;と指定します。

すると・・・

子要素同士の間隔は均等に広がり、左右の余白も空けることができます。