Flexboxの勉強にも実務にも役立つ！レスポンシブ対応の柔軟なグリッドが簡単に実装できる -Flexbox Grid

Post on:2015年3月5日

企業サイトやブログなどで使われるシンプルなグリッドをはじめ、オフセットのカラム、ネストのグリッド、左・右・天地揃えと中央揃え、逆順配置など、柔軟なグリッドが簡単に実装できるスタイルシートを紹介します。

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: 外部ファイル

当スタイルシートを外部ファイルとして記述します。

<head>
  ...
  <link rel="stylesheet" href="css/flexbox.min.css" type="text/css" />
</head>

CDNでも用意されています。

<head>
  ...
  <link rel="stylesheet" href="//cdn.jsdelivr.net/flexboxgrid/6.1.1/flexboxgrid.min.css" type="text/css" />
</head>

Step 2: HTML

divなどで設定した各カラムにclassを加えるだけで、Flexboxのレイアウトが作成できます。

デモのキャプチャ

3カラムのレイアウトだと、HTMLはこんな感じに。

<div class="row">
    <div class="col-xs-12
                col-sm-8
                col-md-6
                col-lg-4">
        <div class="box">Responsive</div>
    </div>
</div>

classで使用している「xs, sm, md, lg」はビューポートの幅ごとのカラムの設定で、スマホでは12分割のカラム、タブレットでは6分割のカラム、デスクトップでは4分割のカラムでグリッドが設計されます。

sponsors

top of page

©2024 coliss