I'm trying to understand how align-items: flex-end behaves in a flex container with wrapping enabled. According to the documentation, align-items aligns items within a single flex-line, so I expected each row of items to align within its own line.
However, when I apply align-items: flex-end, it seems like both rows are pushed to the bottom of the container, which is confusing.
.container { width: 350px; height: 350px; border: 2px solid black; display: flex; align-items: flex-end; flex-wrap: wrap;}.container div { width: 80px; height: 100px; 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>Question:
Why is align-items: flex-end moving both rows to the bottom of the container?
Isn’t align-items supposed to affect items within each individual flex line, not the lines themselves?