Flexbox Layouts

Build real layouts with wrap, grow, and alignment patterns

Flexbox Layouts - Real Patterns

Flex Wrap

css

.grid { display: flex; flex-wrap: wrap; gap: 20px; }
.card { flex: 1 1 250px; }

Flex Grow (shorthand: flex)

css

flex: 1;           /* grow: 1, shrink: 1, basis: 0 - takes equal space */
flex: 2;           /* Takes twice the space of flex: 1 items */
flex: 0 0 200px;   /* Fixed 200px, no grow or shrink */

Centering Pattern

css

.hero { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 400px; }

Your Turn!

Create a card grid with flex-wrap, 6 cards each flex: 1 1 200px, gap 20px, centered.

💡Need a hint? (3 available)

#1flex-wrap: wrap lets items flow to the next row

#2flex: 1 1 200px = grow: 1, shrink: 1, minimum-basis: 200px

#3Use gap for spacing between all items

🔑Show solution (try it yourself first!)

<!DOCTYPE html>
<html><head><meta name='viewport' content='width=device-width, initial-scale=1.0'><style>
  * { box-sizing: border-box; }
  .grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; padding: 20px; }
  .card { flex: 1 1 200px; max-width: 280px; border: 1px solid #ddd; border-radius: 8px; padding: 20px; background: #f9f9f9; }
  .card h3 { margin-top: 0; }
</style></head><body>
  <div class='grid'>
    <div class='card'><h3>HTML</h3><p>Structure your web pages.</p></div>
    <div class='card'><h3>CSS</h3><p>Style with colors and layout.</p></div>
    <div class='card'><h3>Flexbox</h3><p>One-dimensional layouts.</p></div>
    <div class='card'><h3>Grid</h3><p>Two-dimensional layouts.</p></div>
    <div class='card'><h3>Forms</h3><p>User input collection.</p></div>
  </div>
</body></html>

🌐 HTML Editor

🖼️ Live Preview

← Build a Landing Page Next: The Box Model →