Learn flexbox the easy way

Подписаться 910 тыс.

Просмотров 673 тыс.

50% 1

🎓 I have a course dedicated to Flexbox! flexboxsimplified.com
Get the flexbox properties cheatsheet here: kevin-powell.ck.page/25792a66b4
🔗 Links
✅ Navigation demo - starting point: codepen.io/kevinpowell/pen/Jj...
✅ Navigation demo - ending point: codepen.io/kevinpowell/pen/oN...
✅ 3 columns demo - starting point: codepen.io/kevinpowell/pen/oN...
✅ 3 columns demo - ending point: codepen.io/kevinpowell/pen/md...
✅ Deeper dive into the math of flex-grow and flex-shrink: • Flexbox is more compli...
✅ Learn CSS Grid the easy way: • Learn CSS Grid the eas...
⌚ 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
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / 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 RU-vid channel, make sure to follow me on Instagram and Twitter.
Twitter: / 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 awesome!

Опубликовано:

23 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 447

@rafihasan7787 8 месяцев назад

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!

@sylviabellie4297 6 месяцев назад

Aww thats so sad I loved seeing those comments! Thanks for taking that place 👑

@bien_venu 5 месяцев назад

Thank you! All of this reading can get overwhelming, but it's totally worth it. Keep pushing guys 🦾

@plantifulalexandra 3 месяца назад

@abdelhakimhamidi-zv4qs Месяц назад

where are you now after 6 month

@rafihasan7787 Месяц назад

@@abdelhakimhamidi-zv4qs Caught up in a 9-5 job, things got difficult so I didn't even write a single line of code in the last 3 months 😢 Will try to get back on track starting from April.

@Jugement 2 года назад

As a professional bodybuilder, this really helped me to properly display my flexes, thanks 10/10 would watch again

@wollie1769 2 года назад

Lol

@DoubleADwarf 2 года назад

Programming 🤝 Bodybuilding Flex Displays

@yawsonenoch6448 2 года назад

😂😂😂😂

@hrushilgawande7222 2 года назад

lol🤣

@seanorathagain1479 2 года назад

Lay off the juice bro, its fucking your head UP!

Год назад

The Odin Project brought me here and maaan, what a teacher!!! Congratulations.

@wotizit 5 месяцев назад

Thor?

@issamramdani825 5 месяцев назад

How is the Odin project going for you? did you finish it ?

5 месяцев назад

@@issamramdani825 I haven’t finished it yet! Still a LOT to learn, but I know I’m improving everyday with TOP.

@Codebyakshay 28 дней назад

Am i missing something? Whats odin project bro explain

@parvejshahlabib9167 26 дней назад

I am here for 2nd times from the odin projects after two year doing the same things😅

@AlexBlack-xz8hp 2 года назад

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.

@JaspreetSingh-ci9xs 2 года назад

Same

@vladrileynavilys Год назад

yup, i think it's not a big stretch to say the naming of these properties was poorly thought out, if most people are struggling to make it intuitive enough after some time of use.

@SEE_DESCRIPTION Год назад

Bruh he knows where a beginner gets stuck.... May ram ji keep him happy forever 😊

@ahmedtoufahi5198 Год назад

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

@MatthewCable-wh4qd 11 дней назад

Kevin! You're a breath of fresh air in a stifling, insalubrious world full of computer programmers who suck at teaching :)

@jackc.5271 Месяц назад

I've been stuck on a flex exercise in TOP for almost a week now, was searching for solutions and found this video. Half an hour after watching, I completed the exercise almost flawlessly. Thank you good sir.

@kenmken 2 года назад

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

@bonenintomatensaus Год назад

content-type: priceless!important

@WhatsMyNameAgain93 2 года назад

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

@giulyanv 2 года назад

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!

@bl7937 2 года назад

All of your videos are extremely helpful and greatly appreciated!

@haibaidzokwomandre1468 2 месяца назад

I am taking the Meta frontend on coursera and fullstack open by uni of Helsinki but I always refer to TOP to get a deeper knowledge on fundamentals. Thanks for this great content.

@parvejshahlabib9167 26 дней назад

Hey there, I following the TOP and it's excellent. Can you tell me what do after finishing TOP

@official_bqpro 20 часов назад

@@parvejshahlabib9167 hi, am also doing TOP, where are you located in ?

@user-jm5lr8xc5z Год назад

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.

@mueblenudecarpinteriacancu8616 3 месяца назад

how does this video only have 22k likes!??!?! kevin oure tha mastah of the mastah's thanks for all your videos!.... and TOP fellas hang in there and keep grindin!

@TechnicolorMammoth 2 года назад

Definitely part of the, “been using this for years…didn’t really understand the how”, which absolutely bugs me. I hate not understanding how something works. Honestly to a detriment as I’ve gone through so many resources wasting the most precious resource: time. I’ve been using HTML and CSS a long time, but your videos are really helping me fill-out and polish those skill sets in a productive and efficient manner!

@chenellesgameplays Год назад

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 :)

@liliponds 3 месяца назад

