Flexbox Generator

Flexbox Generator は、CSS フレキシブル ボックス レイアウトの視覚的な遊び場です。メニューとギャップ スライダーを使用してコンテナのプロパティを設定し、ライブ プレビューでアイテムをリアルタイムで並べ替えるのを見て、プレビューが使用している正確な CSS をコピーします。これにより、どのプロパティが何をしているかを記憶する際の推測が排除されるため、ブラウザ開発ツールで試行錯誤することなく、行、列、中央のレイアウト、またはカードのラッピング グリッドを構築できます。

ここでは、典型的な navbar を構築している CSS flexbox ジェネレーターです。 defaults から始めて、justify-content を space-between に、align-items を center に設定します。 5 つのプレビュー アイテムは行の端まで広がり、生成された CSS ボックス リストには次の表示が表示されます。 flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 16px; flex-wrap をラップに変更すると、アイテムがラップできる場合にのみ重要になるため、align-content ラインが表示されます。 gap を 0 にドラッグすると、ギャップ ラインはルールから外れます。

Flexboxは1 次元のレイアウトモデルです: アイテムは主軸に沿ってレイアウトされ、クロス軸に整列されます コンテナは6 つのプロパティを通してほとんどすべてを駆動します flex-directionは主軸とそれが前後に走るかどうかを選択します justify-contentは主軸に沿って空き領域を分配します align-itemsはアイテムをクロス軸に配置します flex-wrapはアイテムが新しいラインにオーバーフローするかどうかを決定し、ラッピングがオンのときにそれらのラインをalign-contentスペースがマージンなしでアイテム間に一貫した間隔を追加します。

このツールはそれらのプロパティをすべて一箇所に公開し、結果をすぐに表示します。 プレビューは出力ボックスに表示されるのと同じ宣言でレンダリングされるため、表示される内容は、CSS をスタイルシートに貼り付けると正確に取得されます。生成されたルールは、デフォルトで.container クラスをターゲットにし、ラッピングが有効になっている場合にのみ align-content を含む重要なプロパティのみをリストします。これは、単一の行には影響しないためです。

すべてブラウザーで完全に実行されます。 signup はなく、何もアップロードされず、ページが読み込まれるとツールはオフラインで動作し続けます。 flex プロパティがどのように相互作用するかを理解するための学習補助として、また、本番環境に対応した CSS を作成するための簡単な方法としても同様に役立ちます。プレビュー アイテムの数を変更し、頭の中のコンテナのサイズを変更し、スペース間が広がるナブバーであろうと、両方の軸を完全に中心としたヒーロー セクションであろうと、必要な配置を生成する宣言を読み取ります。