display:flexを使えば要素の配置を自在にカスタマイズできます。
いろいろな並べ方をサンプル付きで解説していきますので、是非使い方を覚えていきましょう。
フレックスボックスとは
フレックスボックス（Flexbox）はCSSのレイアウト機能の一つです。
要素の並べ方や配置を自由に調整できるため、柔軟性が高いレイアウトを実現できます。
今回はこちらのソースにスタイルを適用して色々な並べ方を紹介していきます。
スタイルを適用したサンプルと一緒に紹介するので是非参考にしてみてください。
配置に関するスタイルを何も適用していないので、縦並びに配置された状態です。
See the Pen display-flex-sample1 by Usagi (@naniwa_usagi) on CodePen.
display:flexの使い方
display:flex
まずはdisplay:flex;を適用しましょう。
こうすることでフレックスボックスが作られて、縦に並んでいた要素が横並びになります。
float: left;と違い、親要素に１か所適用するだけで済みます。
See the Pen display-flex-sample2 by Usagi (@naniwa_usagi) on CodePen.
justify-content: space-between;
justify-contentは横方向の配置を指定します。
フレックスボックスにjustify-content: space-between;を適用すると子要素が親要素の幅に対して均等の間隔で配置されます。
See the Pen display-flex-sample3 by Usagi (@naniwa_usagi) on CodePen.
justify-content: flex-end;
justify-content: flex-end;は右寄せの配置になります。
See the Pen display-flex-sample4 by Usagi (@naniwa_usagi) on CodePen.
justify-content: center;
justify-content: center;は中央配置になります。
See the Pen Untitled by Usagi (@naniwa_usagi) on CodePen.
align-items: flex-end;
align-itemsは縦方向の配置を指定します。
たとえば、align-items: flex-end;は親要素の底に合わせて配置されます。
反対にalign-items: flex-start;は親要素の頂点に合わせて配置されます。
See the Pen display-flex-sample5 by Usagi (@naniwa_usagi) on CodePen.
align-items: center;
align-items: center;を設定すると縦方向の中央位置に配置されます。
See the Pen display-flex-sample7 by Usagi (@naniwa_usagi) on CodePen.
まとめ
フレックスボックスはCSSSプロパティを指定するだけで簡単に適用できるため、複数人での開発においても可読性が高くメンテもしやすいです。
是非使い方を覚えて開発に役立ててください。
