Flexbox is more complicated than you thought

[@joaomatos1144]

2021: This youtuber deserves 1Million subscribers at the end of this year! Rock Solid Tips and the way you communicate =)

[@KevinPowell]

Thanks so much 🙂

[@Crashmast3r]

Totally agree! But I refuse to be the 70th like... XD

[@CheerfulNE]

@@Crashmast3r 😁

[@ilkrsrc081]

I love how Kevin casually writes a CSS property that I've never heard in my life before. and I work as a front end dev

[@sadhlife]

did you know about isolation?

[@cerealrakist7360]

Haha right!!!

[@chaitanyajharbadem-1740]

I thought it was me only

[@shadab8798]

For me it was outline

[@maja1157]

@@shadab8798 yeah! i paused right away and searched DIFFERENCE BORDER OUTLINE CSS

[@snapedits4175]

@ 16:55, what Kevin actually meant was: the basic CONTENT width of card is 568 (600 - 32) and other two are of basic CONTENT width of 600. Thus, the calculation is as follows: The Total Basic CONTENT Width (T) = 600 + 568 + 600 = 1768 Available Width i.e. Width of the Container (W) = 600 CONTENT Width available in the Container (C) = W - 32 = 600 - 32 = 568 (32 px is reserved for padding as we only consider content size) Thus, the Common Ratio (R) for the widths to be divided by = T / C = 1768 / 568 = 3.112676 Thus the Final Width of Columns on either side of the Card = 600 / R = 600 / 3.112676 = 192.76 ~ 193 & The Final CONTENT Width of the Card (F) = 568 / R = 568 / 3.112676 = 182.48 ~ 182 The Final TOTAL Width of the Card including padding = F + 32 = 182 + 32 = 214 Hopefully this helps you guys understand what Kevin meant. BTW Thanks a lot Kevin! This video really makes me feel a lot more confident using Flex in the future. U r simply a GOAT.

[@KevinPowell]

All the maths were properly layed out in the article... Doing it in video wasnt quite as clear, lol. I should have overlaid it on the screen.

[@freerights6695]

thank you, I was kinda confused on this part

[@sirmidor]

@@KevinPowell Hey Kevin, don't know if you'll see this, but in the article I feel you're being slightly less clear than you could be: The article says "When the browser is working out how to evenly divide the space, it isn’t looking at how to evenly squish 1800px into a 600px space, but rather it’s looking at how to squish 1768px.". When I first read the article, I interpreted this as "squish 1768px *into a 600px space*", but that's incorrect. It's "squish 1768px *into a 568px space*" and this exact KZbin comment helped me see that. You mention the resulting pixel widths of the elements a few lines later so you could see that the former would be wrong, but I think it can be made a bit clearer by explicitly mentioning the 568px space and doing the calculation step by step. Thanks for the great article!

[@oneoranota]

Thank you, the video explanation on that bit made no sense. This comment should be pinned up.

[@them00nitself]

You have no idea how much your comment helped, thanks a lot ❤

[@kdfksfkldsklfkldsff]

So flex: 1; uses a bottom up approach of sorts starting with a width of 0 and then growing to fit, but width: 100%; is like a top down approach were all the element grow to a big size before being divided to fit the parent. Turns out using grid is the best way.

[@josipbjezancevic5697]

This is the best explanation of Flexbox I found. Very thoughtful and analytic, no dull definition repeating.

[@pablobarrientos2071]

One more time I search for a solution to my question and Kevin has the answer. Thanks a lot!

[@petarkolev6928]

Kevin, the CSS community is blessed to have you 💖💖💖

[@zacharystudio]

i’ve been writing CSS for 18 years. this was extremely helpful. i have always either used `gap`, or added padding to the child of the flex-item to avoid this.

[@smoothbeak]

One of the best things about Flexbox is how intuitive it is. ;)

[@nitsanbh]

Kevin, you are amazing. Truly the best CSS tutor in all of KZbin. Most of my CSS knowledge comes from you

[@herbowenby4357]

WOW. Makes things clearer! Thanks, Mr. Powell!

[@piromaniaco3579]

This a GEM... Years following you and you are still mindblowing me everytime. I never doubt to recommend this channel to anyone that ask me for css related tutorial or solutions. Thanks Kevin, as always, to my css guru. Keep it up!

[@jsuddsjr]

Mind blown. You just helped me understand flex-basis, which I always thought was beyond comprehension.

[@bradfordsuby8064]

It's a percentage based value telling the flex container how to handle each element's size. No different than a percentage width or percentage height.

[@MM-vr8rj]

