When the row runs out of room
On a phone, five tags won't fit in one line. Wrapping lets items flow onto new lines, and flex sizing decides how items grow and shrink. Plus: the famous two-line trick for centring anything.
Wrap, grow, shrink, basis
- flex: 1 1 200px = grow, shrink, and a starting size (flex-basis) of 200px.
- flex: 1 — all items share space equally.
- flex-shrink: 0 — never squash this item (handy for icons).
- Centring: display: flex; justify-content: center; align-items: center; on the parent.