Flexboxプレイグラウンド
実際のアイテムでCSS Flexboxのプロパティを試し、生成されたレイアウトCSSをコピーできます。
プレビュー
アイテムをクリックして編集
生成されたCSS
—
すべてブラウザ内で動作します — アップロードは一切ありません。
コンテナ
12px
アイテム
0
選択中のアイテム
Flexboxプレイグラウンドについて
Flexbox Playgroundは、CSS flexboxを実践的に試せるサンドボックスです。flex-direction、flex-wrap、justify-content、align-items、align-content、gapといったコンテナのプロパティを設定すると、最大12個のライブアイテムがプレビュー内で値を変更するたびに再配置される様子を確認できます。各プロパティが実際に何をするのかを体感的に理解する最も手早い方法です。
アイテムは個別に編集できます。1つをクリックして選択し、flex-grow、flex-shrink、flex-basis、align-self、orderを調整します。1つのアイテムが余白を吸収して大きくなる一方で、隣のアイテムが幅を保つ様子を見れば、どんな図解よりも早くflexのサイズ計算モデルが理解できます。
このツールは、コンテナと、デフォルト以外の設定を持つ各アイテムに対してきれいなCSSを生成します。そのままスタイルシートにコピーできます。すべてブラウザ内で完結し、アップロードは一切なく、リセットボタンでいつでもまっさらな状態に戻せます。
Flexboxプレイグラウンドの使い方
- コンテナのflex-direction、wrap、justify-content、align-items、align-content、gapを設定します。
- アイテムを2〜12個の範囲で追加・削除し、実際のコンポーネントを再現します。
- アイテムをクリックして、grow、shrink、basis、align-self、orderを調整します。
- 変更のたびにライブプレビューが更新される様子を確認します。
- 生成されたCSSをコピーしてプロジェクトに貼り付けます。
よくある質問
flex-growは余ったスペースを分配します。growが2のアイテムは、growが1のアイテムの2倍の余白を受け取ります。flex-shrinkはスペースが足りないときにその逆の働きをします。どちらも絶対的なサイズではなく、兄弟要素間の比率です。
align-itemsは、各行の中でクロス軸に沿ってアイテムを配置します。align-contentは、複数の折り返し行をコンテナ内で配置するもので、flex-wrapによって行が2行以上になったときにのみ目に見える効果を発揮します。
すべてのflexアイテムはデフォルトでorder 0を持ち、値が小さい順から大きい順に並びます。アイテムのorderを変更すると、HTMLを変更することなく見た目の順序だけを変えられます。DOMの順序、つまりスクリーンリーダーが読み上げる順序はそのまま維持されます。
はい。生成されるCSSにはコンテナのルールに加えて、grow、shrink、basis、align-self、orderのいずれかがデフォルトと異なるアイテムごとのセレクタが含まれるため、完全に動作するレイアウトをそのまま貼り付けられます。
はい、無料で、登録も不要、完全にクライアントサイドで動作します。作成した内容はブラウザのタブから外に出ることはありません。
人気の検索
flexbox プレイグラウンド
CSS flexbox ジェネレーター
flex コンテナ ジェネレーター
justify-content align-items ツール
CSS flex レイアウト ジェネレーター
flexbox ビジュアライザー
flexbox コード ジェネレーター
お困りですか？
このツールで問題が見つかりましたか？チームにお知らせください。