css · level 2 · unit 2 · lesson 4
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
Wrap plus grow makes cards that on any screen.
Mix what you know: flex-wrap: wrap on the parent, and flex: 1 1 200px on each card. Every card starts at 200px, wraps when it cannot fit, then grows to fill its line.
A phone gets one card per line and a laptop three or four. Nothing tells the cards how many to show. They reflow, rearranging themselves for the room they have.
When the last line holds fewer cards, they grow wider than the rest. That is how flex works: each line shares out its own free space.
<div class="cards">
<div class="card">Pasta</div>
<div class="card">Curry</div>
<div class="card">Tacos</div>
<div class="card">Ramen</div>
</div>.cards {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
flex: 1 1 200px;
padding: 24px;
background-color: lavenderblush;
}Press show my page to see it here.
On a phone the four cards stack; on a wide screen they share one line.
guess first
What does flex: 1 1 150px give each tile?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<div class="tiles">
<div class="tile">Red</div>
<div class="tile">Green</div>
<div class="tile">Blue</div>
</div>.tiles {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tile {
flex: 1 1 150px;
padding: 16px;
background-color: gainsboro;
}your turn
Your turn. Build a reflowing pet board.
Let the board wrap, and give each pet card a flex that grows, shrinks and starts somewhere from 120px to 250px.
the page you’re styling
<div class="board">
<div class="pet">Rex</div>
<div class="pet">Pickles</div>
<div class="pet">Biscuit</div>
<div class="pet">Luna</div>
<div class="pet">Mango</div>
</div>your css
Press show my page to see it here.
- the board wraps onto new linesnot checked yet
- the cards grow to fill each linenot checked yet
- the cards can shrinknot checked yet
- the cards start from 120px to 250pxnot checked yet
fix it
The cards squash onto one line on a phone. Fix it!
the page you’re styling
<div class="cards">
<div class="card">Breakfast</div>
<div class="card">Lunch</div>
<div class="card">Dinner</div>
<div class="card">Pudding</div>
</div>your css
Press show my page to see it here.
- the cards can still wrapnot checked yet
- each card starts at a real sizenot checked yet
flex: 1sets the basis too. What does it set it to?- With a basis of
0%, the cards almost never run out of room, so they hardly ever wrap. - Change it to
flex: 1 1 200px;, then press run.
nailed it
your cards fit any screen. :D
flex-wrap: wrapplus a realflex-basismakes cards reflow.- Each line shares out its own free space.
flex: 1starts at nothing, so cards hardly ever wrap.
new words in your collection
- reflow
This lesson isn’t saved. A free account remembers every lesson you finish.