TOP - Adding my first ever comment on RU-vid, maybe I was saving it for a special moment - here it is - for The Odin Project(TOP) community. It is great to see everyone making progress, at their own pace but moving forward together, best of luck!

@garyenglish1221 2 года назад

You are an absolute star. Thank you SO much for all of your wonderful tutorials.

@godwinolokor9372 Год назад

This is honestly the best explanation about flexbox I have seen. Thanks Kevin.

@kanavchopra7333 2 года назад

Best video on YT for flexbox. This video is even better than your older videos. Thanks Kevin.💯💯💯

@waardal 2 года назад

Great video Mr. Kevin, I'm glad we have such a nice person here! Helped me so much.

@saco1980 2 года назад

Thanks Kevin! Really enjoy your videos, and the way you explain things.

@DCDLaserCNC 2 года назад

This was a great tutorial! You explained everything very well. Thank you!

@ciano8999 2 года назад

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.

@benderbg Год назад

Amazing 30 min of Flexbox basics. Cheat sheet is great as well. Thanks Kevin!

@neurofit862 2 года назад

GREAT TUTORIAL!! Super useful. I am doing your conquer responsive desing challenge and It works amazing too. Thanks a lot Kevin :)

@adetorofatiha7194 Год назад

Thank you so much kevin. I've been strugging with flex box for a while now and this really helped me.

@PhilWilkinsonMusic Год назад

This was a really fantastic tutorial, so well explained. Big thanks for that!

@iamreg1965 2 года назад

Brilliant video Kevin. Giving real world examples of the inner workings is a real help to getting under the skin of CSS Flex. Keep up the good work mate. Merry Xmas and a very Happy CSS New Year.

@carlingrant7389 Год назад

This is great. This explanation somehow covered a lot of information but was still so simple.

@ABUHMOSES Год назад

i love the simplicity of your work, i understood a lot even as a beginer

@Eltonlin1998 3 месяца назад

This is incredible, not just the visuals, but the words too e.g. "they start off at with the same width, they grow/shrink at the same RATE, so they end up with equal size"

@leodelcastanher 2 года назад

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!

@sharlayoub 2 года назад

This incredibly useful and clear. Thank you for the explanation!

@izzyberaja4939 2 года назад

Great video again Kevin! Would love to see a video about css styles in something like React Native since they have a ton of default css values and a lack of some css properties

@Soulja2x69 Год назад

This is the style of teaching I've been craving! You have just become my mentor 😁

@drawdownwind6636 Год назад

This tutorial cleared up alot of the issues I've been having! Thanks!!!

@Zach-rw6jf 2 года назад

Thank you so much! I've primarily been a backend developer and my latest project is requiring more front end work. This just solved many of my problems.

@MattNasty 2 года назад

Wow, this video is top shelf 👏 thank you for spending the time to create this simple breakdown.

@cameronkuom8168 Год назад

Thank you Kevin! This video was very helpful and helped me wrap my head around flexbox as a concept.

@askhatarslanov6327 2 года назад

Oh, thank you for starting and ending points. It's really helpful!

@janebenson9205 Год назад

Thank you for bringing clarity to Flexbox!

@waleedmumtaz 2 года назад

Learned a lot from this one. Thanks Kevin! ❤️

@johnsondev169 6 месяцев назад

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.

@aamiramin6112 2 года назад

Thank you for making such an amazing content. I have learned so much from you.

@adrianpabloalvarez2523 Год назад

Definitely helped to come into peace with CSS. Very good video. Thank you!

@abouzarazarpira6198 2 года назад

by far the best flexbox tutorial I've seen so far

@Manas-co8wl 5 месяцев назад

You taught me so much about flex I feel like I can almost program the behavior elsewhere. Thank you so much

@cxdimarco 2 месяца назад

This just clarified some big issues that I was having with Flexbox - mainly not responding how I expected it to. Thanks so much, Kevin!

@burakarslan24 Год назад

I had been struggling with understanding flex box until I came across your channel .Thank you for this incredibly useful video :)

@GR_BackingTracks Год назад

When I'm supposed to be applying for work, I watch educational videos, and that is when I learn the best... Thanks, Kevin!

@JaradDeLorenzo Год назад

I've never dreamed Fred Armisen could teach me so much about flexbox ! This was extremely well done. Thank you sir.

@hazimdikenli 2 года назад

Great content, I like and follow your videos , this one was very educative for me, I never noticed that main axis and cross axis would change based on the direction before.

@renebesicke 2 года назад

Very helpful! Had exactly one of the issues you mentioned here some days before. Fixed it, but thanks to this video I hopefully never get this issue again. Thank you. :D

@silasowu4502 Год назад

Rich content, Kevin. I just relearned it again and even recommended it. Thanks a lot

@eumm11 2 года назад

Thank you so much, everytime time I watch you I learn something new!

@CoconutwCoco Год назад

This is exactly what I want to hear when I am seeing display flex does its thing! I have been checking but u r the one tells the fundamental abt it! Got me excited to clear a confusion n know in depth!

