flexboxを使って、第1回はナビゲーションメニューを、第2回はボックスを横に並べてみました。第3回の今回はページ全体のレイアウト。Webページのコラムレイアウトって、floatを使うとちょっとめんどくさいですよね。floatの代わりにflexboxを使うと、HTMLもCSSも書く量が減り、とてもシンプルになります。

　コラムレイアウトをflexboxで実現するにはいくつかの書き方が考えられるのですが、ここでは実際のデザインやワークフローに合う実践的な方法を紹介します。

まずは2コラム

　まずは比較的単純な2コラムレイアウトを作成してみましょう。

　HTMLはこちら。<main>〜</main>を親要素、<aside class="side1">をサイドバー、<section class="page_main">をメインコンテンツにします。非常にシンプルです。

<main>
	<aside class="side1">Side1</aside>
	<section class="page_main">Main Content</section>
</main>

　CSSはこうします。注意点がいくつか。2つのflexアイテム、サイドバーの<aside class="side1">も、メインコンテンツの<section class="page_main">も「flex: 1 1 auto;」とし、拡大するときも縮小するときも分配率1:1にします。また、サイドバーのflexの3番目の値には200pxを、メインコンテンツのflexの3番目の値には600pxを指定してあります。この、flexの3番目の値には、flexアイテムが拡大も縮小もしなかった場合の幅のサイズを指定します。これは実践的なWebデザインのときに非常に有用で、たとえばPhotoshopやSketchで作られたデザインカンプがある場合、その実サイズをピクセルで指定しておけばよいのです。flexboxは、この3番目の値を基準にそれぞれのflexアイテムを拡大・縮小します。ウィンドウ幅が広くても狭くても、全体的なバランスが保たれるようになります。

body {
	font-family: sans-serif;
}
main {
	display: flex;
	flex-flow: row;
}
.side1 {
	flex: 1 1 200px;
	margin-right: 16px;
	border-radius: 6px;
	padding: 20px;
	background-color: #ddd;
}
.page_main {
	flex: 1 1 600px;
	border-radius: 6px;
	padding: 20px;
	background-color: #ddd;
}

　表示結果はこのようになります。

See the Pen flexbox-layout1 by Sukeharu Kano (@deinonychus) on CodePen.

サイドバーだけ幅を固定する

　さてここで。ウィンドウサイズに合わせて伸縮するとしても、実際のWebページでは、サイドバーの幅は固定し、コンテンツの領域だけ伸縮するようにするケースが多いと思います。その場合は、2回目の記事でも少し紹介しましたが、サイドバーの拡大時の拡大分配率、縮小時の縮小分配率を0にすればよいのです。そうすれば、ウィンドウサイズが変わっても、サイドバーの幅は変わりません。サイドバー（<aside class="side1">）とメインコンテンツ（<section class="page_main">）のCSSをこのように修正します。

...
.side1 {
	flex: 0 0 200px; /* <- 1番目と2番目の値が両方とも0なので、拡大も縮小もしない */
	margin-right: 16px;
	border-radius: 6px;
	padding: 20px;
	background-color: #ddd;
}
.page_main {
	flex: 1 1 600px;
	border-radius: 6px;
	padding: 20px;
	background-color: #ddd;
}

　これでサイドバーだけ伸縮しないようになりました。

See the Pen flexbox-layout2 by Sukeharu Kano (@deinonychus) on CodePen.

それでは3コラム

　ここまでくれば3コラムは簡単です。HTMLには、2コラムのソースにもうひとつサイドバーを追加します（<aside class="side2">Side2</aside>）。

<main>
	<aside class="side1">Side1</aside>
	<section class="page_main">Main Content</section>
	<aside class="side2">Side2</aside>
</main>

　CSSはこのようにします。flexの3番目の値を、サイドバーはともに200px、メインコンテンツを500pxにし、サイドバーは200pxから拡大も縮小もしないようにしています。

body {
	font-size: sans-serif;
}
main {
	display: flex;
	flex-flow: row;
}
.side1 {
	flex: 0 0 200px;
	margin-right: 16px;
	border-radius: 6px;
	padding: 20px;
	background-color: #ddd;
}
.side2 {
	flex: 0 0 200px;
	margin-left: 16px;
	border-radius: 6px;
	padding: 20px;
	background-color: #ddd;
}
.page_main {
	flex: 1 1 500px;
	border-radius: 6px;
	padding: 20px;
	background-color: #ddd;
}

