CSS フレックスボックス ジェネレーター

フレックスボックス レイアウトには、コンテナーのプロパティ (flex-direction、justify-content、align-items、flex-wrap、gap) と各子のプロパティ (flex-grow、flex-shrink、flex-basis) という 2 つの個別のルールブックがあり、これらを混同することが、「なぜ期待どおりにセンタリング / 拡大 / ラップしないのか」というバグの最も一般的な原因です。このジェネレーターは両方のルールブックを同時に画面に表示します。コンテナー コントロールまたは子自身のフィールドを変更すると、番号付きの色分けされた 3 つのボックスがすぐに更新されるため、原因と結果が常に表示されます。

コンテナ側はすべてのレイアウト軸をカバーします。方向を選択し、justify-content を使用して主軸に沿って子を配置する方法を選択し、交差軸上に子を配置し、新しい行に折り返すかどうかを決定し、子の間にマージン ハックの代わりにギャップを設定します。子側も同様に現実です。ボックスを最大 8 つまで追加し、2 つまで削除し、それらのいずれかに独自の flex-grow、flex-shrink、flex-basis を与えます。ジェネレーターは、そのうちの少なくとも 1 つがブラウザーのデフォルトと異なる場合にのみ、子ごとの CSS ルールを出力します。そのため、コピーされたコードは、必要のないボックスに flex-grow: 0 を埋め込むことはありません。

プリセット ページは、人々が実際に名前で検索しているレイアウトに直接ジャンプします。 div を中央に配置する方法 (CSS レイアウトで最もよく聞かれる質問は、justify-content と align-items を両方とも center に設定することで解決しました)、ロゴ左リンク右ナビゲーション バー、flex-grow による等幅の柔軟な列、および近縁の space-between とその近縁の space-around および space-equiply の並べて比較。

このサイトのすべてのツールと同様、ジェネレーターは無料で、完全にブラウザー内で実行されます。アップロードやアカウントは不要で、ページが読み込まれるとオフラインで動作し続けます。