WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： mane
カテゴリー： トレンド >サービス紹介

こんにちは。
突然ですが、CSSのflexboxってfloatをマスターした後、独学で勉強すると結構複雑に感じる方が多いのではないでしょうか。
慣れてしまうと全然複雑ではないのに、あの「とっかかり」の難しさは何でしょうね・・・

そんなflexboxがなんと、ブラウザ上でボタンをクリックするだけで動きが確認でき、ソースコードまでコピーできてしまうサイトを発見しました。
それが、【FLEX LAYOUT GENERATOR】です。

こちらはこのようなジェネレーターサイトとしては珍しく日本のサイトのため、全て日本語表記！！
私だけでしょうか。日本語だと嬉しいですよね。

操作はとても簡単です。
まず、左側のエリアで「row（横並び）」「column（縦並び）」を決め、そのあとは「justify-content（水平方向揃え）」「align-items（垂直方向揃え）」などの子要素の並びを決定するボタンがあるのでクリックしてみると、右側のエリアに表示されているBOXが動きます。

CSSのソースコードもベンダープレフィックス付きで表示してくれます。
ただ、「column（縦並び）」の動きが反応しないので、こちらは自分で実際にソースコード上に記述する必要がありますが、これだけできればかなり勉強しやすいと思います。
「column（縦並び）」のアップデートを期待しましょう。

とにかくflexboxが苦手なんだ、という方はぜひ活用してみて下さい。
作業効率アップとしても使えそうですね。

flexboxをチートシートにまとめたサイトもあるので、そちらも合わせると理解が深まりますよ。
Webクリエーターボックス flexboxチートシート