I haven't watched the vid yet but if you have one container with two divs and you give the first div flex:1 and the second one flex:2 the second div will be able to grow up to 2/3 of the width of the container/parent right?

[@invictuz4803]

@@MM-vr8rj No, it's not about items growing proportionally to their flex-grow values. It's about remaining space being distributed proportionally to each item based on the flex-grow values. Remaining space is determined by the available container size minus total "final flex-basis". Here's an article explaining the calculation: www.madebymike.com.au/writing/understanding-flexbox/ Play around with the flex property using this flexbox playground: coding.imweb.io/demo/flex/index.html

[@MM-vr8rj]

@@invictuz4803 alright thanks for correcting me. Seems like it's much different than I thought. Guess I'm confusing the properties.

[@AlexSpieslechner]

i really struggled with giving people good learning paths to learn css. thank god I now have your channel to share.

[@kojisan2729]

I’ve just watched a video from Web Dev simplified about Flexbox. 2 minutes later you uploaded the video xD ”Flexbox is more complicated than you thought” Thanks.

[@KevinPowell]

Now I want to know, which one did you like better? 😂😂

[@GauravKumar-ue7nz]

@@KevinPowell Me too 😂

[@kojisan2729]

@@KevinPowell yours is more specific. I think for beginners WDS is better but I really like yours too 😅

[@cerealrakist7360]

@@kojisan2729 that’s an honest answer because I was thinking the same. Kyle @ WDS is amazing with helping beginners understand things with ease , and then Kevin steps in and takes us from Amateur baby to Boss Dog pro !!!

[@Morrile1]

Flexbox can be very annoying, frustrating, and I hated it for a long time, mainly because of the frustration it created for me. However, after trying to design a new grid only website (thinking it would be easier, lol) I eventually discovered that we need to have both, Grid for layout and Flexbox for content, and then it works like a dream (once we get our heads around flexbox, that is). It’s a fact that web design is in constant motion as changes come and go, etc. What Kevin has highlighted within this video is that there is always something new to learnt and web design is never ending, A friend of mine once said “The more you know the more there is to learn” and it’s very true.

[@lucienchu9649]

The reason I chose flex (over used, maybe) rather than Grid is, I am still not very comfortable with Grid. Glad to understand a bit more about flex, thanks.

[@cerealrakist7360]

I use it too for same purpose lol

[@MichalKall]

Your channel, is making my professional life so much easier, one day at a time ! Kudos Kevin !

[@bushigi5913]

I'll definitely come back to this vid several times... Thank you Kevin!

[@carolinek1818]

When I found out about flex, I couldn't stop using it. Thanks for helping me understand it better. You really know how to teach people 👍 I will soon be assigned to write new design for the application I work on so watching your videos has helped me to prepare for it.

[@cerealrakist7360]

He’s the best!! Btw If you want or need some cool ideas or inspiration , I recommend a channel by the name of ( online tutorials ) if you’re looking for tricks and neat things to use !! Only downside is they don’t talk but videos are short enough !! Good luck!

[@piromaniaco3579]

@@cerealrakist7360 Love that channel too :)

[@vivianliu5011]

I LOVE GRID AS WELL! Never get along well with flex-box

[@green_footballs]

I don't comment on many KZbin videos but I just wanted to say thank for this one. It gave me a deeper understanding of how flexbox works and resolves some irritating issues I've had. The grid solution is great, too.

[@ice13ill]

This guy is awesome in explaining and using small steps in showing us these tricks. And also guys, think about it, this video regarding the understanding CSS flex was made at the beginning of 2021 (quite a few gooood years after flex was "invented"). And silly us, we were talking about AI taking over and flying cars...

[@RD-jr8nv]

This was f*****g phenomenal. I had like 6 light bulb moments watching this!!! Would be great to see you elaborate on the grid based flex-wrap approach, I presume that would be grid-auto-rows/columns but I imagine you have a wealth of knowledge on the nuances in that too. Great work Kevin, I have used CSS for many years and really never liked it but you are converting me with every video.

[@ankhanh3491]

Just a minor suggestion since I get really nitty picky about getting things to work using flexbox. For anyone who wants to make the middle card the same length as the other 2 columns, add height: 100% to the element (this works for 2 reasons: 1. there is no visible padding inside the second "col" div that Kevin created, and 2. we set the display to content-box and there is no margins in the card). Hope it helps anyone who wonders how to get the flexbox solution looks "just right"

[@apporvaarya]

ur channel is my go-to resource to refresh and add to my CSS understanding... thanks Kevin

[@BrunoSouza-wy2et]

