.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 16px;
}Flexbox Generatorとは?
Flexbox Generator は、CSS フレキシブル ボックス レイアウトの視覚的な遊び場です。コンテナのプロパティをボタンとスライダーで設定し、ライブ プレビューでアイテムをリアルタイムで並べ替えるのを見て、プレビューが使用している正確な CSS をコピーします。これにより、どのプロパティが何をしているかを記憶する際の推測が排除されるため、ブラウザ開発ツールで試行錯誤することなく、行、列、中央のレイアウト、またはカードのラッピング グリッドを構築できます。
Flexboxは1 次元のレイアウトモデルです: アイテムは主軸に沿ってレイアウトされ、クロス軸に整列されます コンテナは6 つのプロパティを通してほとんどすべてを駆動します flex-directionは主軸とそれが前後に走るかどうかを選択します justify-contentは主軸に沿って空き領域を分配します align-itemsはアイテムをクロス軸に配置します flex-wrapはアイテムが新しいラインにオーバーフローするかどうかを決定し、ラッピングがオンのときにそれらのラインをalign-contentスペースがマージンなしでアイテム間に一貫した間隔を追加します。
このツールはそれらのプロパティをすべて一箇所に公開し、結果をすぐに表示します。 プレビューは出力ボックスに表示されるのと同じ宣言でレンダリングされるため、表示される内容は、CSS をスタイルシートに貼り付けると正確に取得されます。生成されたルールは、デフォルトで.container クラスをターゲットにし、ラッピングが有効になっている場合にのみ align-content を含む重要なプロパティのみをリストします。これは、単一の行には影響しないためです。
すべてブラウザーで完全に実行されます。 signup はなく、何もアップロードされず、ページが読み込まれるとツールはオフラインで動作し続けます。 flex プロパティがどのように相互作用するかを理解するための学習補助として、また、本番環境に対応した CSS を作成するための簡単な方法としても同様に役立ちます。プレビュー アイテムの数を変更し、頭の中のコンテナのサイズを変更し、スペース間が広がるナブバーであろうと、両方の軸を完全に中心としたヒーロー セクションであろうと、必要な配置を生成する宣言を読み取ります。
Flexbox Generatorの使い方は?
方向を選択してラップします
フレックス方向と、アイテムを複数の行に折り返すかどうかを選択します。
セットアライメント
プレビューがレイアウトと一致するまで、主軸で justify-content を調整し、十字軸で align-items を調整します。
チューンの間隔
アイテム間のギャップを設定し、ラッピングがオンの場合は、線を区切る位置合わせコンテンツを設定します。
CSS をコピーする
生成されたルールはライブで更新されます。ワンクリックでコピーし、スタイルシートに貼り付けます。
主な機能
ライブプレビュー
プロパティを変更すると、サンプルアイテムのコンテナが即座にリフローするため、コードをコピーする前にレイアウトが表示されます
Every Container Property
表示、フレックス方向、フレックスラップ、内容正当化、項目調整、内容調整、および 1 つのパネルからのギャップを制御します
What You See Is What You Get
プレビューでは出力と同じ宣言が使用されるため、コピーされた CSS は画面上にレイアウトを正確に生成します
クリーンな最小出力
生成されたルールは意味のあるプロパティのみをリストし、ラッピングがオンになるまで align-content を省略します
Frequently Asked Questions
Related Tools
CSS Border Radius Generator
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
CSS Box Shadow Generator
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset - then copy production-ready CSS.
CSS Unit Converter
Convert between CSS units - px, rem, em, pt and % - with a configurable root font size, instant all-units output, and a px-to-rem reference table for responsive typography.
CSS Gradient Generator
Create beautiful CSS gradients with live preview
Comments
0 comments
No comments yet. Be the first to share your thoughts!