Flexboxの勉強にも実務にも役立つ！レスポンシブ対応の柔軟なグリッドが簡単に実装できる -Flexbox Grid
Post on:2015年3月5日
sponsorsr
企業サイトやブログなどで使われるシンプルなグリッドをはじめ、オフセットのカラム、ネストのグリッド、左・右・天地揃えと中央揃え、逆順配置など、柔軟なグリッドが簡単に実装できるスタイルシートを紹介します。
Flaxboxを勉強したい初心者から、簡単に使いたいと考えてるベテランまで、勉強にも実装にも役立つ便利なスタイルシートです。
Flexbox Grid
Flexbox Grid -GitHub
Flexboxの各プロパティの解説は、下記ページをご覧ください。
Flexbox Gridで実装された柔軟なグリッド
Webデザインで使うさまざまなグリッドをclassをちょちょいと加えるだけで実装できます。
Responsive
まずはベーシックな3カラムのグリッド。ビューポートの幅に応じて、xs, sm, md, lgとclassを使い、グリッドを定義します。
Fluid
カラムの幅を%にした時には、縦列と横列のサイズが流動的にリサイズされます。
Auto Width と Nestes Grids
Auto Widthは、横列の幅にautoにするとそれを理解してグリッドを定義します。Nestes Gridsは、グリッドの中に更にグリッドを定義できます。
Alignment
揃えのデフォルトは、左揃えです。中央や右揃えもclassを与えることで簡単にできます。
また、異なるビューポートごとに異なる揃えを設定することも可能です。
Alignment
天地中央揃えも簡単です。
Reordering
配置の順番を変更することもできます。
上から、最後のカラムに「.first」を加えたもの、最初のカラムに「.last」を加えたもの、「.reverse」を加え順番を入れ替えたもの。
Flexbox Gridの使い方
Step 1: 外部ファイル
当スタイルシートを外部ファイルとして記述します。
[html]
...
[/html]
CDNでも用意されています。
[html]
...
[/html]
Step 2: HTML
divなどで設定した各カラムにclassを加えるだけで、Flexboxのレイアウトが作成できます。
3カラムのレイアウトだと、HTMLはこんな感じに。
[html]
[/html]
classで使用している「xs, sm, md, lg」はビューポートの幅ごとのカラムの設定で、スマホでは12分割のカラム、タブレットでは6分割のカラム、デスクトップでは4分割のカラムでグリッドが設計されます。
sponsors
