Flexboxで レスポンシブ デザインな サイトにする方法

横幅のないスマホでは、本文の下にナビがある1カラム。ＰＣでは、本文の横にナビがある2カラムにしたい。そんな時は、本文とナビをフレックスボックスコンテナで囲む。まずはデモ動画を

html 例は ↓ なカンジ
<div id="flexbox">
<div id="honbun">hogehoge</div>
<div id="navi">navi</div>
</div>

で、スタイルシートに

#flexbox{
display: flex;
}

と記述。これで横並びのボックス。2カラム完成。

次に幅が狭くなる or 文字サイズが大きくなると 1カラムになるよう flex-wrap プロパティを wrap と指定。

#flexbox{
display: flex;
flex-wrap: wrap; // ←追記分
}

完成。わぉカンタン♪

スマホと PC の境界が曖昧で文字サイズもユーザー次第な昨今、これが最善かな?! flex-wrap の初期値は nowrap で領域外にはみ出す可能性が。横スクロールよりは、1カラム化するほうがユーザーフレンドリーかと。。

「2カラムで本文とナビの表示割合を 6:4 にしたい」とか、「余白を取りたい」とかは Flex アイテムに ブラウザ毎のくせがあるから、別の機会に。

・・、その前に youtube の埋め込みをレスポンシブ対応しないと。。

動作確認：Firefox36.0

参考ページ：CSS flexible box の利用