CSSフレックスボックスチートシート

Flexboxプロパティの視覚的リファレンス。各プロパティをクリックでプレビュー変更。

CSSコード

プレビュー

破線のボックスがFlexコンテナ

番号付きのカラフルなボックスがFlexアイテム

左側のボタンをクリックして、動作を確認できます

Flexboxチートシートとは？

CSS Flexboxの主要なプロパティを視覚的に確認できるリファレンスツールです。 justify-content、align-items、flex-direction、flex-wrap、align-contentの各プロパティ値をクリックするだけで、実際の動作をプレビューできます。

Flexboxの学習やレイアウト調整時の参考資料として、プロパティ値の違いを素早く確認できます。CSSコードもワンクリックでコピー可能です。