Wrapping and Growing
We've added two things to the "Our Cats" section. Under the heading, there's a row of labels saying what all our cats have. Below the cards, there's an orange box where visitors can sign up for news by email. Both rows are already flex containers with the classes flex gap-2. Scroll down in the preview to see them.
Look at the labels: in a narrow preview, they don't fit in one row, so they shrink, and their text breaks into two lines. As you know from the CSS course, a flex container keeps all its items on one line. These classes say what happens when the items don't fit, or when there's space left over:
| Class | CSS | What it does |
|---|---|---|
flex-wrap | flex-wrap: wrap; | The items that don't fit move to the next line. |
flex-nowrap | flex-wrap: nowrap; | All the items stay on one line (the default). |
grow | flex-grow: 1; | The item grows into the free space. |
flex-1 | flex: 1; | The item grows from a starting size of zero, so it takes all the space the other items leave. |
shrink-0 | flex-shrink: 0; | The item doesn't shrink: it keeps its size. |
Flex items shrink by default (flex-shrink: 1), but at most to the width of their longest word. That's what is happening to our labels. shrink-0 forbids an item to shrink at all. It's useful for things that must keep their size, such as a small round picture next to a long text: without shrink-0, it would get squeezed into an oval.
Instructions
Add the class flex-wrap to the list of labels (the ul under the "Our Cats" heading). The labels that don't fit move to the next line, and the text of each label stays on one line. (If all five fit in your preview, they stay in one row.)
In the orange box, the email field is only as wide as browsers make fields by default. Add the class flex-1 to the field (input): it grows and fills the row up to the Subscribe button.
In the Preview width bar above the preview, click 375 px, the width of a phone. A form field can't get narrower than its default width, so the button doesn't fit next to it and sticks out of the box. Add the class flex-wrap to the form (form) too: when there's no room, the button moves below the field. Then switch the preview back with the Fit button.
Start programming for free
5/11