Day 6: Flexbox II - Wrapping & Sizing

Yesterday we aligned items. Today we manage what happens when they run out of space.

Flex Wrap

By default, Flexbox forces everything onto one line, even if it squishes the content.

.container {
    display: flex;
    flex-wrap: wrap; /* Allow items to drop to new line */
}

This is essential for image galleries or card grids.

Gap

Gone are the days of margin-right: 20px (except for the last one). gap adds space between items only.

.container {
    display: flex;
    gap: 20px; /* Applies horizontally and vertically */
}

Flex Grow, Shrink, Basis

You can control individual items (.child).

flex-grow

“If there is extra space, how much do I take?” 0 (Default) = Don’t grow. 1 = Grow to fill space.

.sidebar { width: 200px; }
.main-content {
    flex-grow: 1; /* Take all remaining space */
}

flex-shrink

“If we are out of space, do I shrink?” 1 (Default) = Yes. 0 = No! Keep my size! (Useful for icons or fixed avatars).

.icon {
    flex-shrink: 0;
}

flex-basis

The “Ideal Size” before growing or shrinking. Similar to width but more powerful.

.card {
    flex-basis: 300px;
    flex-grow: 1;
}

Translation: “I want to be 300px, but if there is room, stretch bigger.”

---

Homework for Day 6:

1. Create a Gallery of 6 cards.
2. Use flex-wrap: wrap.
3. Give each card flex: 1 1 300px (Grow 1, Shrink 1, Basis 300px).
4. Resize your browser. Watch them stack perfectly.

Day 7: The heavy artillery… CSS Grid!