🎯 Lesson 10: Flexbox Alignment & Wrapping

Flexbox gives you powerful control over how items align and wrap inside a container. Once you master alignment, you can make your UI dance like a pro.

---

1. Wrapping with flex-wrap

By default, Flexbox tries to fit all items into one line, shrinking them if needed. Use flex-wrap to let items wrap into multiple lines.

.container {
  display: flex;
  flex-wrap: wrap;
}

• nowrap – default behavior, single line
• wrap – wrap items to the next line
• wrap-reverse – wrap in reverse order

2. Cross-Axis Group Alignment: align-content

When items wrap onto multiple lines, align-content controls the spacing between those lines (not individual items).

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}

• flex-start – pack lines at the top
• center – center the lines
• space-between – even spacing between lines
• space-around – spacing around lines
• stretch – fill the container (default)

3. Individual Item Alignment: align-self

Sometimes, you want one item to break the rules. Use align-self to align a specific item differently from others.

.item-special {
  align-self: flex-end;
}

• auto – inherits from align-items
• flex-start, center, flex-end
• stretch – fill the container height

⚡ Pro Tip

Flexbox alignment is based on the container’s size and direction. Test with different container heights and directions (row vs column) to really understand how it behaves.

---

✅ Recap

• Use flex-wrap to control if items wrap onto new lines
• align-content controls alignment between wrapped lines
• align-self lets you override alignment per item

Up next? You’ll use this to build real layouts, grids, cards, navbars, and more. Flexbox is the backbone. Master it and you’ll laugh in the face of layout bugs.