Suggest an editImprove this articleRefine the answer for “How does flex-wrap affect the alignment of elements?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**`flex-wrap`** does not align elements by itself, but once it is enabled (`wrap` or `wrap-reverse`) and the container has multiple lines of flex items, `align-content` comes into play to align the lines relative to each other. **Key point:** `flex-wrap` enables multi-line mode, which is why `align-content`, responsible for distributing the lines, starts to matter.Shown above the full answer for quick recall.Answer (EN)ImageWhen `flex-wrap` is enabled (`wrap` or `wrap-reverse`), the container may end up with **multiple lines of flex items**. In that case: - `justify-content` continues to **align elements along the main axis within each line** - `align-items` aligns elements **within a single line along the cross axis** - the `align-content` value 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.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.