[css+js]display:flex;で等間隔に並べつつ端数を左寄せする方法+レスポンシブ

記事一覧とかでブロック的な、横にいくつの並びをさせたい。
手っ取り早くリキッドレイアウトだからdisplay: flex;でjustify-content: space-between;したい。
でもこれだと記事の数がデザインで指定した列と同じになってないとspace-betweenのおかげで崩れる。
列の数に足りないときもそうならない(≒左寄せにしたい)時のやつ。

前提とする状態

例えばこんな感じでやってるとする。

cssで4列にしてるとこに要素は7個なので2行目は左右と中央に配置される。
この状態で、左詰めになるようにしたい。
ちなみに幅が420px以下のときは1列で縦並びにする。

やること

左詰めにするには枠と同じ数でliをきっちり詰めてやらんとどうしようもない。
phpなりjsなり、環境にあった方法で並びに足りない分を追加してやる。

コメントの通りで、4分割するデザインだからliの数を4で割って余りを出す。
4から余りを引いて、追加する数を出す。
forでliを生成する。
liにclassつけとけば、いらないときはdisplay:none;で非表示にする。

応用:リキッドレイアウトで4列→3列→1列に対応させる

cssで表示個数を切り替えられるようにclassを付与する。
4列で追加が必要なのは1~3個、3列だと1~2個。
ifで小分けにしてそれぞれ必要分を作る。
更に応用すれば何段階にでも分けられる。

まとめ

wpで必要になったからphpでやろっかなとも思ったけど、汎用性考えたらjsでとりあえずやれるようになればいいかみたいな感じで。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする