WEB制作

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

スポンサーリンク

flex-2columns

今回は 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カラムにする方法」も参考にしてくださいね。

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

スポンサーリンク

-WEB制作
-, , , , , , , ,

© 2023 WEBセンス Powered by AFFINGER5