　3コラムレイアウトができました。

See the Pen flexbox-layout3 by Sukeharu Kano (@deinonychus) on CodePen.

サイドバーの順序を変える

　さらに、flexboxの機能で、HTMLを変更せずに、サイドバーとメインコンテンツの順序を入れ替えることもできます。例として、左から「メインコンテンツ」「サイドバー1」「サイドバー2」の順に変えてみましょう。

...
.side1 {
	flex: 0 0 200px;
	order: 1;
	border-radius: 6px;
	padding: 20px;
	background-color: #ddd;
}
.side2 {
	flex: 0 0 200px;
	order: 2;
	margin-left: 16px;
	border-radius: 6px;
	padding: 20px;
	background-color: #ddd;
}
.page_main {
	flex: 1 1 500px;
	order: 0;
	margin-right: 16px;
	border-radius: 6px;
	padding: 20px;
	background-color: #ddd;
}

　このorderはflexbox関係の機能で、数値が小さい方が先に表示されます。flex-flowが「row」の場合、つまりflexアイテムが横に並ぶ場合、orderの数値が小さい方が左に並びます。

See the Pen flexbox-layout4 by Sukeharu Kano (@deinonychus) on CodePen.

モバイルのレイアウト

　ここまでくればあともう一歩。モバイルのシングルコラムレイアウトにも挑戦してみましょう。ソースコードを短くするために2コラムレイアウトをベースにします。基本的には「flex-flow」を「row」から「column」に書き換えるのですが、この際、flexの設定にも注意が必要です。

　flex-flowをrowからcolumnに変えると、ボックスは縦方向に並ぶようになります。こうなると、flexに設定する3つの値──順に拡大分配率、縮小分配率、ボックスの基準サイズ──が、rowのときはボックスの横方向の幅に効いていたのが、columnにするとすべて縦方向に効くようになります。モバイルのシンブルコラムレイアウトの場合、横幅は画面いっぱい、縦の高さは成り行きにしたいので、サイドバー、メインコンテンツとも「0 0 auto」に変更しなければなりません。つまり、ボックスの高さはコンテンツの量だけで決まり、それ以外には拡大も縮小しない、という設定にします。

　そのCSSがこちら。orderを使って、メインコンテンツが先、サイドバーが後と、順序も入れ替えています。

...
main {
	display: flex;
	flex-flow: column;
}
.side1 {
	flex: 0 0 auto;
	order: 1;
	border-radius: 6px;
	padding: 20px;
	background-color: #ddd;
}
.page_main {
	flex: 0 0 auto;
	order: 0;
	margin-bottom: 16px;
	border-radius: 6px;
	padding: 20px;
	background-color: #ddd;
}

　表示結果はこちら。

See the Pen flexbox-layout5 by Sukeharu Kano (@deinonychus) on CodePen.

やっぱり…レスポンシブにしたいよね

　2コラムレイアウト、3コラムレイアウト、シングルコラムレイアウト、すべてできました。最後に、レスポンシブレイアウトにします。2コラムレイアウトをベースにして、レスポンシブレイアウトにしてみましょう。flexbox第1回の記事『パターンで覚えるflexbox（1）─ナビゲーションメニューを作成しよう─』同様、ブレイクポイントを550pxに設定してあります。実際のWebサイトで使うときは、このブレイクポイントをちょうどいいところに合わせてください。

　ブラウザウィンドウを狭めたり広げたりして、動作を確認してみてください。また、ソースコードは編集できるので、ブレイクポイントやflexの設定をいろいろ変えて試してみてください。

See the Pen flexbox-layout6 by Sukeharu Kano (@deinonychus) on CodePen.

Flexboxを取り上げている関連書籍

わたしが書いた本の中では、『HTML5&CSS3デザインレシピ集』『いちばんよくわかるHTML5&CSS3きちんと入門』で、Flexboxを詳しく取り上げています。このサイトの書籍紹介ページでは、これらの本に掲載されているサンプルも確認することができます。