Flexbox を覚えるために Vue.js でシミュレータ作りました

投稿日：2017年08月30日

お疲れ様です、ナガです。

業務ではレガシーなブラウザ（IE）の対応がほぼ間違いなく発生するため、Flexbox を使うのを躊躇して結局使っていない僕です。

Flexboxを普段から積極的に使わない、業務外でも使わない、でも昨今はレイアウトは Flexbox を使うのがほぼ当たりまえという昨今…。

IE6の対応もやっていた時代からレイアウトはほとんど float 一択（たまに display: table ）でやってきました。

最近のイケイケの20代若手エンジニアたちはガンガン Flexbox を使っています（そんな気がする）。

このままだと僕は時代に取り残されたイケてないオヤジエンジニアになってしまう…。

そもそも Flexbox のプロパティを良く分かっていない…。

コレじゃマズイ…。

それならプロパティを試せるようなシミュレータを作ってみよう！

どうせ作るなら勉強中の Vue.js で作ってみよう！

というわけでシミュレータを作りました。

Flexbox Simulator

近々プロパティ名にマウスオーバーしたらツールチップで説明が出るようにします。

構築する時は試しに vue-cli 使ってしてみましたが、Component をふんだんに使ってるわけでもなしい、Router も使用していないから、別にプレーンなhtmlに vue 読み込ませて作っても良かったのでは？と、作り終えてから思いました。

Bootstrap は普段の業務では使わないのですが、プロトタイプ作るときは自分でCSS書かなくてもそれっぽくUIが実装できてラクで良いですね。

プロパティやメソッドの名称、ロジックなどこうした方が良いよ！とかあれば教えてください。

.oO(Vueジェイサーな方々とお知り合いになりたい…。)

Flexboxの解説は下記エントリーが大変参考になりました。

いつもお世話になっております…。