Flexbox: Cards That Wrap

A flex row is one line. With many cards in a narrow window, the cards shrink to fit and get squeezed. flex-wrap: wrap lets the row break: when the next item doesn't fit, it starts a new line. gap puts the same space between the items in a line and between the lines.

The items size themselves with the flex shorthand. It has three values: grow, shrink and basis. flex: 1 1 200px means: start 200px wide, grow to share the free space, and shrink when you must. On another list it could look like this:

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  flex: 0 0 auto;
}

A list also comes with its own style: a bullet before each item and padding on its left. A row of cards needs neither: list-style: none and padding: 0 take them away.

The grader's browser draws nothing, so the check can't see where the cards land or how wide they are: that's for your eyes, in the Your page picture. It prints the declarations that win on the list and on each card. Your stylesheet must make it print:

> the style of .products (1 element, window 1024 px wide)
  ul.products "Mug $12 Buy Notebook Out of st"
    display: flex   <- .products
    flex-wrap: wrap   <- .products
    gap: 16px   <- .products
    list-style: none   <- .products
    padding: 0   <- .products
> the style of .card (3 elements, window 1024 px wide)
  li#mug.card "Mug $12 Buy"
    flex: 1 1 200px   <- .card
  li#notebook.card.sold-out "Notebook Out of stock $7 Buy"
    flex: 1 1 200px   <- .card
  li#lamp.card.sale "Lamp Sale $29 Buy"
    flex: 1 1 200px   <- .card

Your task: at the end of styles.css, write a .products rule with display: flex, flex-wrap: wrap, gap: var(--gap), list-style: none and padding: 0. Then, in the second .card rule, below margin-bottom, add flex: 1 1 200px.

Assignment
Follow the Coding Tutorial to turn the cards' list into a flex row that wraps into lines, and to give every card a 200px start that grows and shrinks.

Hint
display, flex-wrap and gap go on the list, the parent; flex goes on the cards, the items. Use the second .card rule, the one with margin-bottom: the check prints flex: 1 1 200px <- .card for all three cards.