2017年4月になると Windows Vista のサポート終了に伴い、IE10以下への対応が不要になります。これにより、多くの新しい CSS 機能を実戦投入できる状況になりますが、最も影響の大きい新機能として Flexbox があります。
Flexbox を使うと従来の CSS では扱いの難しかった上下中央寄せや残りの高さにフィットしたボックスが簡単かつ柔軟に実現できるようになります。
今回、紹介するのは Flexbox で Border レイアウトを実現する方法です。Border レイアウトとは具体的には、東・西・南・北・中央にコンポーネントを配置するレイアウト機構のことです。Java AWT の BorderLayout、.NET Windows Form の Dock を思い出すとわかりやすいかもしれません1。
実際の画面例です2。
では、具体的に HTML を見てみましょう。
<!doctype html>
<style>
html, body {
height: 100%;
margin: 0;
}
.layout {
display: flex;
flex-direction: column;
height: 100%;
}
.layout-body {
flex: 1 1 auto;
overflow: hidden;
display: flex;
flex-direction: row;
}
.layout-center {
flex: 1 1 auto;
overflow: auto;
}
.layout-left,
.layout-right {
overflow: auto;
}
/* 以下の CSS は色を付けているだけなので無視して構いません。 */
.layout-header { background-color: red; }
.layout-left { background-color: purple; }
.layout-right { background-color: green; }
.layout-footer { background-color: cyan; }
</style>
<body>
<div class="layout">
<div class="layout-header">header</div>
<div class="layout-body">
<div class="layout-left">left</div>
<div class="layout-center">content</div>
<div class="layout-right">right</div>
</div>
<div class="layout-footer">footer</div>
</div>
</body>
flexbox の仕様を知っていれば簡単に実現できそうですが、実際にやってみると中央部分のスクロールが意外にやっかいでした。ここでは、overflow を指定し、中のコンテンツサイズが溢れてもサイズが変わらないようにすることで解決しています。
なお、layout-center の中に layout を入れ子にしても動作します。