Align Items and Align Content

Free CSS Developer Roadmap 2026 CSS roadmap for beginners Learn CSS step by step roadmap Responsive CSS learning path

A complete FREE CSS Developer Roadmap to master layouts, responsiveness, and animations.

Both flexbox and grid are tricky to get your head around because both align-items and align-content resolve to ‘vertical’ alignment (cross axis). An easy way to remember it is: Items is one row, Content is a group of rows.

1. Align-Items (The “Single Row” Ruler)

Imagine align-items just as a command that controls the contents within one row. Provided that you have a single line of boxes, this property is useful because it controls where they will be placed.

stretch (Default): Items stretch to fill the container height.
flex-start: Items push to the top.
flex-end: Items push to the bottom.
center: Items sit perfectly in the middle of the row.
baseline: Items align based on the bottom of the text inside them.

2. Align-Content (The “Multi-Row” Ruler)

This only works when you have more than one row of items (eg, because flex-wrap: wrap). It increases the space between the rows.

Note: If you only have one row, align-content does absolutely nothing.

flex-start: All rows are bunched at the top.
flex-end: All rows are bunched at the bottom.
center: All rows are bunched in the center.
space-between: First row at the top, last row at the bottom, equal space between them.
space-around: Even space around every row.

The “Simple Words” Summary Table

Property	Works on…	Use it when…
align-items	Individual items	You want to move items up or down within their row.
align-content	The entire “block” of rows	You have wrapped items and want to move the rows themselves.

A Quick Example

Imagine a container that is 500px tall but your boxes are only 100px tall.

If you have one row and use align-items: center, that single row will sit in the middle of the 500px.
If you have three rows and use align-content: space-between, one row will stick to the top, one to the bottom, and one in the middle, spreading out to fill that 500px.

Pro Tip: These require you to have a specified height on the container (ex height: 500px or min-height: 100vh). If your container is only as tall as the items inside of it, there is nothing “extra” for them to be pushed into!