Day 3: Flex Sizing (Grow, Shrink & Basis)

Daily Objective

Control how flex items grow, shrink, and wrap across lines.

1. Sizing Properties & Shorthand

• flex-wrap: wrap: Allows items to wrap onto multiple lines when space runs out.
• flex-grow: Factor specifying how much free space the item absorbs.
• flex-shrink: Factor specifying how readily the item shrinks.
• flex-basis: The initial size before growing or shrinking.
• flex shorthand: flex: <grow> <shrink> <basis>; (e.g. flex: 1 1 250px;).

.cards-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.card {
  flex: 1 1 280px; /* Grows, shrinks, default basis 280px */
}

Daily Hands-on Practice (70%)

1. Build a row of cards that wraps onto a new line when the window is resized.
2. Play Flexbox Froggy levels 11 through 18.