Flexboxを使ったページのレイアウトから要素の配置まで、レスポンシブ対応のコードが生成できるツール -Flexible Boxes

Flexboxを使ったページレイアウト、要素の配置など、レスポンシブ対応のコードが結果を見ながら簡単に生成できるオンラインツールを紹介します。

Flexboxでどんなことができるんだろう、という勉強にもいいですね。

サイトのキャプチャ

Flexible Boxes
Flexible Boxes -GitHub

Flexible Boxesの使い方は、簡単です。
まずは左下の「Presets」から、レイアウトのベースを選択します。

サイトのキャプチャ

レイアウトの選択

「Presets」に用意されているレイアウトは、3種類。

  • Simple
    ヘッダとフッタと1カラムのコンテンツ、シンプルなレイアウト。
  • Holy Grail
    ヘッダとフッタ、そしてサイドバー2つとコンテンツの3カラム レイアウト。
  • Centered
    天地中央、左右中央、天地左右中央に要素を配置。

「Presets」でレイアウトを選択すると、それぞれの基本レイアウトが表示されます。

サイトのキャプチャ

Simple
ヘッダとフッタと1カラムのコンテンツ、シンプルなレイアウト。ヘッダにはロゴやナビゲーションが配置されています。

サイトのキャプチャ

Holy Grail
ヘッダとフッタ、そしてサイドバー2つとコンテンツの3カラム レイアウト。

サイトのキャプチャ

Centered
天地中央、左右中央、天地左右中央に要素を配置。

それぞれのレイアウトは、カスタマイズも可能です。
Holy Grailの3カラムを2カラムに変更してみます。

サイトのキャプチャ

Holy Grail

「DOM」のパネルで左のサイドバーを選択し、ゴミ箱をクリックすると、簡単に削除されました。カラムを削除するだけでなく、追加することも簡単にできます。

サイトのキャプチャ

Holy Grail 左サイドバーを削除

レイアウトはURIに反映されるので、直リンクすることも可能。上記のリンクをクリックすると、左サイドバーが削除された状態で表示されます。

子要素は、右の「TOOLBAR」で変更できます。

サイトのキャプチャ

フッタに配置されているロゴを中央配置から、左寄せに変更してみます。

サイトのキャプチャ

表示されているレイアウトは、リアルタイムにコードに反映されており、上の図でもCSSのパネルの最後に変更されたコードが追加されているのが分かると思います。

top of page

©2017 coliss