What's the difference between align-content and align-items?

css layout flexbox alignment
Dinh picture Dinh · Dec 18, 2014 · Viewed 124.8k times · Source

Can anybody show me the difference between align-items and align-content?

Answer

Asim K T picture Asim K T · Jan 22, 2016

The align-items property of flex-box aligns the items inside a flex container along the cross axis just like justify-content does along the main axis. (For the default flex-direction: row the cross axis corresponds to vertical and the main axis corresponds to horizontal. With flex-direction: column those two are interchanged respectively).

Here's an example of how align-items:center looks:

align-items: center

But align-content is for multi line flexible boxes. It has no effect when items are in a single line. It aligns the whole structure according to its value. Here's an example for align-content: space-around;: enter image description here

And here's how align-content: space-around; with align-items:center looks: enter image description here

Note the 3rd box and all other boxes in first line change to vertically centered in that line.

Here are some codepen links to play with:

http://codepen.io/asim-coder/pen/MKQWbb

http://codepen.io/asim-coder/pen/WrMNWR

Here's a super cool pen which shows and lets you play with almost everything in flexbox.

Related questions

Scrolling a flexbox with overflowing content

Here's the code I'm using to achieve the above layout: I omitted the code used for styling. You can see all of it in the pen. The above works, but when the content area's content overflows, it makes the whole …

Read More
Fill remaining vertical space with CSS using display:flex

In a 3-row layout: the top row should be sized according to its contents the bottom row should have a fixed height in pixels the middle row should expand to fill the container The problem is that as the main …

Read More
Horizontal masonry layout with flexbox CSS only

I'm trying to create a horizontal masonry layout using only CSS and flexbox. The problem I'm having is there are vertical gaps between the elements, without using align-left: stretch; is it possible to close the gaps? .card-container { display: flex; flex-direction: …

Read More