CSS フレックスボックスジェネレーター(視覚的)
CSS Flexbox 生成器(視覚的) フレックスボックスレイアウトを視覚的に設計し、生産用のCSSをコピーします。方向、配置、ラッピング、ギャップ、アイテムごとのオーバーライドを調整しながら、リアルタイムでプレビューが更新されます。推測せず、Chrome DevToolsのリターンを避け、必要なコンテナの動作を選択し、表示を確認し、生成されたルールを取得します。使い方 フレックス方向(行、行逆、列、列逆)を選択してメイン軸を設定します。justify-content と align-items を選択して、子要素が各軸にどのように配置されるかを決定します。アイテムが新しい行に折り返される場合、flex-wrap をオンにします — その場合、align-content がマルチライン制御に表示されます。ピクセル単位でギャップを設定してアイテム間をスペースを確保します。アイテム数を変更して追加または... をします。
ツールを試す »