Learn flexbox the easy way
680,698
Published 2021-12-23
Get the flexbox properties cheatsheet here: kevin-powell.ck.page/25792a66b4
đź”— Links
âś… Navigation demo - starting point: codepen.io/kevinpowell/pen/JjrKmwy
âś… Navigation demo - ending point: codepen.io/kevinpowell/pen/oNGZRLO
âś… 3 columns demo - starting point: codepen.io/kevinpowell/pen/oNGLaKq
âś… 3 columns demo - ending point: codepen.io/kevinpowell/pen/mdBWYry
âś… Deeper dive into the math of flex-grow and flex-shrink:    • Flexbox is more complicated than you ... Â
âś… Learn CSS Grid the easy way:    • Learn CSS Grid the easy way Â
⌚ Timestamps
00:00 - Introduction
01:41 - What we are starting with
02:17 - What happens when we declare display: flex
07:06 - flex-grow
11:13 - Dealing with more content
14:49 - Making even columns
20:31 - flex-direction
23:56 - justify-content
26:23 - problems people run into with justify-content
29:12 - align-items
#css
--
Come hang out with other dev's in my Discord Community
đź’¬ discord.gg/nTYCvrK
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
đź“ş www.twitch.tv/kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
đź‘• Buy a shirt: teespring.com/stores/making-t...
đź’– Support me on Patreon: www.patreon.com/kevinpowell
---
My editor: VS Code - 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: twitter.com/KevinJPowell
Codepen: codepen.io/kevinpowell/
Github: 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
All Comments (21)
-
I missed the guy who inspires people who are currently on The Odin Project and comes to these excellent videos. So I'm commenting to all the learners, I know it's difficult, but you got this!
-
As a professional bodybuilder, this really helped me to properly display my flexes, thanks 10/10 would watch again
-
The Odin Project brought me here and maaan, what a teacher!!! Congratulations.
-
Seeing a senior acknowledging how css can sometimes be frustrating gives me some confidence. I'm no dumb then and It will get better lol
-
This was incredibly useful. I've been using Flex box for ages, but never understood several aspects you covered. Thank you very much for this.
-
The timing of me seeing this couldn’t have been better. Your channel is AMAZING for explaining CSS and realising how great it can be
-
Hey Kevin! I'm starting to learn everything about web development and your channel is helping me out a loooot! I would like to thank you for such an extremely good content. You're really fun while teaching!
-
I love your style of explaining how those things works. Most other people just show what you can do, but never touch the subject of why it works or doesn't. Really helps the understanding.
-
It's thanks to your videos that I am still this invested in learning CSS without being terribly frustrated. Every time there is a mess in my head about something I just look at your videos and I am back on track with clear understanding of the subject! Truly grateful for your help :)
-
This was super helpful. I have started a software developer course and have been finding it a bit confusing when it comes to flex. Seems much more straightforward now thanks.
-
Best video on YT for flexbox. This video is even better than your older videos. Thanks Kevin.đź’Żđź’Żđź’Ż
-
It doesn't matter how much I think I know about something. Everytime I watch a Kevin Powell video I lean something new! Keep up being our Front-End dude!
-
This is honestly the best explanation about flexbox I have seen. Thanks Kevin.
-
Really excellent video. I find CSS content explaining the underlying mechanics of different rules like this are very lacking. It's mostly just how to achieve a certain style/layout and you have to figure out the mechanics along the way. This type of content is priceless
-
This just clarified some big issues that I was having with Flexbox - mainly not responding how I expected it to. Thanks so much, Kevin!
-
By far the best source of information of any kind when it comes to flexbox. I've been trying to learn it for the last 3 or so weeks and every time I think i start to get it, flex starts going crazy and I become lost again.
-
i love the simplicity of your work, i understood a lot even as a beginer
-
The video is amazing! I keep coming back to watch this video every once in a while to make sure my understanding of flexbox is correct.
-
Thank you so much kevin. I've been strugging with flex box for a while now and this really helped me.
-
Oh my god, that helped me a lot. Im just beginning my journey and i was stuck on flexbox because i knew how important it is to understand it, now its all clearer. Thanks !
