How does flex-wrap affect the alignment of elements?
When flex-wrap is enabled (wrap or wrap-reverse), the container may end up with multiple lines of flex items. In that case:
justify-contentcontinues to align elements along the main axis within each linealign-itemsaligns elements within a single line along the cross axis- the
align-contentvalue comes into play: it controls the alignment of LINES relative to each other, when there are several of them
In short
| Property | Works with wrap | What it aligns |
|---|---|---|
justify-content | yes | elements in a line (along the main axis) |
align-items | yes | elements within a line (along the cross axis) |
align-content | only if there are multiple lines | the lines themselves (along the cross axis) |
Conclusion: flex-wrap itself does not align elements, but it enables multi-line mode, which is why align-content, responsible for distributing the lines, starts to matter.
Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.