Going Beyond the Line

By default, Flexbox tries to " shove " everything into one line, even if it hurts the elements and they compress beyond recognition.

1. flex-wrap

• nowrap (default): Compress to the last.
• wrap: If no space — move element to new line.

2. align-content (Don't confuse with align-items!)

This property appears ONLY if you have wrap enabled and there's more than one line. It controls space distribution between lines.

• If you have one line, align-content won't work.