Simplicityの骨組みをフレキシブルボックスにする

※ウチのサイトはjQueryでごちゃごちゃとしているので必ずしも下記の通りでできるわけではありませんが参考までに

Simplicityの構造としては、

  • #container
    • #header
    • ナビ
    • #body
      • #body-in
        • #main
          • パンくずリスト
          • POST(記事)
        • #sidebar
  • #footer

このような感じになっていると思います。
ここで、#containerに対して、boxを指定して、vertical(縦並び)で設定するには、

こんな感じのCSSになるかと思います。つまり、#containerの中の#bodyは自動で縦方向に伸びるという感じです。その他は決められたサイズでそこにある感じですね。

2015/3/9 追記
古いブラウザはアレですが、たいてい今どきのモダンブラウザであれば以下のようなCSSでいけます。

次に、#mainと#sidebarはhorizontal(横並び)にしたいわけで、かつ#sidebarは指定のサイズにしたいわけです。すると、フレキシブルボックスは#mainになりますから、

2015/3/9 追記
box-orient: horizontal; は flex-direction: row;でも横並びになりますが、wrapと同時に書ける flex-flow: row wrap(or nowrap);と書くほうが良いでしょう。

このような感じになると思います。
#body-inにwidthが設定していないとフレキシブルですからあいているスペースいっぱいに#mainが広がります。上記では#sidebarは300pxにしてあります。

基本これだけで骨組みの設定は完了です。
メディアクエリでスマホやタブレット用の画面幅が指定していない場合は、勝手に#bodyや#mainが伸び縮みしてくれるという感じです。

現在のSimplicityは#sidebarなどをfloatで右寄せにしたり左寄せにしたりしてあります。floatというのは高さを持ちません、いわば空中に浮いているというような感じです。なので画面幅が狭くなると#mainとSideが重なったりしてしまうわけです。
またfloatされたdivは高さを持たないのでjQueryで高さを算出するというようなギミックを入れる必要があったりします。cssでclearfixを入れないといけない場面もあるでしょう。

フレキシブルボックスで骨組みが設定してあると、ある画面サイズ(例えばスマホのサイズ)になった時、#sidebarをdisplay:noneするだけで良かったり、あるいは位置の移動にしても、box-flex-groupなどで優先順位をつければ、ぴったりと親divに合うように伸縮しますし、#mainと#sidebarを入れ替えたい場合はbox-alignで設定もすぐにできます。

更に、親divの縦横中央も細かなテクニックを指定せずとも、box-pack,box-alignですぐに設定できる上に、divの均等割付けもbox-pack:justifyですぐにできます。

現在当サイトも順次flex-box化するために手を入れていますが、案外簡単にレイアウトできるので是非お試し下さい。
タブレットやスマホのメディアクエリをどうするかでちょっと頭を悩ませますが、floatで頭を悩ますよりはずっと楽ちんに作業できると思います。

ただこうすると、スクロール追従部分が従来の方法では実装できません。
ここをどうするかを現在思案中。

なんか色々とキャッシュやらhtaccessやら触ってたら原因不明だけどスクロール追従も動いた(笑)
ちなみに、スクロール追従は、オリジナルのスクリプトでやっています(参考: Simplicityを少し改造してみた 番外編3-2-2 サイドバー追従部分の修正案とbox-sizingによる要素のサイズについてSimplicityを少し改造してみた 番外編3-2-3 先日のサイドバー追従部分修正案のfix

スポンサーリンク

シェアする

フォローする