【flex】レスポンシブデザインで要素の並び順や幅の指定を自由自在に

今回はflexを使用したレスポンシブデザインのよくあるパターンを紹介します。

２カラム（PC）から１カラム（スマホ）に変更

写真とテキストを組み合わせた、よく見かける２カラムのパターンです。

ＰＣサイズ

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

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

スマホサイズ

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

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

※メディアクエリの表記方法は省略しておりますので、知りたい方はこちらをどうぞ。

１カラム時の順番を逆にする

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

スマホ表示にしたとき、要素の順番を逆にしたい、というときは、

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

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

要素の幅（width）を指定

２カラムのレイアウトでは、それぞれのカラムの幅（width）を指定できます。

左右ともに50％

See the Pen
flex-2columns by t.h (@tomtom15)
on CodePen.

「flex」で、子要素のdivを横並びにします。
そして、左右のdivのwidthを両方50％にすれば、左右均等の２カラムが完成します。

比率を変えてみよう

割合を 6：4 や 7：3 などにしたい場合は、左右合わせて１００％になるように数値を設定すればOKです。

【例：左６０％　右４０％】

See the Pen
flex-2columns_6:4 by t.h (@tomtom15)
on CodePen.

なぜ「px（ピクセル）」ではなく「%」にしたかというと、pxだと絶対値なので、幅が固定されてしまうからです。

%にすると、「親要素の幅に対して○○%のwidth」となるので、レスポンシブデザインに対応しやすいです。

ちなみに、スマホ時の要素の幅を「width:100%;」に指定すれば、スマホ時は画面横いっぱいに要素が広がります。

まとめ

いかがでしたでしょうか。

• ２カラムから１カラムに変更する
• １カラムにするときに順番を変更できる
• 要素の幅を指定できる

これさえ抑えておけば、flexもレスポンシブデザインも基本はバッチリです。

それではまたお会いしましょう。

gridで要素を並べる方法もありますので参考までにどうぞ。