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のパネルの最後に変更されたコードが追加されているのが分かると思います。