CSS Flexbox Playground
ライブのビジュアルプレイグラウンドで、Flexboxコンテナとアイテムのプロパティを試してみましょう。方向、配置、折り返し、およびアイテムごとのフレックス値を調整できます。
미리보기
컨테이너 속성
px
선택한 아이템 속성
미리보기에서 아이템을 클릭하면 속성을 편집할 수 있습니다.
CSS 코드
복사됨!
Flexbox Playgroundとは？
Flexbox Playgroundは、CSS Flexboxレイアウトのプロパティを視覚的に試すことができるインタラクティブなツールです。方向、配置、およびアライメントなどのコンテナ設定を変更すると、フレックスアイテムの再配置がすぐにわかります。開発者がFlexboxを学習したり、CSSを最初から記述せずにレイアウトをすばやくプロトタイプ化したりするのに役立ちます。
Flexbox Playgroundの使い方
- コンテナのプロパティを設定 — flex-direction、justify-content、align-items、wrap、およびgapを選択します
- アイテムの追加/削除 — ボタンを使用して、フレックスアイテムを追加または削除します（3〜10個）
- アイテムのプロパティを編集 — アイテムをクリックして、flex-grow、shrink、basis、order、およびalign-selfを設定します
- プレビューを確認 — レイアウトがリアルタイムで更新されるのを確認します
- CSSをコピー — コピーをクリックして、コンテナとアイテムの両方に対して生成されたCSSを取得します
このFlexbox Playgroundを使用する理由
- 視覚的な学習 — 変更を即座に確認してFlexboxを理解します
- アイテムごとの制御 — 個々のflex-grow、shrink、basis、order、およびalign-selfを設定します
- クリーンなCSS出力 — プロジェクトに直接貼り付けることができる、適切にフォーマットされたCSSを取得します
- インストール不要 — 最新のブラウザですぐに動作します
- プライバシー — すべての処理はローカルで行われ、データはどこにも送信されません
FreeToolbox vs その他のFlexboxツール
| 機能 | FreeToolbox | Flexbox Froggy | CSS-Tricksガイド |
|---|---|---|---|
| インタラクティブ | フルエディタ | ゲームベース | 静的な例 |
| アイテムごとのプロパティ | はい | 制限あり | いいえ |
| CSSエクスポート | はい | いいえ | いいえ |
| Gapサポート | はい | いいえ | N/A |
| ダークテーマ | はい | いいえ | いいえ |
よくある質問
アイテムは何個まで追加できますか？
1〜10個のフレックスアイテムを使用できます。各アイテムは色分けされており、個別に構成可能です。
flex-growは何をしますか？
flex-growは、余分なスペースがある場合に、アイテムが他のアイテムと比較してどれだけ拡大するかを決定します。値0は拡大しないことを意味し、1は残りのスペースの自分の分け前を取ることを意味します。
flex-basisとwidthの違いは何ですか？
flex-basisは、スペース配分前のフレックスアイテムの初期サイズを設定します。これは、主軸（行方向の幅、列方向の高さ）に沿って機能します。widthとは異なり、フレックスアルゴリズムに関与します。
レスポンシブレイアウトに使用できますか？
はい。flex-wrapをパーセントベースのflex-basis値と組み合わせて、レスポンシブレイアウトを作成します。このプレイグラウンドは、最終的なCSSを記述する前に実験するのに役立ちます。
このツールは無料ですか？
はい、完全に無料で、制限や登録は必要ありません。