プログラミング

【CSS】レスポンシブで2カラム→1カラム  flexで解決

スポンサーリンク

今回はレスポンシブデザインを作成する際に、
2カラムを1カラムにする、という御紹介です。

イメージはできるけど、実際どんなコード使えばいいのかわからない人へ紹介します。

目次

コード

PCサイズ

※htmlのコードは省略します。

#containerの中に、divが2個ある想定です。

#container{
display: flex;
justify-content: space-between;
}

*「flex」と「justify~」で、そのdivを横並びにして2カラムになります。

こんな感じ↓
#container-----
div1 div2
---------------

スマホサイズ


@media screen and (max-width: 〇〇〇px) {
#container {
flex-direction: column;  ←これで1カラムになります。
}
}

こんな感じ↓
#container-----
div1
div2
---------------

応用

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

@media screen and (max-width: 〇〇〇px) {
#container {
flex-direction: column-reverse;  ←これで1カラム、なおかつ順番が逆になります。
}
}

こんな感じ↓
#container-----
div2
div1
---------------

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

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

スポンサーリンク

-プログラミング
-, , , , , , ,

© 2022 サカらいふ Powered by AFFINGER5