プログラミング

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

スポンサーリンク

本棚

Web制作をするうえで、2カラムのレイアウトにすることは良くあると思います。

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

目次

クリックできる目次

コード

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

.div{
display: flex;
justify-content: space-between;
}
*divが2個あるとします。
*まず「flex」と「justify~」で、そのdivを横並びにします。

#div左{
width: 50%;
}

#div右{
width: 50%;
}
左右のdivを両方50%にすれば、左右均等の2カラムが完成します。

応用

割合を 6:4 や 7:3 などにしたい場合は、左右合わせて100%になるようにを設定すればOKです。
(例:左60% 右40%)

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

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

スポンサーリンク

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

© 2022 サカらいふ Powered by AFFINGER5