flexboxのCSSレイアウトを生成できる便利ツールflexplorer

flexboxはシンプルなhtmlでレイアウトを構成できて便利ですが、プロパティが色々あって混乱することもしばしば。。
flexplorerを使えば、スタイルの切り替えを実際に見ながらレイアウトの確認が出来るので、flexboxの仕組みが直感的に理解できます。

flexplorer

flexplorer

flexplorer

指定できるプロパティ

  • ボックスの横幅
  • flex-direction
  • flex-wrap
  • justify-content
  • flex-grow
  • flex-shrink
  • flex-basis

入力した情報をCSSとして表示してくれるので、コピペで使えて便利です。