【CSS】floatを使わないシンプルな2カラムレイアウトの作り方

2カラムレイアウトといえばfloatを使うイメージが強いですが、CSS3のFlexboxを使う方法もあります。

今回はFlexプロパティを使った2カラムレイアウトの作り方を紹介します。

Flexを使った2カラムレイアウト

コンテンツとサイドバーで構成された、固定幅の2カラムレイアウトです。

HTML

CSS

表示デモ

メインとサイドを包んでいる親要素をFlexコンテナ化して、横方向に均等配置するように指定するだけです。簡単簡単。

気になるブラウザの対応状況

この通り、Flexプロパティはほとんどのブラウザで動作します。IE8～9でもしっかり表示させたいならflexibilityを使えば良いんじゃないかな。

あとがき

簡単な2カラムレイアウトだと、Flexboxの偉大さが実感しにくいですね…floatと違って回り込みの解除が必要ないというメリットもありますが。

Flexboxが活躍するのはもう少し複雑なレイアウト（レスポンシブとかグリッドとか）を組み立てるときなので、近々別の記事で、もう少し踏み込んだレイアウト方法を解説します。