I've never thought that after coding graph algorithms , machine learning models, node.js applications that deal with hundreds of requests , the final boss would be CSS, so confusing

[@GeorgesMayrink]

I hear you! 😂 But when you realize how well thought out it all is, you start to appreciate its idiosyncrasies. 👏🏽

[@skywizard3319]

@@GeorgesMayrink I'm mad and highly appreciative at the same time

[@worldclasscode1847]

Yes, it's a boss, CSS ! haha. And CSS Flexbox is the favourite tool of the boss :)

[@UFO_808]

Your brain is built different lol

[@kuromistan645]

It's kinda encouraging as a beginner to know that someone with so much knowledge is/was also struggling with this like me xD highly appreciate this comment

[@chubbyshady]

When Kevin said "did you know that" My heart skipped a beat. Anyone else?

[@neryortez6835]

Watching the video thinking that using grid was a simpler solution... And then you showed it. Great video !

[@jaymarley6172]

quite funny you actually covered this in a round about way in your previous video on flexbox you mentioned earlier but this really solidifies it thanks for your great content

[@cerealrakist7360]

That’s it, I’m gonna have to make you a darn super power cape. Css Man is here to save the day !

[@KevinPowell]

🤣🤣

[@RodrigoDAgostino]

SUCH an interesting video, Kev! A couple of weeks ago I was struggling with this and managed to find a way out, but never got to understand what was actually happening behind. Love this kind of videos where I get to understand the behind the scenes. Thanks a lot! :)

[@invictuz4803]

12:02 "flex: 1" doesn't "change" the flex-basis in the sense that it changes it from the original value to another, it's just the shorthand form of setting "flex-grow: 1, flex-shrink: 1, flex-basis: 0%". That's why using the flex shorthand property is not great and you're better off always setting each individual property (longhand) to better understand/show what you're doing. Anyway, great exploration video and thanks for the codepens! I still get flexbox wrong years after learning it, it's ridiculous!

[@DeltaNrOne]

I did not know padding and border was not looked at. Then again i never ran into this spesific issue before. To be honest flex isn’t hard to understand like you said but grid seems more modern. Intresting video.

[@markrobbins6985]

Now it makes more sense. Do I want the parent to control the layout? - grid. Do I want the children to control the layout? - flexbox. Rather ironic that I cut my teeth on flexbox because I thought it was easier than grid. Now I think the exact opposite. Great tutorial. Keep up the good work.

[@jasonleelawlight]

Thank you Kevin! This is so well explained. I wish I had watched this video earlier.

[@BerserkedBear]

You rock. You're a very talented teacher. Thanks for your effort and time.

[@youtubejourney1992]

This video came at the perfect time. I just ran into this issue for a work project. Thank you!

[@alilemo2134]

thank you man , very clear.. easy to understand

[@shanondavidson5940]

You are an excellent instructor! Looking forward to watching more of your content.

[@amarg26]

Fantastic KP. This is what I was looking for solution for my current project. 👍

[@jimmybaradit6658]

You are my god Kevin! I was having problems with it and you just appeared as a miracle!

[@iancarr3923]

Great video - like the grid solution.

[@jaygreentree4394]

For many reasons I prefer to use the bootstrap framework when building sites. the hard work is mostly done already.

[@jdubhman]

I just learned how useful codepen is, firefox inspector dark mode, and more, still in the first 3 minutes lol thanks for the great tuts! 🙏

[@filbranden]

Great video, thanks for the explanation! I don't know if I agree that it makes sense for flex to take into account border + padding in the border-box case... You mentioned not doing so would create problems, but not sure I can see which problems it would create, particularly since the solution of simply wrapping it inside a div.col was enough to fix it and the padding/border was unaffected inside that div... Looks to me that this might have been an oversight or bug in the specification of flex, which is not completely surprising since the behavior makes sense in the content-box case, which is (unfortunately) the default... Thank you so much for this deep exploration! I'd certainly welcome more videos like so! Cheers!

[@KevinPowell]

No, it's intentional. I'd you had a 1px border and it was able to shrink, it would just vanish, bit only on the sides, whereas the top and bottom would still be there, or the padding would squish on the sides, but not the too and bottom. If that were the case, flex would be unusable imo

[@filbranden]

@@KevinPowell Hmmm, interesting. You mean in the case where there's no flex-grow and the max-content would be zero? Won't that happen in the case with the div.col though? Not sure if I'm fully following it... (In any case, thanks for the answer and sorry to stick on this particular point!)

[@thedimasss]

Thanks Kevin, please make more videos about grid's!