@pioleonardo Год назад

perfect explanation. I can now teach this to students. thank you Kevin!

@BUGPLAYS Год назад

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.

@agustinvis5720 Год назад

I watched A LOT of videos about flexbox. This is, by far, the best video about flexbox I had ever seen. You explained everything one always wants to know about why everything works the way it does (I'm sure there's more to explain, but this video deserves 5 stars). Thank you very very much, and congratulation on you great channel. I watch this channel a lot.

@Kr0n3kLe 5 месяцев назад

This explanation was so good, thank you!

@boheeatelier6681 5 месяцев назад

such great tutorials, glad I found your channel, thank you!

@edgarv9035 2 года назад

Thanks a lot for this. You have made it simple and clear to understand

@bulatvitalie8170 2 года назад

Just awesome and clear. Thanks Kevin.

@user-yz2jq8pl3m 7 месяцев назад

Thank you Kevin, this video was really helpful for understanding flexbox better.

@_ata_3 Год назад

Thank you for this. It helps to clear flex a lot.

@RVilkaitis Год назад

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 !

@hassanmoechtar 11 месяцев назад

Thanks! I'm doing a home course Front-End Development, your video made me understand the basics better.

@lilyshevchenko7048 Год назад

You're a gentleman and a scholar, good sir. Ive always hated CSS but recently wanted to get back into more of the frontend line of work and deeply understand all the properties and when/how to pick them instead of wildly throwing darts and hoping they would stick. I have to say nothing really made it land as well as your videos. Deepest gratitude. You have a real knack for teaching! 🙏

@christopherpink842 2 года назад

WOW!!!! literally i was building a website and having issue with flexbox, and this video answered the WHY certain things was not happening THANK YOU VERY MUCH

@codex_js962 2 года назад

Thank you Kevin for this very helpful explanation.

@surajghimire7107 Год назад

Just cleared all my doubts. Thank you very much, wizard !!

@natarajanraju4198 6 месяцев назад

Doing a great work Kevin. More power to you

@Berbipedia 3 месяца назад

Hey Kevin, I wanted to thank you directly for this video. I was struggling to understand some concepts of Flex. Currently I'm on my path to become a FS Developer. And you helped me SO MUCH with this one. I can't thank you enough. I'm another Odin Project fellow by the way. Keep these great videos coming!

@Skipthedrive 10 месяцев назад

Great explanation of Flexbox. Thank you!

@girirajtomar519 2 года назад

Thanks kevin for such a great video. Keep teaching us like that.

@vona5251 Год назад

Thanks a lot Kev, this is Khani from South Africa, I am a graphic design tutor and I was recently given web development to teach, your videos have really been helpful. I am a subscriber and I wish to enroll in one of your courses in the near future.

@kbrodeur 2 года назад

you did a great job on this. very entertaining and useful, man.

@daleryanaldover6545 2 года назад

I remembered the first time I worked with flexbox and I can confidently say, "Random bullshit go!" Really glad you did a deep dive on flexbox as I saw one of your challenge videos you were having a hard time aligning the content items. And shout out for flex-basis, I didn't knew it was a parameter for flex attribute. I was using it without really knowing the magic it truly holds. Now I will go back to sleep Edit: I came back here because I forgot flex-basis existed, I'm getting old af

@monsterkush11 Год назад

You’re an awesome teacher thanks for sharing !

@unblemished_ 2 года назад

Thank god you exist, and thank you for making it so understandable. Appreciated!

@ranjoyguhathakurata5650 2 года назад

Absolute joy and pleasure. One who loves flexbox can understand this feeling.

@worldclasscode1847 2 года назад

Nice vid! I love Flexbox. It's so useful. I use it on each and every web page, multiple times.

@Furki4_4 Год назад

Thank you Kevin, I really feel that I understand how flex works first time.

@sour-cabbage 2 года назад

Amazing video, it just clarified the things for me, thank you!!

@maciejzbierowski548 Год назад

Great job ! Interesting, easy, extremely helpful 🙏🙏🙏

@suvraneelsaha7857 6 месяцев назад

Golden content , thanks Kevin . Took notes too !!

@zainraad7862 2 года назад

I just love the decent amount of effort you put into your videos. Such a high quality content!

@adegboyegablessingolamide4147 2 года назад

Very insightful... In my experience with flex, I have usually focussed on the parent properties and not the likes of shrink, grow, order, etc that you touched... Thanks...

@more2learn279 Год назад

Great Video. Truly Made Flexbox easy. Going to apply the concepts to the project I am working on now. Thanks, KP.

@odysseus277 2 года назад

Really, really helpful! Thanks, Kevin.

@thechimaobii Год назад

This has been soooo helpful. Thank you!

@Burnnskii_Gaming 2 года назад

perfect timing on this for me! just finished your playlist with the 3 flexbox videos. i learned more from you in those short videos than a $130 udemy course. hero status.

@daleryanaldover6545 2 года назад

most udemy courses are beginner even tho they tag it as intermediate. I highly recommend css-tricks if you haven't learned about it yet.