Foundation6の新機能「Flex Grid」を使ってみる

foundation
foundation

Foundation6の新機能として、flexboxによるグリッドシステム「Flex Grid」の採用があります。

flexboxについてはWebクリエイターボックス様の解説が詳しいです。
これからのCSSレイアウトはflexboxで決まり! | Webクリエイターボックス

Flex GridはCSSのflexboxを基軸とした新しいグリッドシステムです。
レスポンシブへのより柔軟な対応が行えると同時に、CSSフレームワークにありがちなHTMLの深いネストを簡素化することができます。

Flex Gridはどうすれば使えるようになるのか、従来のグリッドシステム何が違うのかについて簡単ですが調べてみました。

Flex Gridを使ってみようとされる方は参考にしてください。

注意:対応ブラウザについて
flexboxの対応状況と同じですが、Flex Gridも対応ブラウザが
Chrome, Firefox, Safari 6+, IE10+, iOS 7+, and Android 4.4+.
となります。

IE9、Android4.3以下を切れるかどうかがポイントになりそうです。

AD

はじめに:Flex Gridを有効にする

Sassバージョンでの利用方法

Foundation6の導入方法については過去記事も参照してください。
Foundation6のシンプルなテンプレート「Foundation for Sites Template」を使う

デフォルトでは従来のfloatを利用したグリッドシステムが使用されますので、app.scssを修正してFlex Gridを有効にします。

「@include foundation-grid;」をコメントアウトして「@include foundation-flex-grid;」を追記します。

CSSをビルドするとFlex Gridを使用できます。

ビルド済みダウンロードバージョンでの利用方法

Customize FoundationからHTMLとビルド済みCSSをダウンロードして利用する場合は、「Grid」欄の「Flex Grid」をチェックしてダウンロードします。

Foundation for Sites

ただ、ビルド後のファイルはCSSの修正が難しくなるので、Sass版の使用をお勧めします。

実際にHTMLを書いてみる

公式ドキュメントのFlex Gridを参考にしています。

実際にFoundation6でHTMLを書いたもの
以下のコードがどういう動きをするかの参考にしてください。

基本

横一列をdiv.rowとし、その中にdiv.columns.large-○(1~12の数字)で枠を組んでいくのは従来のグリッドと同じです。

たとえば左:右を1:2にしたレイアウトを組みたい場合は以下のHTMLになります。

Flex Gridを有効にしても従来の記述だけでは何も変わりません。
次から紹介する新機能(といってもクラスをつけるだけなので簡単)を使うことで、FlexGridのよさを活かせます。

1カラムだけ幅固定、あとは等分にする

従来のグリッドはすべてのカラムに幅(small-○のようなクラス)を指定する必要がありました。
Flex Gridは幅を指定しないカラムの幅を均等に割り振ることができます。
グリッドシステムなのに12分割じゃなくてもいい!素晴らしい!

カラムを最小幅にする

「shrink」というクラスを付加することで、できる限り狭い1/12に満たないカラムをつくることもできます。
アイコン+テキストというレイアウトや、1/12未満のカラムをつくりたい幅広なレイアウトを組むときに使えそうです。

marginやpaddingは適切に維持されるので最小幅と言ってもレイアウトが崩れる心配はありません。

カラムを均等幅にする

.columnsに対して「large-expand」「medium-expand」「small-expand」というクラスを付加することで、それぞれのウインドウサイズ時にカラムの幅をすべて同一にすることができます。
従来は「large-○」のように12を割り切れる幅を指定しないといけませんでしたが、expandクラスを使うことで自由なレイアウトが実装できますね。

横並び・縦並びを制御する

ウィンドウサイズによって横並び、縦並びを制御したい場合、.rowにクラスを付加するだけで簡単に実現できます。
従来は.columnsに対して「small-○」「large-○」という幅指定を行わないといけませんでした。

横並びの状態を解除したい場合、「medium-unstack」「large-unstack」というクラスを.rowクラスとともに指定することで縦並びに組み直されます。

※なぜか「small-unstack」が効かない…バグかもしれません。

水平方向の行揃え

カラム数が12未満の場合、余ったカラムを制御するために「end」や「small-offset-○」というクラスを付加する必要がありました。
Flex Gridはカラムが足りない場合でも適切にレイアウトを組んでくれます。

垂直方向の行揃え

垂直方向の行揃えもクラスを指定するだけで簡単にできます。

.rowに「align-middle」「align-top」「align-bottom」を指定することで、含まれるカラムを指定した行揃えにしてくれます。

.columnsに指定して中央揃えや上揃えなどを混在することも可能です。
苦労したvertical-align:middle;も簡単にできる!素晴らしい!

カラムの余白を制御する

特に指定しないとカラムにはpaddingが取られますが、「small-collapse」のように「[size]-collapse」というクラスを.rowに付加することで余白のないカラムをレイアウトすることができます。

小ウインドウでは余白なし、中・大では余白ありといった使い方ができます。

余談ですが、日本語環境ではデフォルトの余白が大きすぎると思うので_settings.scss内の「$grid-column-responsive-gutter」という値(これがカラムのpadding)を修正したほうがいいと思います。

カラム間のマージンを取る

[size]-offset-○というクラスをカラムに付加することで、左側に指定カラム幅分のマージンを取ることができます。
(この機能は従来からあったような気が...)

並び順を制御する

flexboxには「order」というプロパティがあり、HTMLの記述順に影響されず並び順を制御することができます。
Foundation6の場合は「[size]-order-○」というクラスをカラムに付加することで並び順を制御することができます。

まとめ

Flex Gridのカラム幅を指定しないときの柔軟な挙動は、特にCMSで使う際に効果を発揮するのではないかと思います。
従来のグリッドシステムとほぼ同じ感覚で使うことができますので、機会があればぜひ挑戦してみてください。

余談

この「Wood-Roots.blog」をFoundation6でリニューアルしようと思い少しずつ進めています。
Flex Gridを使うということはIE9を切ることになるのですが、まぁいいですよねw

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

コメントはまだありません。