css · level 2 · unit 2 · lesson 2
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
Flex children to the full height of the row.
Unless told otherwise, flex children stretch along the cross axis. In a row, every child grows as tall as the tallest one. That is why cards in a flex row come out the same height.
Often that is what you want. When it is not, align-items: flex-start lines the children up at the top, flex-end at the bottom and center halfway.
lines them up by their text instead. The baseline is the invisible line letters sit on, so a big title and small words read as one line.
<div class="row">
<div class="card">Short</div>
<div class="card">A much longer card, with lots and lots of words that wrap onto several lines</div>
</div>.row {
display: flex;
gap: 12px;
}
.card {
padding: 12px;
background-color: lightyellow;
}Press show my page to see it here.
Add align-items: flex-start; to .row and the short card shrinks back to fit its words.
guess first
A button next to a tall picture. How tall is the button?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<div class="offer">
<img src="cake.svg" alt="A cake">
<button>Buy cake</button>
</div>.offer {
display: flex;
gap: 12px;
}
img {
width: 120px;
height: 120px;
}
button {
background-color: gold;
}your turn
Your turn. Line the words up by their letters.
Make the big heading and the small link line up so their letters sit on the same invisible line.
the page you’re styling
<div class="top">
<h2>Top films</h2>
<a href="https://example.com/films">View all</a>
</div>your css
Press show my page to see it here.
- the letters share one linenot checked yet
fix it
The red icon should stay at the top, not stretch. Fix it!
the page you’re styling
<div class="notice">
<span class="icon">!</span>
<p>Your library books are due back on Friday. Renew them online or at the front desk.</p>
</div>your css
Press show my page to see it here.
- the icon stays at the topnot checked yet
- The icon still stretches, so the browser skipped something. Which value?
align-itemshas notop. The start of the cross axis has another name.- Change
toptoflex-start, then press run.
nailed it
you tamed the stretch. :D
- Flex children stretch on the cross axis unless told otherwise.
flex-start,centerandflex-endstop the stretch.baselinelines children up by the letters of their text.
new words in your collection
- stretch
- baseline
This lesson isn’t saved. A free account remembers every lesson you finish.