PC横並び→SP縦積み
PC横並びからSP縦積みは、広い画面では3つの要素を横一列に並べ、狭い画面では縦に積み替えるレスポンシブの基本形です。親に display:flex と gap を与え、子要素に flex:1 を指定して均等幅で横並びにし、メディアクエリの max-width:600px で flex-direction:colu…
解説
PC横並びからSP縦積みは、広い画面では3つの要素を横一列に並べ、狭い画面では縦に積み替えるレスポンシブの基本形です。親に display:flex と gap を与え、子要素に flex:1 を指定して均等幅で横並びにし、メディアクエリの max-width:600px で flex-direction:column に切り替えて縦並びに変えています。並べ替えのためのJavaScriptは不要です。
使う場面
- 3カラムの特徴紹介やサービス比較
- 料金プランやステップ説明のカード並び
- フッターのリンク群をスマホで縦に折りたたみたいとき
切り替わる画面幅は @media の 600px を変えて調整します。横並びの本数を変えたい場合はHTMLの div を増減するだけで、flex:1 により幅が自動で均等配分されます。要素間の余白は gap の値で統一できます。横並びのまま本数が多いと一つ一つが狭くなるので、内容量に応じて切り替え幅を見直すと読みやすさを保てます。
よくある質問
縦積みに切り替わる画面幅を変えられますか
変えられます。メディアクエリの max-width 600px の数値を調整すると、何ピクセル以下で縦並びに切り替わるかを設定できます。
横並びの数を増やせますか
HTMLの子要素を増やすだけで対応できます。各要素に flex 1 が効いているため、本数が変わっても幅は自動で均等に配分されます。