HTML & CSS · Junior · Question 72 of 75

Why do flex items in a row have equal height by default?

✓Correct answer: The default align-items: stretch stretches them to the line's height
2Flexbox always sets height: 100%
3It's a browser bug

Explanation

That is why cards in a row line up nicely. Set align-items: flex-start (or align-self on one item) to let items keep their content height.

Further reading

MDN: Basic concepts of flexbox ↗

Test yourself

Take the HTML & CSS · Junior quiz: questions and options are shuffled, and you get a review of your mistakes at the end.