Flex
FlexはFlexboxでやりたいレイアウトを、ビジュアルを確認しながら選択肢を選んで作成、コードをコピーできるシンプルなWebアプリです。設定項目の多いFlexboxは様々なレイアウトに対応できる反面で、覚えなければならない事も多く、正直言って面倒です。使うたびに検索してる、なんて方もいるかもしれませんね。
こちらはそんなFlexboxを、完成形を確認しながら選択肢を選ぶだけでコードを完成出来る、というもの。動作するチートシート、みたいな感じでした。
使ってみる
使い方はとても簡単です。まずは下にスクロールします。アイテムの数やflex-flowを聞かれます。次にwrapやjustify-contentなどを聞かれるので選択肢を選んでいく、という流れ。最終的にできたレイアウトを実装する為のCSSコードをコピーすればOKです。僕の下手な説明を読むより、使ってみた方が早いかも、という程度には楽に作れます。
プロパティがよくわからなくても大丈夫、選択肢を選べば即反映されますので実装したいとイメージしているレイアウトになる選択肢を選ぶだけです。勉強にもなるし、分かっている方でも楽じゃないかなぁと思います。
本アプリはOSSとしてソースコードが公開されています。ライセンスはMITとの事です。ただ、贅沢言えばもう少しググラビリティに配慮した名前にして欲しいです・・
