Flexbox を試すツールを作ってみました。
既存のツールもいろいろあるのですが、英語に疎い私にはそもそも align justify content items のキーワードたちが何を意味するのかがなかなか頭に入ってきませんでした。なので特徴としてデフォルトでは簡潔な日本語にしています。
ボックスをクリックすると子要素の設定もできます。ただし1つだけです。
下に他の方が作ったツールもあるので英語が堪能な方はそちらも参照してみてください。
See the Pen CSS FlexBox playground by Akira Ikeda (@akicho8) on CodePen.
他の方が作ったFlexboxレイアウト確認ツール
▼Flexbox playground
https://codepen.io/enxaneta/full/adLPwv
挙動をすぐに確認できるように項目ごとにボックスが初期配置されています
▼Flexbox Playground
https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/
子要素の設定もそれぞれ変更できます
▼TEST CSS FLEXBOX RULES
http://flexbox.help/
親要素だけですがCSSが下に表示されるのが便利です