CSS Flexbox 'align-items' vs. 'align-content' - Beginner Tutorial

In this tutorial, we look at the difference between "align-items" and "align-content" in CSS Flexbox.

Both properties are used to position flex items along the cross axis, which always runs perpendicular to the flex-direction.

"align-items" positions flex items inside their own individual row or column—depending on the flex-direction value—while "align-content" distributes space between and around flex items inside the parent container as a whole.

We'll look at examples in both single- and multi-row Flexbox layouts and hopefully clarify the different uses for each property.

I hope you find this video helpful. If you have any questions, please leave them in the comments below and I'll do my best to answer as soon as possible.

TIMESTAMPS:
00:00 Introduction
00:23 Using "align-items" with a single-row layout
02:13 Using other "align-items" values
03:44 Using "align-items" with multi-row layouts
07:27 How "align-content" works
11:21 Summary

WATCH NEXT:

[oca]

What a clear explanation! I was struggling so bad but now I fully understand the concept. Thank you so much!

[maystuk]

Best explanation on youtube!!! I was damn confused between these two properties and was unable to find a single video or article explaining the difference between the two clearly but you did it.

[nishasao]

omgg best explanation everrrr THANKYOUUU SO MUCHH FOR SO THANKSSSS A

[natures_prophet]

the best explanation I've ever seen

[osamaa]

That was the most concise explanation of align-items and align-content properties. ThankYou 😊

[kishor]

This video helped to clear this concept. Thank you so much. ♥
Please check below statement and give confirmation.

To understand align-items & align-content, we should have multiple grid items that are wrapped.

1) "align-content" property used to align the `lines of grid items` relative to CROS Axis.
The default value of "align-content" is set to "stretch" (align-content = "stretch"). It means `lines of grid items` are stretched to take up the remaining space.
This space is filled with `lines grid item` instead of `grid item` because "align-content" affects only `lines of grid items`. It feels like margin.
To fill the space with 'grid items' we have to set "align-content" other than stretch (flex-start/flex-end/center).


2) "align-items" property used to align the "only grid items" relative to CROS Axis.
If height of grid item is not auto / 100% then it will create the empty space around it.
This is because of default value of align-content property is applied (align-content : "stretch").
And to avoid this empty space we have to use align-content property with value other than stretch.

Am I right?

[ramses]

So far, this video is the best explanation for this topic on youtube

[drakegriffin]

Magnificent explanation with superb presentation. Many thanks!

[Rimmpula]

The most clear example I could find, thank you very much for this clear and concise explanation

[lmaolaoziroflaozi]

Extremely helpful! I didn't notice that the flex items are restricted to their rows when using align-items. Setting the height to a fixed value helped visualise this! I was getting confused with the align-items:stretch default value without setting the height to a fixed value, haha.

[iganic]

Thanks this is best explanation, and i have been reading nowrap as now wrap from one 2 week now i know its no wrap 🤣🤣

[aniekansamson-xwdj]

wowwww thanks a lot, this is the best explanation i have seen with regards the align items and align content thank you

[Crazyfish]

Thank you. Was struggling to get my head around this.

[wagnermelo]

The best explanation Ive seen so far on this subject!!! Thank you so much!!!

[minutenwaren]

Listen carefully my friend, he talks so precise 👾

[joshuamizal]

Thank you! I like how you explained it. Well done!

[kushalava]

Thanks alot sir! you've clearified my doubt

[LennWeltmeister]

Trully the only tutorial that could really explain how these properties work.

I'd just wanna know: is it possible to work with justify-items on a flexbox too?

[jotaroisdarius]

Just what I was looking for, thank u :)

[milindgour]

great and explanation, I subscribed and shared too, just keep uploading