The how and why: align-items & align-content in flex and grid

It seems like we mostly ever use align-items, but it's important to know how align-content works as well.

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:42 - align-items with flex
02:34 - align-content with flex
08:19 - both of them with grid
09:59 - a practical example of align-content

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[FourEyedCoffeeMonster]

for specific item you can do it using align-self: end/start/stretch/center on the item

[SamCrowetheCreativeCrowe]

Thanks for helping me learn to love CSS. Flexbox has been a blindspot for me way too long. Not any more thanks to you teaching. Great fun! Keep up the good work!

[chefbennyj]

align-items: center and justify-content: center is a lifesaver. 😉😆

[welling]

I can NEVER remember the differences between these two!

[shovontunvir]

have you created any video for aspect-ratio? i don't understand what is aspect ratio and how it works really

[UnDash]

Heads up! align-content also applies to block and table contexts. A common way of cancelling out any flex or grid related properties would be to add display: block, for instance at a certain breakpoint. So better be careful with doing that in combination with align-content, since it could cause unexpected behaviours.
This was introduced in Chrome 123, Firefox 125 & Safari 17.4, and has apparently been in the specs for years.

[ahndeux]

Flexbox can be confusing when you do alignments and it does absolutely nothing. Now it makes just a wee bit more sense. The problem is there are 50, 000 ways to do the same thing and when you make changes and nothing happens, that is when you start ripping your hair out.

[isaiahphilbert]

Hi Kevin amazing video!! I just wanted to say I started coding because of you. You have Been my Inspiration from day 1. Love your videos and keep it up.

[yadusolparterre]

Is it me or there is a mistake in your page? Both containers are labelled align-items. Surely, one of them is supposed to be align-content?
EDIT - ah okay you fixed it later

[MarcelPirosca-cx]

Am I the only one who thinks the specs on Flex and Grid are inconsistent? I mean, you can use justify-content: center; by default, but then you need flex-wrap: wrap; to use align-content: center;
As much of an improvement Flex was to float, this still doesn't feel 100% where it should be. The fact that people constantly confuse one with the other indicates this point.

[hassaanahmed]

Sir your teachings are blessing upon us, Thanks again!! ♥

[axelcasguz]

You're awesome! even when I'm not woking time I spend it seeing your videos. Thank you very much to YOU and your

[nomadshiba]

didnt watch the video but basically
for both `align` and `justify`
`content` aligns or justifys the invisible `grid` or `flex` areas(columns and rows)
`item` aligns or justifys the stuff inside those areas

for example you can have a, grid with two 1fr or 50%, 50% columns
lets say the total width of the grid is 100
so two of the content areas are 50
if you have an element with the width of 20 in there
and you dont wanna stretch it but center it, you can use justify-items: center

[prashankgupta]

Thankyou! I was searching for this only

[toma]

Vertical alignment of course. If I have a row with 3 testimonials or comments, 3 of them in the same row (on big screens of course). I want the footer to be really at the bottom, which contents the author of the comment, even when he just commented one word instead of ten lines.

So, I don‘t want the footer to be right immediately after the comment, below, but I want it at the bottom. I achieved it after several experiments and using align-self-end (Bootstrap); the flex-end in the CSS file didn‘t work. I used a 3rd. party code, and the parent: flex and flex-column because all items are in vertical alignment.

[norvisnorvis]

I just built an illustration of a mobile device, and flexbox align and justify dawned on me. Thanks for the content Kevin.

[MatheusLino]

Awesome, Kevin! You have one of the best youtube channels nowadays! I love spending my spare time watching your videos! Thank you! 🙌

[SouravTechLabs]

11:02 - Congrats 🎉🎉 Thanks for letting us know that your h1, paragraph, and then the div with buttons are all your direct children! 🤪🤪

[joekustek]

Can you give examples of where you actually use everything you talk about in real life work you do?

[troyjosehipona]

Thank you! I always watch your video to solve my front end mentor lol!