ウェブサイトでサイドバーを配置するというレイアウトを実現する際、「float」を使うことが多かったのですが、最近では「display:flex」を使うことが多くなりました。
「display:flex」を使って左右2カラムのレイアウトを作る方法について、コピペで使えるソースコード付きでご紹介します。
display:flexで2カラムの構造を作る実例
floatを使って左右2カラムのレイアウトを作る場合、サイドバーを300pxの幅で固定した時にメインカラムの幅調整がめんどくさいんですよね。
幅を固定したらウィンドウを狭めた時にサイドバーがカラム落ちしたりしますし、％で指定しても綺麗に伸び縮みしてくれなくて。
「display:flex」を使うと、その問題が解決できます。
HTMLの記述例がこちら。メインカラムとサイドバーを2つ作って、それを大きくdivで囲っただけのシンプルなコードです。
<div class="container"> <main class="main-contents" role="main"> メインカラム </main> <aside class="sidebar" role="complementary"> サイドバー </aside> </div>
そしてCSSがこちら。iPadよりも幅が狭くなった時にサイドバーを下側に持ってくるように書いてます。
.container {
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
display: flex;
margin: 0 auto;
max-width: 1080px;
}
.main-contents {
width: calc(100% - 300px);
}
.sidebar {
width: 300px;
}
@media screen and (max-width: 767px) {
.container {
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
width: 100%;
}
.main-contents,
.sidebar {
width: 100%;
}
}
marginとmax-widthは中央寄せにするために設定しているので、左右に並べるための記述は実質「display: flex;」一行のみです。この1行を親のボックスに書くだけで左右2カラムの構造を作ることができます。
「displayなんちゃら」が4行ありますが、これはいずれ最後の1行だけで良くなると思います。上の3行はある程度古いブラウザなどに対応させるための保険です。
また、メインカラムの幅を「width: calc(100% - 300px);」で設定しているのが肝です。まず、サイドバーだけ固定幅にしておくと便利なので(幅300pxの広告を貼っておいたりできるので)、サイドバーには300pxを設定してます。
それに対してメインカラムは、「100％の幅から300pxを引いた幅」を「width: calc(100% - 300px);」と書いて実現してます。こうするとウィンドウを伸び縮みさせても「サイドバーの幅を引いた目一杯の幅」から崩れることがないんですよ。これがめちゃめちゃ便利なんです。
右サイドバーをHTMLを変更せずに左サイドバーに変更する方法
display:flexで左右2カラムのレイアウトを作る場合にもう一つ便利なことがありまして、親のボックス(上記の例で言えば.container)に「flex-direction: row-reverse;」と入れるだけでHTMLの構造そのままにサイドバーを逆側に配置できるんですね。
先ほどの記述例だとメインカラムの右側にサイドバーが来るんですが、「flex-direction: row-reverse;」を追記すると左側にサイドバーが移動します。
もちろんfloatで作っていてもそれは可能ではあるんですが、1行足すだけというのが気楽でいいんですよ。
要素が3つ以上あった場合に順番を指定する方法
上記の方法の場合は順番を逆にするだけなんですけども、細かく順番を指定することもできます。しかもやり方が超簡単で、子の要素にorderで順番を指定してあげるだけです。
詳しくは下記の記事で解説してます。
要素が3つ以上あった場合には順番に並べるのではなく順番を細かく設定したいこともあると思うので、こちらの方法もご活用ください。
最後に
今はだいぶ対応ブラウザが増えましたので使っちゃってますが、古いIEに対応してるかどうかの確認をしたことがないので、案件によってはご注意ください。