Tailwind CSS
/Intermediate
Align Content
Definition
Utilities for controlling how rows are positioned in multi-row flex and grid containers.
Explain Like I'm New
If you have so many flex items that they wrap onto a second or third row, `align-content` decides how those ENTIRE ROWS space themselves out vertically.
Real World Example
A product gallery that wraps onto 3 rows. Using `content-between` ensures the top row touches the top of the container, the bottom row touches the bottom, and the middle row sits perfectly in between.
Common Use Cases
- •Multi-line flex containers
- •Image galleries
Interactive Example
Interview Questions
basic
- Does `content-center` do anything if your flex items are all on a single line?
intermediate
- What class must be present on the flex container for `align-content` to have any effect at all?