Do you understand how Flexbox does what it does?

you've been told that to make columns flexbox is the easiest thing to do you have a layout that needs three columns that go next to one another so then you go and use a display flex just like you were told to do and what happens while this mess of things happens where you get one big column one medium column one skinny column we don't want that we want three equal columns xbox is awesome but it also sometimes seems to have a mind of its own so let's dive in and see why flexbox does what it's even doing here and why these columns aren't equal and then there are different ways we can fix it so first i'm going to show you the solution that i most common see and the problem with it and then we'll look at the best solution for this type of thing hi there my name is kevin and if you're new here here we learn about how to make the web and how to make it look good with weekly tips tricks and tutorials and you i have a very unimaginative column class here so let's jump on there and get those pesky columns uh to misbehave once again so on there we're going to throw on a display of flex and we will get our columns but once again they are the wrong size and when we look at this just really really fast to understand what's really happening is flexbox is taking these three divs and it's turning each one of them into a column now i've called them call just because you know i'm unimaginative right now um and just for these example purposes but we have these three columns that are each becoming a column there so their children are just doing whatever they have to be but we can see that some of them are much bigger than other ones and this is really frustrating we want them all to be the same size so before we look at how to solve this i think it's really important to understand why this is even happening so what we're going to do is i am in firefox for this one and i like firefox a lot more for debugging css just because there's a lot more tools at our disposal one of them being the flexbox visualizer thing that they have if you want to know more of the other flexbox things there is a card jumping up there right now that you can check out but what you can see is here i can actually do like click this little flex button and we can see that it shows us the our flex thing this is a little bit like the grid inspector uh if you're familiar with it and that is in chrome and firefox now but on this you can see the flex like that but if you switch over from here and you actually go on to an individual child and you select the child it gives you some of the flex information about that child here and you can actually see the content size for this is 9.55 and if we go into the middle one it's 2676 and if we go on to this one it should be eight 783 so this one and this one they're roughly the same size this one's a little bit smaller um so this is in an ideal world this is the size they want to be and this is all being calculated based on the content that's inside of them ideally everything wouldn't even have lines like this right you would take this entire paragraph and just string it off on one big line that has a whole bunch of horizontal scroll it doesn't have room for all of that so then flexbox wraps the content a little bit and it uses those numbers to decide how big everything should be so because this one would be the biggest in an ideal world that means that in this situation what's happening is it's still going to take up more room now all of them have a flex shrink on them and that's the default behavior flex shrink of one is the default so they're all able to shrink and that just means that because they're all shrinking sort of at the same rate that the biggest one it's shrinking at the same rate as the other ones but it won't shrink as much because it was already bigger to start with and you can see the final sizes that were calculated in there as well and so that sort of gives us our starting point and now there's two different solutions we can do to fix this and what it is is we need the content size for all of them to be the same and both solutions do involve that but one of them's a little bit more clumsy than the other one and so what i'll often see done um is people coming in they say dot call and then what they do is they throw a width on here of 100 and this is a good one or actually you know what worse is 33 we have three columns i want a 33.3333 percent and that's going to equally distribute it and now this is working because if we go inspect here again and we look at the individual column the actual width of it is all the same now so the base size of all of them is now 33.333 which comes out to this value and that means because they're all the same they're all going to be equal now the reason i don't like this situation very much is what if one of these columns were to disappear let me delete it from here and now let's take a look well it doesn't adjust to the situation so one thing with flexbox is and the wonderful thing with flexbox is that it's flexible so when we have our three columns here if they all have a width of a hundred percent they are all it's going to look identical but the advantage of them being all a hundred percent is if you take one of these away well just like magic they're going to stretch out and balance out now and again this is happening because they want to remember before at the beginning one of them wanted to be like 400 pixels the other one wanted to be 2600 pixels but they were shrinking down to fit so now they both want to be 100 the right deal size is 100 but in this case what's happening is they can't fit next to each other at that so they'll shrink down they both have a flex shrink of one but their base size is the same so when they shrink they're both shrinking by the same amount and that means you can come in and add another column and all three columns will be the same and you can come in and add another column and all four columns will be the same and so on and so forth now this is a good solution but it's not the best solution because what happens is and let's say we come on this middle card or this middle column here and you're working on your site you have another area where you use this columns div like this but you don't have a regular column coming in here you want to come in with something a little bit fancier so you come in with a dot card and you have this fancy card that you're going to style up so let's just come in and give this some dummy text really fast well now those equal columns have gone out the window again well what what why i have 100 oh well this one's not a column so then i'd also have to come in and call this a column and that's not the end of the world but it's also not fantastic right if i have these this columns class here i just want equal columns inside of it that's what i want every single time it shouldn't really matter what content i'm putting inside of it it should just work every single time so instead of having to come in here and say this is a card and a column or doing something like that we're having a specific design system what we could do is just take our dot columns and actually what i often call this is actually even columns or i usually do a split which is a split evenly but let's just say dot even columns like that and we can come on this and say we can say that every direct child of even columns has a width of a hundred percent so then with that then we just have to come up to here and update this class name so they're all the same and now we will get even columns every single time it doesn't matter what the content is and if you're not worried about modern css and you don't care what browser support we could come in with a gap like that there are fallbacks and other ways of getting this type of behavior though instead of just diving in with gap like this and what i love about this is it's simple it's scalable it's really easy to use and you don't have to worry so much about a design system or using specific classes in certain places you just throw this on here and whatever you throw inside will become a column it makes life really really easy now to really use this you'd also want to throw a media query in here to change the flex direction probably for small screens and then have it change back at large screens because we don't want this to happen at really small screen sizes obviously and that could be a little bit problematic along the way and while this is a really simple example i think it does a really nice job of showing how once you understand how flex is working the behaviors don't seem so strange after all and you can really start to wrangle and understand what you're doing with it if you enjoyed this video and you'd like to dive deeper into the world of flexbox i just launched a new course called flexbox simplified the link should be right here as well as right there in the description just below so you can click on that if you want to find out more information on it in the course we look at why flexbox does the things it does how we can gain control of it we do challenges together and we have a whole heck of a lot of fun along the way as well if you're interested in it and want to enroll again the link is there or should be right next to me as well

Channel: Kevin Powell

Views: 132,794

Keywords: Kevin Powell, css, html, tutorial, flexbox, css flexbox, flex box, how does flexbox work, what does flexbox do, css flex, how to use flex, how css flex, css flex basics, flexbox basics

Id: 9e-lWQdO-DA

Length: 7min 55sec (475 seconds)

Published: Thu Apr 15 2021