Written by Kasumi

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;を追加
 以上で段ズレ解消です!
※子要素の高さを指定しましたがその高さを超えてしまうとはみ出してしまうのでブレイクポイントなどで調整しましょう!

目次

関連記事

HTMLCSS

CSSで全ての同一要素に同じプロパティを適用する方法

2023.04.28
745
HTMLCSS プログラミング

【簡単CSS】ある要素位置までスクロールしたらその要素を固定する方法【JavaScript不要】

2022.03.27
17009
HTMLCSS

CSSで要素が空かどうか判別。任意のスタイルを適用する方法

2023.04.16
1738
HTMLCSS

CSSだけで行数を指定。三点リーダーを表示する方法

2023.04.18
752