Flexbox is more complicated than you thought

[@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

[@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 😁

[@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.

[@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

[@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 !!!

[@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.

[@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!

[@nitsanbh]

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

[@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]

🤣🤣

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

[@josipbjezancevic5697]

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

[@petarkolev6928]

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

[@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.

[@apporvaarya]

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

[@bushigi5913]

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

[@AlexSpieslechner]

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

[@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! :)

[@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

[@herbowenby4357]

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

[@MichalKall]

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

[@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.

[@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.

[@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.

[@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!

[@pablobarrientos2071]

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

[@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

[@chubbyshady]

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

[@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...

[@smoothbeak]

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

[@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.

[@neryortez6835]

Watching the video thinking that using grid was a simpler solution... And then you showed it. Great 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.

[@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.

[@amarg26]

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

[@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.

[@jasonleelawlight]

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

[@jimmybaradit6658]

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

[@jaygreentree4394]

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

[@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

[@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! 🙏

[@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"

[@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 🙏

[@shanondavidson5940]

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

[@thedimasss]

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

[@youtubejourney1992]

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

[@iancarr3923]

Great video - like the grid solution.

[@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!)

[@atarunraj]

LOVE IT!! Thank you

[@BerserkedBear]

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

[@anouarkhireddine4761]

Kevin never disappoints you , amazing content as usual :D

[@alilemo2134]

thank you man , very clear.. easy to understand

[@PrinjuVaidyan]

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

[@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.

[@vivianliu5011]

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

[@mrsmartweb18]

Thank you Kevin! Your videos are very helpful. 👍

[@chris_ea]

Thanks - this topic was really hard before you show it

[@JamesWelbes]

"embrace the cascade" love it

[@dave6012]

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

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

[@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

[@mnsi_darryl]

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 ?

[@GeorgesMayrink]

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

[@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?

[@SebastianMares]

Very nice video, thanks for explaining this so well!

[@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.

[@momakplayz7985]

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

[@kiravolvo]

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

[@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?

[@supportic]

Thank you for the deep dive into this.

[@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.

[@krisnarusdiono1304]

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

[@kunalmathur4890]

you solved my problem thanks bud

[@mariomastrandrea4165]

Wasn't it enough using "flex-basis: 0", for the flex solution?

[@KevinPowell]

If you did that, but didn't have flex-grow on, it'll be a bit of a mess I think?

[@chhavimanichoubey9437]

grow, shrink, basis actually shrinked my brain alot hahah

[@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.

[@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

[@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!

[@tonybp]

I made a flex container, inside I have an img and a paragraph... the image displays huge and the paragraph is in a narrow part... it's driving me nuts, what am I doing wrong?... why does the image displays so big? even the original size is not that big.

[@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 🤦🏼‍♂️

Very nice. Thank you.

[@veritatas678]

this is blowing my mind

[@DjLeonSKennedy]

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

[@OmegaLord55]

Wait why do you set *, *::after, *::before box-sizing: border-box?

[@AkxeOne]

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

[@mcfnord]

There's no @media entry in the link code, and I can't quite see what you do in the video at that point. Or rather, my attempts to do it do not result in a single column as your video does. Sad! So close!

[@jikochi]

Thank you Kevin ✌️

[@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...

[@meipia1608]

Hey Kevin! I would love it if you could do a video over Firefox developer edition and how we can use it.

[@KevinPowell]

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.

[@abhishekvishwakarma2756]

you have padding set on card class?

[@blooms-ai]

What named of browser preview extension you use?

[@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

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

[@codito7388]

when flex gap will fit for all browsers?

[@sumeetsood232]

Adding flex-grow code is missing, please add it

[@AmodeusR]

So it's valid to use "* {box-sizing: border-box;}?" Once I searched if it was a good practice and the answer I saw was negative, because it had some impact in performance. Can I do it or what?

[@HansWurst-dk6pp]

In this particular case the box-sizing was the reason, why the "flex: 1" solution and the "width: 100%" solution behaved differently in the first place. Of course, both didn't behave like intended, but I personally still think you shouldn't set "box-sizing: border-box" as default. To me, the way flex-box worked was never confusing, because I have the standard box model always in my mind.

[@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!

[@garvani]

Will there be any new video about .webp?

[@gatsdev]

row-gap and column-gap for the win ✔

[@johnsoto7112]

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.