Flexbox Patterns

Pattern 1: Card row

Three cards distribute evenly and wrap on narrow screens using flex-wrap: wrap.

Card One

flex: 1 1 260px means grow, shrink, base width 260px.

Card Two

gap replaces margin — cleaner, works with wrap.

Card Three

Resize your browser. Watch the layout adapt.

Pattern 2: Centered hero

flex-direction: column + justify-content: center + align-items: center = perfect centering.

Centered Hero

Perfectly centered both ways using just 3 flex properties.