Flexbox Alignment & Justification Without the Guesswork

Published: 06 September 2024
on channel: Kevin Powell
22,295
1.3k

Looking to get a very deep understanding of flexbox? Check out Flexbox Simplified: https://www.flexboxsimplified.com/

It's easy to mix up justify-content and align-items, and also, why don't we have a justify-self? In this video I take a look at some tricks to remembering the difference between the two of them, and better understanding why they work a little differently from one another.

🔗 Links
✅ Flexbox Simplified: https://www.flexboxsimplified.com/

Join my channel to get access to perks:
   / @kevinpowell  

⌚ Timestamps
00:00 - Introduction
00:25 - Using your devtools to play with different options
02:30 - The main and cross-axis
03:13 - The main axis has to focus on groups of content and the cross axis on individual items
06:45 - Changing the flex-direction
08:20 - align-content and flex-wrap
12:10 - You can use margins when you want justify-self

#css

--

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

Keep up to date with everything I'm up to
✉ https://www.kevinpowell.co/newsletter

Come hang out with me live every Monday on Twitch!
📺   / kevinpowellcss  

---

Help support my channel
👨‍🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-t...
📽️ Join as a channel member:    / @kevinpowell  
💖 Support me on Patreon:   / kevinpowell   or through YT memberships: Join this channel to get access to perks:
   / @kevinpowell  

---

My editor: VS Code - https://code.visualstudio.com/

---

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.

Twitter:   / kevinjpowell  
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell

---

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


Watch video Flexbox Alignment & Justification Without the Guesswork online without registration, duration hours minute second in high quality. This video was added by user Kevin Powell 06 September 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 22,295 once and liked it 1.3 thousand people.