[@einpseudonym7604]

Great explanation, I would love to see a video about the other display properties, where they would be used, cause i find myself only using grid & flex

[@Po4to]

Grid and flex are as intimidating as they are fascinating. Life was harder and yet simplier with block, inline, inline-block and floats ;)

[@v01d_r34l1ty]

floats still give me nightmares

[@alsantos123]

Lol 😂

[@W4nn3]

@@v01d_r34l1ty clear: both;

[@v01d_r34l1ty]

@@W4nn3 I genuinely just want you to know I've been coding in CSS since 3rd grade (I just graduated high school) so that's roughly 9 years. Just 4 years ago I started experimenting with flex boxes. THAT'S 5 YEARS I DIDN'T KNOW THIS PROPERTY EXISTED AND HAD TO SUFFER WITH TRYING TO ALIGN EVERYTHING BASED ON DISPLAY ABSOLUTE AND DISPLAY FIXED. I'm done, I think I'm actually done. I quit life. And no, don't even begin to mention tables. I didn't figure out people used to used to use tables to make it easier to align content on their websites until my freshman year.

[@W4nn3]

@@v01d_r34l1ty :D To be honest, if you needed to support legacy browsers (IE < 11), you could not use flexbox anyway^^ To the tables. When I started programming about 20 years ago, table-designs was the way to go :D But using position absolute/fixed for everything was never a thing I would do, sounds like a nightmare.

[@PrinjuVaidyan]

I never thought of these in detail.. Please do more

[@Darkray201]

Nice vid Kevin, it really helped me to better understand the whole topic! The ways you've visualized the issue and explained why such things and problems are the case were so intuitive and explained perfectly. It's really impressive what I have yet learned from you and I would really like to thank you for your high-quality content 🙏

[@otakarbeinhauer]

I don't know if you've tackled this issue already, but 1fr doesn't neccesarily make an exact fraction either. If you have a nowrap element inside a cell, it might grow bigger then the rest of the 1fr cells. I'm not sure what the exact rules are, but I'm sure, that if you want exact thirds, you have to go for calc(100% / 3) - which is pretty annyoing if you have gaps in your grid.

[@mrsmartweb18]

Thank you Kevin! Your videos are very helpful. 👍

[@sadhlife]

another crazy thing I learned was that chrome really sucks at exact positioning, especially with borders. It's often slightly off. To test exact positioning of your css, always use Firefox.

[@KevinPowell]

I haven't worried about pixel perfection in a LONG time. We live in a world where the user controls so much, from resolution to screen size to color gamut to more... We worry about intent, and don't stress about perfection imo

[@sadhlife]

@@KevinPowell I was trying to teach inline and inline-block to someone, and chrome just wasn't having it. All the imperfections made it hard to explain the exact positioning properties :P

[@GeorgesMayrink]

Thank you very much, Sensei. You makes things logical. 🙏🏽👍🏼

[@oneoranota]

This confirms my suspicion that the flexbox = 1D and grid = 2D is just a widespread misconception. Flexbox is for stacking stuff. Grid is for controlling the space.

[@gatsdev]

row-gap and column-gap for the win ✔

[@dave6012]

Love this humble approach. The cascade makes ants of us all.

[@chris_ea]

Thanks - this topic was really hard before you show it

[@anouarkhireddine4761]

Kevin never disappoints you , amazing content as usual :D

[@atarunraj]

LOVE IT!! Thank you

[@veritatas678]

this is blowing my mind

[@supportic]

Thank you for the deep dive into this.

[@SebastianMares]

Very nice video, thanks for explaining this so well!

[@polthm]

Really nice! You can also put the padding on children in "display: flex": .card > * { padding: 1rem }

[@KevinPowell]

The issue there is if some have backgrounds and others don't, the spacing will look off

[@polthm]

@@KevinPowell Indeed, thank you!

[@MyoDest]

I'm so proud of myself that I correctly identified what was the culprit within the first 10s of the video :) But that's just because I've spent so much time with flexbox in the past couple years that I feel like a pro now :) But I still have a Flexbox guide from Css Tricks bookmarked in my browser just in case :)

[@jikochi]

Thank you Kevin ✌️

[@tagdesignwebsites]

Thanks Kevin - brilliantly explained as always. 😊 I need to learn more about grid. I've touched on it. It seems harder to work with in Wordpress custom CSS since many themes tend to use display:flex. Where can we ask questions in a forum related to this? Many thanks

[@richtourist]

