[CSS]超簡単!Flexboxでグリッドを実装する時のベースになるスタイルシート -Fukol Grids

レスポンシブに完全対応、でも面倒なブレイクポイントの設定は必要なし、すべてのブラウザを配慮したプログレッシブエンハンスメントを取り入れ、Flexboxでグリッドを実装するスタイルシートを紹介します。

ファイルサイズはわずか93bytesで超軽量、シンプルなHTMLを使って汎用性のある柔軟なグリッドを簡単に利用できます。
Flexboxを初めて導入する人も、Flexboxをガンガン使ってる人も必見です。

サイトのキャプチャ

Fukol Grids -GitHub

Fukolのデモ

CodePenにデモページがあるので実際の動作を確認できます。

サイトのキャプチャ

Fukol

コードも変更できるので、アイテム数やサイズを変更して試してみてください。

Fukolの使い方

外部ファイル

当スタイルシートを外部ファイルとして記述、もしくはコードが数行なのでコピペして利用します。

HTML

div要素のコンテナに「.fukol」を与え、リスト要素でグリッドのセル・アイテムなどの子要素を実装します。

正のマージンを与える時はコンテナの「.fukol」に与え、「.fukol-grid」に使用しないでください。「.fukol-grid」では負のマージンを使用します(※下記の5を参照)。
これは特定の状況下で起こる水平方向のスクロールの問題を回避するためです。

CSS

fukol.cssの中身は、わずか10行です。

スタイルシートは1, 2はそのまま使用し、3, 4, 5の数値はデザインに合わせて変更して利用します。

1. display: flex;
Fukolは、Flexboxベースのグリッドシステムです。Opera MiniでさえFlexboxをサポートしています。Flexboxをサポートしていないブラウザは「display: flex;」を無視し、1カラムのレイアウトで配置するだけなので、大きな害はないでしょう。
2. flex-wrap: wrap;
「flex-wrap」プロパティは、Flexコンテナが複数のアイテムを一行、または複数行に配置することをコントロールします。「wrap」を指定すると、Flexアイテムは横複数行に配置されます。必要があれば、左から右へ、上から下へ、の順番に配置されます。
3. flex: 1 0 5em;
「flex」プロパティは、「flex-grow」「flex-shrink」「flex-basis」のショートハンドです。「auto (1 1 auto) 」「(0 0 auto)」といった指定ができます。
flex-grow: フリーのポジティブなスペースがある場合にflexアイテムが他のflexアイテムと比較してどのくらいの大きさになるかを指定します。
flex-shrink: フリーのネガティブなスペースにflexコンテナ内のflexアイテムが残りのアイテムと比較してどのくらい縮まるかを指定します。
flex-basis: flexアイテムの最初のメインとなるサイズを元に、幅と高さのプロパティを同じ値にします。
主に最後の値「5em」を変更します。現状「1 0」はそのままにしておきます。
4. margin: 0.5em;
これは溝のサイズです。「0.5em」を指定した場合、両側の2つ分になるため「1em」の溝になります。
5. margin: -0.5em;
この値は常に4の値の負にします。4で指定したマージンがアイテム群の両端(外側)にも適用されるため、その分のマージンを打ち消します。
「.fukol-grid」コンテナの外側が水平方向に凸凹になっていないか、垂直方向に意図しないマージンが追加されていないか確認してください。

flex-grow, flex-shrink, flex-basisなど、Flexboxの各プロパティの詳しい解説は下記ページをご覧ください。

幅の異なるアイテム

特定のアイテムの幅をより狭く、広くすることもできます。
例えば5番目のアイテムを2倍の幅にする時は、下記のように記述します。

「3. flex: 1 0 5em;」の「flex-basis」の値を倍にします。

アイテムの幅をパーセントで指定

個々のアイテムの幅をパーセントで指定することもできます。
例えば最初のアイテムが幅100%で、溝1emの時は、下記のように記述します。

IEではflex-basisアイテムでbox-sizingをサポートしません。そのためパーセントの幅を使うと、Flexアイテムで埋めることができないため、子ノードを加えて対応します。

top of page

©2017 coliss