@ 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 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 RU-vid 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!
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.
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
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
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?
@@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
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.
@@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 !!!
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!
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.
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!
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.
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! :)
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.
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.
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
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.
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!
I don't comment on many RU-vid 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.
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...
@@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.
@@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.
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.
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.
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.
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 🙏
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"
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
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!
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
@@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!)
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.
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
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.
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 🤦🏼♂️
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?
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.
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
@@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
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!
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 :)
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
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.
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...
May I ask you? Today I discovered that sass wants to change the "/" symbol from division by default to list separator, what do you think on this topic? As someone who is really deep in CSS I would love to know your opinion :)
So typically I’m going to always use grid over flex box, especially when dealing with padded children? With the exceptions of things like navbar, use flexbox.