This video should be called "CSS is worse than you thought". CSS is a solution that is more complicated than the problem you were trying to solve. But hey, we are saddled with CSS, so thanks to Kevin Powell for striking so many matches in the darkness. And so good luck and God's speed, dear friends, and Once More Unto The Breach...

[@JamesWelbes]

"embrace the cascade" love it

[@ellsonmendesYT]

3:55 and I already learned something new ===> max-content !!! what are the name they call you again!! ah css king, master, yeah something like that, by the way, great content dude!

[@chhavimanichoubey9437]

grow, shrink, basis actually shrinked my brain alot hahah

[@momakplayz7985]

hi kevin, can you please make a video of making a responsive website that includes using alot of flexbox and grid properties

[@sntxrrr]

Great video. Interesting that the clue is in the name; grid to place stuff rigidly, flex-box when you want the content to flow. Sort of. Unless.

[@angxlbeats3643]

16:40 I don't understand that operation, you said it has to take 32px from the container width that's why the total base size is 568, but when you multiply it time 3 you said flex-box has to take the 32px again (it already took it before the multiplication), and then, what proccess it does to shrink it down to 193px?

[@MichaelLazarski]

And here I'm working on a e-commerce shop where we still support IE11 :D (not for long anymore but still) So yeah I would love to use grid for stuff like that but we can't :D Good video

Very nice. Thank you.

[@nitram_nosnibor]

Thank you Kevin this explained so much, and I totally understand this now, I just hope I can remember it the next time I need it (I'll just bookmark this video). I just don't get the thumbs down, this is just a video of facts so what's there to click thumbs down too 🤦🏼‍♂️

[@worldclasscode1847]

Great vid!

[@caw5v]

correct me please if im wrong, but wouldn't this problem go away if you just had consistent padding throughout your cols and card?

[@kunalmathur4890]

you solved my problem thanks bud

[@kiravolvo]

thank you. did not even think abt flex not respecting border box. #somethingnewilearned

[@alanklm]

may be I'm too new to CSS, but I don't get why would anyone think that flexbox is about even sizes. Grid is about even sizes, and flexbox is about flexible sizes.

[@jaredbattiest3840]

I know that using px is an easy thing to do, but I'm learning that using px could cause problems due with people who have browser preferences in place. In this example, when you are setting the width and max width, what would you utilize to not overwrite browser or system settings?

[@TheNarancia]

Hi Kevin! Thanks for sharing your knowledge! what about flex-basis: calc(100% / 3); It could be a right solution?

[@KevinPowell]

Pretty sure it's the same issue, though the numbers might come out slightly differently, but then you're stuck with 3 columns. Ideally you can remove one, or have a 4th.

[@TheNarancia]

@@KevinPowell ok, thank you again :)

[@studiosoftmorecambe6879]

It appears there is a need in this modern world to make simple tasks very complicated. All that code is the same as float:left; width:31%; margin:1%; The only problem with using that solution is that it is old fashioned and nobody seems to want to use a reliable solution any more.

[@krisnarusdiono1304]

sir, if you mind please create a flex tutorial which is talking anything about flex. i would really love it

[@HansWurst-dk6pp]

16:27 That explanation seems off to me. You talk about base size of "568 plus 568 plus 568". Isn't only the base size of your div.card 568? The other two divs should have a base size of 600. So the boxes don't shrink at the same rate anymore.

[@karesztrk]

Its too bad a cannot spam the Like button like 100 times. Awesome video Kevin

[@DjLeonSKennedy]

Kevin you just fixed my bug in project! Fkn flex-box

[@ilhamalbasith2618]

Yeah, I used to use flexbox with everything but I recently learned grid and I just don't find any use of flexbox anymore tbh.

[@clevermissfox]

I thought flex: 1 was shorthand for flex-shrink:0, flex-grow:1, and flex-basis: auto; In the video it’s grow:0, shrink:1 , basis: auto?

[@clevermissfox]

I had it backwards

[@mnsidarryl]

but why do my div's keep arranging in a column instead of a row no matter how much I try to code it with display flex inline, or flex-direction ?

[@redwoodJB]

The times I thought I understood a little bit about Flex, I realize I know almost nothing.

[@ahndeux]

If this was the 1700s, they would tie Flexbox on a pole and set it on fire for witchcraft. Flexbox is powerful, but it can be a pain when it doesn't do what you think it should do.

[@nro337]

Great video!

[@keaton718]

Woah, you can inspect in CodePen!?

[@abhishekvishwakarma2756]

you have padding set on card class?

[@kosmar]

thanks kevin! bought a t-shirt.

[@randomuploaderguy]

Nice thumbnail. "WOKRED"