Flexbox is more complicated than you thought
HTML-код
- Опубликовано: 13 июн 2024
- Article on CSS-Tricks: css-tricks.com/equal-columns-...
Flex is a little strange in how it works, and I only recently dove deep enough into it to really understand what was going on, so I figured I'd share my discoveries with you!
🎓 - I have a 4+ hour course that focuses only on understanding and using Flexbox: flexboxsimplified.com
🔗 Links
✅ codepen.io/kevinpowell/pen/0e...
✅ codepen.io/kevinpowell/pen/f8...
✅ codepen.io/kevinpowell/pen/a9...
✅ codepen.io/kevinpowell/pen/OJ...
✅ codepen.io/kevinpowell/pen/qB...
⌚ Timestamps
00:00 - Introduction
02:15 - How flexbox calculates the size of elements
06:10 - How flex-shrink calculates how much to shrink by
11:24 - How flex-grow calculates the size to grow by
12:00 - What flex: 1 actually does
13:09 - Why flex: 1 on all the flex items doesn't make even columns all the time
16:16 - Why flex-basis: 100% doesn't have the same result as flex: 1
17:23 - My new preferred solution
20:00 - A solution using flexbox
21:26 - Flexbox vs Grid
#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 RUclips 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!
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
did you know about isolation?
Haha right!!!
I thought it was me only
For me it was outline
@@shadab8798 yeah! i paused right away and searched DIFFERENCE BORDER OUTLINE CSS
2021: This youtuber deserves 1Million subscribers at the end of this year! Rock Solid Tips and the way you communicate =)
Thanks so much 🙂
Totally agree! But I refuse to be the 70th like... XD
@@Crashmast3r 😁
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.
@ 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.
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.
thank you, I was kinda confused on this part
@@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 RUclips 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!
Thank you, the video explanation on that bit made no sense.
This comment should be pinned up.
You have no idea how much your comment helped, thanks a lot ❤
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
I hear you! 😂 But when you realize how well thought out it all is, you start to appreciate its idiosyncrasies. 👏🏽
@@GeorgesMayrink I'm mad and highly appreciative at the same time
Yes, it's a boss, CSS ! haha. And CSS Flexbox is the favourite tool of the boss :)
Your brain is built different lol
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
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!
Mind blown. You just helped me understand flex-basis, which I always thought was beyond comprehension.
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.
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
@@invictuz4803 alright thanks for correcting me. Seems like it's much different than I thought. Guess I'm confusing the properties.
Kevin, you are amazing.
Truly the best CSS tutor in all of RUclips.
Most of my CSS knowledge comes from you
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! :)
I'll definitely come back to this vid several times... Thank you Kevin!
This is the best explanation of Flexbox I found. Very thoughtful and analytic, no dull definition repeating.
WOW. Makes things clearer! Thanks, Mr. Powell!
ur channel is my go-to resource to refresh and add to my CSS understanding... thanks Kevin
Kevin, the CSS community is blessed to have you 💖💖💖
That’s it, I’m gonna have to make you a darn super power cape. Css Man is here to save the day !
🤣🤣
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 🙏
This video came at the perfect time. I just ran into this issue for a work project. Thank you!
You are an excellent instructor! Looking forward to watching more of your content.
Fantastic KP. This is what I was looking for solution for my current project. 👍
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.
Your channel, is making my professional life so much easier, one day at a time !
Kudos Kevin !
One more time I search for a solution to my question and Kevin has the answer. Thanks a lot!
Thank you Kevin! This is so well explained. I wish I had watched this video earlier.
thank you man , very clear.. easy to understand
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
Great video - like the grid solution.
I don't comment on many RUclips 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.
One of the best things about Flexbox is how intuitive it is.
;)
You rock. You're a very talented teacher. Thanks for your effort and time.
Thank you for the deep dive into this.
Thank you Kevin! Your videos are very helpful. 👍
You are my god Kevin! I was having problems with it and you just appeared as a miracle!
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!
@@cerealrakist7360 Love that channel too :)
I never thought of these in detail.. Please do more
Very nice video, thanks for explaining this so well!
i really struggled with giving people good learning paths to learn css. thank god I now have your channel to share.
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
When Kevin said "did you know that" My heart skipped a beat. Anyone else?
Kevin never disappoints you , amazing content as usual :D
LOVE IT!! Thank you
Watching the video thinking that using grid was a simpler solution... And then you showed it. Great video !
Thank you very much, Sensei. You makes things logical. 🙏🏽👍🏼
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.
Now I want to know, which one did you like better? 😂😂
@@KevinPowell Me too 😂
@@KevinPowell yours is more specific. I think for beginners WDS is better but I really like yours too 😅
@@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 !!!
Thanks Kevin, please make more videos about grid's!
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.
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.
I use it too for same purpose lol
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 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...
Very nice. Thank you.
Thank you Kevin ✌️
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 just learned how useful codepen is, firefox inspector dark mode, and more,
still in the first 3 minutes lol thanks for the great tuts! 🙏
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.
Great video!
you solved my problem thanks bud
this is blowing my mind
Thanks - this topic was really hard before you show it
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
Love this humble approach. The cascade makes ants of us all.
I LOVE GRID AS WELL! Never get along well with flex-box
For many reasons I prefer to use the bootstrap framework when building sites. the hard work is mostly done already.
Great video!
Can you explain how shrink other than 1 works?
"embrace the cascade" love it
Great vid!
Grid and flex are as intimidating as they are fascinating. Life was harder and yet simplier with block, inline, inline-block and floats ;)
floats still give me nightmares
Lol 😂
@@v01d_r34l1ty clear: both;
@@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.
That helped a lot :)
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.
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 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!)
Kevin you just fixed my bug in project! Fkn flex-box
Amazing video, saludos
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.
grow, shrink, basis actually shrinked my brain alot hahah
hi kevin, can you please make a video of making a responsive website that includes using alot of flexbox and grid properties
Tres bon!
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 🤦🏼♂️
correct me please if im wrong, but wouldn't this problem go away if you just had consistent padding throughout your cols and card?
My lecturer ever😘
row-gap and column-gap for the win ✔
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!
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 :)
Infact i like all your videos
Hi Kevin! Thanks for sharing your knowledge!
what about flex-basis: calc(100% / 3);
It could be a right solution?
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.
@@KevinPowell ok, thank you again :)
thank you. did not even think abt flex not respecting border box. #somethingnewilearned
thx
What named of browser preview extension you use?
thanks kevin! bought a t-shirt.
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?
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
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.
Woah, you can inspect in CodePen!?
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.
Its too bad a cannot spam the Like button like 100 times. Awesome video Kevin
you have padding set on card class?
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 :)
sir, if you mind please create a flex tutorial which is talking anything about flex. i would really love it
Hey Kevin! I would love it if you could do a video over Firefox developer edition and how we can use it.
I have one already that goes over some of it, though it's not a deep dive but goes over some of my favourite dev tools in it.
Another deep dive on Grid
thank you sir ^_^
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