等幅フレックスボックス列 — CSS ジェネレーター
CSS フレックスボックス レイアウトを視覚的に構築します。フレックス方向、コンテンツの位置調整、項目の配置、コンテナ上のフレックスラップとギャップに加え、子ごとのフレックスグロー、フレックスシュリンク、フレックスベースをすべてライブプレビューとコピー可能な CSS で実行できます。
処理中...
0%
結果
このページでは、3 つのプレビュー ボックスすべてに flex-grow: 1 がすでに設定されているジェネレーターが開きます。注目してください。内容に合わせて縮小するのではなく、すべてのボックスが行内の残りのスペースを同一の割合で共有します。これが、等幅の柔軟な列のレシピ全体です。幅のパーセンテージ、calc()、同期を維持するための固定ピクセル計算はありません。
flex-grow: 1 は子に拡大するように指示し、行内のすべての子にこれを設定すると、すべての子が同じ量だけ拡大することになるため、子の数やその中にどのようなコンテンツが含まれているかに関係なく、最終的には同じ幅になります。以下のコントロールを使用してボックスを追加または削除すると、残りの列が即座に再配分されて均等に保たれます。運用環境でこのレイアウト上でブラウザ ウィンドウのサイズを変更すると、同じように動作します。
これは、同じ高さのカード グリッド、価格表の列、均等に分割されたフッター セクションの背後にあるパターンです。 1 つの列の flex-grow を他の列の上に上げて、より多くのスペースを与えるか、クリーンな均等分割用に生成されたとおりに以下の CSS ブロックをコピーします。