I have the following CSS setup using Flexbox:
.container { width: 350px; height: 500px; border: 2px solid black; display: flex; flex-wrap: wrap; align-content: stretch; align-items: stretch;}.container div { width: 80px; font-size: 2rem; text-align: center; background-color: lightblue;}<body><div class="container"><div class="box" style="background-color: #ff5722">1</div><div class="box" style="background-color: #ff9800">2</div><div class="box" style="background-color: #ffc107">3</div><div class="box" style="background-color: #ffeb3b">4</div><div class="box" style="background-color: #cddc39">5</div><div class="box" style="background-color: #8bc34a">6</div></div></body>When I add multiple items to the container, they wrap into multiple rows as expected. However, each item is stretching vertically, and I want to understand why that happens.
Is the following understanding correct?
When we have wrapping enabled via
flex-wrap: wrap, then by defaultalign-content: stretchwill kick in. This causes the flex lines (rows) to grow taller to fill the container’s cross-axis (vertical) space. Thenalign-items: stretchmakes the individual items within each line expand to fill the height of their line.
Any clarifications or visual explanations would be really helpful.
Reference
I’ve already read this helpful explanation on the difference between align-content and align-items:What’s the difference between align-content and align-items?