【CSS】flexを使った２カラムのレイアウト方法　とっても簡単です

今回は flex を使用した２カラムレイアウトの方法を紹介します。

初心者の方や「どうやるんだっけ・・・」と忘れてしまった方が参考になるかと思います。

それでは見ていきましょう。

コード

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.

まとめ

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

とっても簡単ですよね。

Width をパーセンテージで設定するとレスポンシブ対応するときにとっても便利です。

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

レスポンシブ対応に使える「２カラムから１カラムにする方法」も参考にしてくださいね。

画像を均等に並べる方法も紹介しておきます。