flexboxで比率を維持したままレスポンシブに拡大縮小可能な横並びレイアウトを作ってみよう

一覧ページやギャラリーページでflexboxを用い、要素を均一に横並びさせたい。。
カラム落ちせず比率を維持したまま、レスポンシブに対応できるようにしたい。
要素を等間隔に空けたい。。

このような疑問に答えます！

本記事では、flexboxを用いてカラム落ちせず横並び・比率を維持したまま、レスポンシブに対応させる方法について解説します。

まずは以下ソースをコピペして動作を確認しよう

上記ソースにhtml、cssで例を書きました。
flexboxという要素に対してその子要素が横並び3列を維持したまま拡大縮小できるようになってます。
親要素はそのままコピペしてもらって子要素のflex: 0 0 32%;の32の部分を変更することで3列、4列、5列…などに列変更できます。
（今回の例だと3列なので100÷3=33.333333% 要素の間を少し空けたいので32%にしてます。）

以下コードペンデモです。

See the Pen フレックスボックス by Kohei (@kouk05) on CodePen.default

先ほどのソースにプラスしてボタンをつけてます。
フレックスボックスを縮小していくと段ズレが発生して見映えが悪くなる場合があります。
その場合の解消方法ですが
親要素にflex-direction: column;を追加
子要素にheightを指定。
子要素内の一番最後の要素（今回の場合はボタン）にmargin-top: auto;を追加
　以上で段ズレ解消です！
※子要素の高さを指定しましたがその高さを超えてしまうとはみ出してしまうのでブレイクポイントなどで調整しましょう！