WEB制作

【CSS】flexで2カラム→1カラム  レスポンシブデザインの必須レイアウト

スポンサーリンク

from-2column-to- 1column

今回はレスポンシブデザインを作成する際に、避けては通れない、2カラムを1カラムにする方法を紹介します。

よくあるパターンです。

 

PC表示で写真とテキストが横並びになっているレイアウトを、
スマホ表示になると、写真とテキストが縦並びになるやつです。

 

さっそくコードを見ていきましょう。

 

コード

PCサイズ

See the Pen
2column
by t.h (@tomtom15)
on CodePen.


*親要素に「flex」を設定し、子要素の「div」を横並びにして2カラムにします。

 

 

スマホサイズ

See the Pen
1column
by t.h (@tomtom15)
on CodePen.

ポイントは flex-direction: column;  です。
これで1カラムになります。

※メディアクエリの表記は省略します。

 

 

順番を逆にできる

See the Pen
column-reverse
by t.h (@tomtom15)
on CodePen.

ちなみに、順番を逆にしたいな、というときは、

flex-direction: column-reverse;  
を設定してくだしてください。

これで順番が逆になります。

 

カラムのレイアウト方法は他にもいろいろあるので、詳しく知りたい方はこちらもどうぞ。
https://kiyoblog.org/css-flex/

flex時に要素の割合を変える方法も紹介しておきます↓

スポンサーリンク

-WEB制作
-, , , , , ,

© 2023 WEBセンス Powered by AFFINGER5