[CSS]超簡単！Flexboxでグリッドを実装する時のベースになるスタイルシート -Fukol Grids
Post on:2016年10月31日
sponsors
レスポンシブに完全対応、でも面倒なブレイクポイントの設定は必要なし、すべてのブラウザを配慮したプログレッシブエンハンスメントを取り入れ、Flexboxでグリッドを実装するスタイルシートを紹介します。
ファイルサイズはわずか93bytesで超軽量、シンプルなHTMLを使って汎用性のある柔軟なグリッドを簡単に利用できます。
Flexboxを初めて導入する人も、Flexboxをガンガン使ってる人も必見です。
Fukolのデモ
CodePenにデモページがあるので実際の動作を確認できます。
コードも変更できるので、アイテム数やサイズを変更して試してみてください。
Fukolの使い方
外部ファイル
当スタイルシートを外部ファイルとして記述、もしくはコードが数行なのでコピペして利用します。
|
1 |
<link rel="stylesheet" type="text/css" href="fukol.css" > |
HTML
div要素のコンテナに「.fukol」を与え、リスト要素でグリッドのセル・アイテムなどの子要素を実装します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="fukol"> <ul class="fukol-grid"> <li><!-- グリッドのセル・アイテムなどの子要素 --></li> <li><!-- グリッドのセル・アイテムなどの子要素 --></li> <li><!-- グリッドのセル・アイテムなどの子要素 --></li> <li><!-- グリッドのセル・アイテムなどの子要素 --></li> <li><!-- グリッドのセル・アイテムなどの子要素 --></li> <li><!-- グリッドのセル・アイテムなどの子要素 --></li> <li><!-- グリッドのセル・アイテムなどの子要素 --></li> <li><!-- グリッドのセル・アイテムなどの子要素 --></li> </ul> </div> |
正のマージンを与える時はコンテナの「.fukol」に与え、「.fukol-grid」に使用しないでください。「.fukol-grid」では負のマージンを使用します（※下記の5を参照）。
これは特定の状況下で起こる水平方向のスクロールの問題を回避するためです。
CSS
fukol.cssの中身は、わずか10行です。
|
1 2 3 4 5 6 7 8 9 10 |
.fukol-grid { display: flex; /* 1 */ flex-wrap: wrap; /* 2 */ margin: -0.5em; /* 5 (値は変更可) */ } .fukol-grid > * { flex: 1 0 5em; /* 3 (値は変更可) */ margin: 0.5em; /* 4 (値は変更可) */ } |
スタイルシートは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倍の幅にする時は、下記のように記述します。
|
1 2 3 |
.fukol-grid > *:nth-child(5) { flex-basis: 10em; } |
「3. flex: 1 0 5em;」の「flex-basis」の値を倍にします。
アイテムの幅をパーセントで指定
個々のアイテムの幅をパーセントで指定することもできます。
例えば最初のアイテムが幅100%で、溝1emの時は、下記のように記述します。
|
1 2 3 |
.fukol-grid > *:first-child { flex-basis: calc(100% - 1em); } |
IEではflex-basisアイテムでbox-sizingをサポートしません。そのためパーセントの幅を使うと、Flexアイテムで埋めることができないため、子ノードを加えて対応します。
|
1 2 3 4 5 6 7 |
<div class="fukol"> <ul class="fukol-grid"> <li> <div><!-- 子ノード --></div> </li> </ul> </div> |
sponsors
