プラグインやフレームワークを使わずにレスポンシブ対応のナビゲーションが作れないかとここ1年半ほどずっと考えていました。制作現場では時間の制約などの関係でプラグインの導入が現実的だと思うのですが、せっかく勉強しているので、今回はFlexboxを使ってレスポンシブ対応のナビゲーションメニューを作ってみました。

Flexboxをつかってナビゲーションを横並びにして、コンテンツも中央揃えをした前回に引き続き、Flexboxについてです。前回の最後の方でコンテンツ部分にalign-itemsを使いましたが、今回はさらに一歩突っ込んだところを書いていきます。

現在のWebデザインはスマートデバイスの普及によって小さなモニタにも柔軟に対応するレスポンシブデザインが必須となり、floatやclearハックを駆使してレイアウトを組んでいたWebコーディングもこれからはCSSに書き足すだけで柔軟なレイアウトが組めるFlexboxが主流になってくると思います。今回から2回に渡って説明します。