Bootstrap フレックスプレイグラウンド

Bootstrap フレックスプレイグラウンドについて

Bootstrap Flexプレイグラウンドでは、生のCSSではなく、実際のBootstrap 5.3ユーティリティクラスを使ってフレックスボックスレイアウトを構築できます。コンテナ(方向、折り返し、justify-content、align-items、gap)をセグメントコントロールで設定し、任意のアイテムをクリックしてalign-self、order、grow、shrinkのユーティリティを個別に設定すると、ライブプレビューが即座に再配置されます。

このツールを単なるおもちゃ以上のものにしているのが、ブレークポイントスイッチャーです。sm、md、lg、xl、xxlのいずれかを選ぶと、そこから設定したクラスにはレスポンシブなインフィックス(justify-content-md-between、flex-lg-rowなど)が付与され、Bootstrapのモバイルファーストシステムがそのブレークポイント以上に適用する仕組みそのままに反映されます。最大12個までアイテムを追加して、現実的なコンポーネントを再現できます。

レイアウトが良い形になったら、生成されたHTML、またはコンテナのクラスだけをコピーして、そのままプロジェクトに貼り付けられます。すべてブラウザ内で動作し、何もアップロードされません。

Bootstrap フレックスプレイグラウンドの使い方

1. セグメントコントロールを使って、コンテナのユーティリティ(方向、折り返し、justify-content、align-items、gap)を設定します。
2. 実際のコンポーネントに合わせて、アイテム(2〜12個)を追加または削除します。
3. アイテムをクリックして、align-self、order、フレックスサイジングのユーティリティを個別に設定します。
4. ブレークポイントを切り替えて、sm、md、lg、xl、xxl以上に適用されるレスポンシブなバリエーションを追加します。
5. ライブプレビューを確認し、生成されたHTMLまたはコンテナのクラスをコピーします。

よくある質問