今回は flex を使用した2カラムレイアウトの方法を紹介します。
初心者の方や「どうやるんだっけ・・・」と忘れてしまった方が参考になるかと思います。
それでは見ていきましょう。
コード
See the Pen
flex-2columns by t.h (@tomtom15)
on CodePen.
「flex」で、子要素のdivを横並びにします。
そして、左右のdivのwidthを両方50%にすれば、左右均等の2カラムが完成します。
比率を変えて応用してみよう
割合を 6:4 や 7:3 などにしたい場合は、左右合わせて100%になるように数値を設定すればOKです。
【例:左60% 右40%】
See the Pen
flex-2columns_6:4 by t.h (@tomtom15)
on CodePen.
まとめ
いかがでしたでしょうか。
とっても簡単ですよね。
Width をパーセンテージで設定するとレスポンシブ対応するときにとっても便利です。
カラムのレイアウト方法は他にもいろいろあるので、詳しく知りたい方はこちらもどうぞ。
https://kiyoblog.org/css-flex/
レスポンシブ対応に使える「2カラムから1カラムにする方法」も参考にしてくださいね。 続きを見る
【CSS】flexで2カラム→1カラム レスポンシブデザインの必須レイアウト
画像を均等に並べる方法も紹介しておきます。 続きを見る
【CSS】画像を均等幅で横並びにする方法