2カラムのレスポンシブなリキッドレイアウトのページ(フレックスボックス)

リキッドレイアウトする方法の続編

前回のエントリーで、2カラムのリキッドレイアウトの勉強、「ネガティブマージンを利用したリキドレイアウト」を勉強しました。
実はそん方法を採用するより先に「フレックスボックス」を真っ先に思いついていたのです。
しかし、学校で習っただけでうろ覚えだったのとCSS3で当時仕様が固まっていないとか聞いていたので互換性など無用なトラブルは避けようと思い、使いませんでした。
本番はネガティブマージンでうまくいったので、今回改めてフレックスボックスを使ったリキッドレイアウトに挑戦したいと思います。

フレックスボックスのコーディング

flex-boxはfloatいらず、ブロック要素を自由自在に並べることができます。
まずは前回と同じ片方が固定幅のリキッドレイアウトを作ってみます。

<div class=”box_wrapper”>
<div class=“content1”>
<div class=“content2”>
</div>

content1を固定幅、content2を可変幅にします。

CSSは、まず親要素box_wrapperに

.box_wrapper {
display:box;
display:-ebkit-box;
}

を設定します。

適宜、ベンダープレフィクスはつけてくださいね。
つける場所が特殊なものがあるので、webkitだけ例としてあげておきます。

次に子要素のカラムそれぞれのカラムの幅を設定、box-flexプロパティを追加します。固定幅が0、可変幅が1です。

.content1 {
width:150px;
box-flex:0;
-webkit-box-flex:0;
}
.content2 {
width:150px;
box-flex:1;
-webkit-box-flex:1
}

これだけです。ネガティブマージンを使った場合に比べてはるかにシンプルですね。トリッキーなこともしていないので説明も必要ないし。
あとはサンプルをご覧ください。
今回初めてCodePenを使ってみました。

ここで注目して欲しいのはボックスの高さが揃うことです。サンプルではカラムBの方が行数が多いですが、高さが同じになっているのが背景色をつけているのでわかると思います。
ウィンドウの幅を変えると、カラムBのテキストの行数が変わるので高さが変わりますが、カラムＡも追従してますよね。

おまけ

今回、フレックスボックスの機能をほとんど紹介できていませんが、あと一つだけ。
box-flexというプロパティですが、値を0にすると固定幅、1にするとリッキドレイアウトになる（正確に言うと外側のボックスとの隙間を埋めてくれます）のは、上記のサンプルの通りです。
この値をたとえば片方のボックスを1、もう片方を2としたらどうなると思いますか？
ぼくの予想は2つのボックスの幅の割合が1:2になるでした。
学校で習った時は、なんとなくうやむやになっちゃって謎のままだったのです。
なんと、box-flexの値は1:2だったら、もともとのボックスの幅から親（外側）のボックスの間を埋める分の割合が1:2になるらしいのです。
確認のためのサンプルを作ってみました。背景のストライプの柄を数えてみてください。

とうわけで数年来の謎が解けたところで締めさせていただきます。。かなり多機能なフレックスボックスのほんの一端を紹介させていただきました。しかし、一般的に使われているかどうかは疑問なのでしばらく様子見ですかね。