hi there my frontend friends flexbox is one of the most useful and used CSS features that's out there but most people only scratch the surface of what it can do and often end up fighting with what it's doing just because they don't fully understand how it works so today I want to do my best at keeping things really simple but demystifying a little bit of the behaviors of it especially with flex shrink and flex grow specifically uh with this example that we can see right here where I got a design from dribble link to the original one um down in the description and we're going to have some fun and play around with this and the main thing or the first thing we want to look at here is that I have uh we're going to be focused on this Hotel listing and this is where we're going to be putting our display Flex on and it has three children we have the image there we have this Hotel info we have the hotel meta right there so what I'm going to do first before we do anything else is on my Hotel listing we'll select all of the direct to children so those three divs that we just saw and we're going to uh give those all an outline on them now I realized we're not seeing one on the image at the top it's just because I used a picture that's fine cuz we have our image and then we have this one here we have that third thing down here the image is easy enough to see so without the the visualization it should be okay and then what we're going to do is we're going to go on that Hotel listing so on the parent and let's start by adding on a display Flex here and hit save you can see that we now have our three columns and actually we can see our green border on the image too which is perfect um and part of that actually one of the reasons that's happening and it's a really important one is because when we do a display Flex we're actually changing the behavior away from what those elements originally were we had the Block Level elements and then our picture that was there um and when we do a display Flex being block or in line if I made one of those a span whatever it is those all go out the window they're not block elements anymore they're not inline elements anymore they are now Flex children and so they behave as Flex children and I had someone in my Discord asking about this recently because they were like well my my element was full sized and then when I'm doing display Flex why is it not as big as it used to be and this is a really important thing um to understand that it's no longer Block it's not going to fill up the entire space like it used to now I'm just going to come on here and we'll add a gap so we can just make it look a little bit nicer to separate things and um another important thing I want to do is I'm going to highlight this um the outside of the element itself here just so we can really see that you know sort of the space that everything is is taking up and under break things down a little bit cuz at this point it looks like it's doing exactly what we want it to do and basically each element has gotten as small as it kind of could my image had a size on it so it's matching the size that I declared from my image this is shrunk down to the length of the text over here this is shrunk down to the text here and everything is looking fine and this is often what happens uh but there's a problem let's say I come in and I have another one after cuz hotel listings you never just have one right these sites always have hundreds of them you search up your hotel um so let's say it's a different one they're basically the same but the second one only has has an ocean view and hot tub we don't have the fantastic one bedroom suite and breakfast isn't included so now my layout doesn't look as good why not why is it working perfectly up here at this first one but not for the second one down here and we want to make robust layouts where we don't have to worry about this everything just works when I create my layout so what's happening is the way Flex boox determines how big something is it sort of goes on every element that's inside of there and it figures out the intrinsic size of them and it's sort of like doing a display Max content how how big would this be if we match the exact size of this this is a UL actually where I have some I made it sort of go across with some inline block um going on there but it's it's finding the length of this without any line breaks and it works and it's fine whereas here this is the single longest element so this is what's actually now controlling the size of it this is so important to understand same over here this is what's controlling it two nights two adults if for whatever reason we just made that one two adults only notice how we got smaller because now it's this over here that's controlling the size of it and if I remove from the price then it would match the size of what we have here super important to understand that as the basis because people don't always get that they just know it makes columns things sort of shrink and it works but every flexed child will be calculated differently based on the size of the content that is inside of it flexbox is very much an inside out type of thing going on where what's inside of the elements has an impact on the outside and the same with the overall layout these children have the big impact on the layout as as a whole Flex box is very Inside Out whereas if you were using grid it's very outside in where you define things on the parent and then the children just fit into that grid you're controlling everything from the outside Flex boox you're controlling everything from the inside so how can I get them to actually start behaving in the same way well actually before we get to that let's do a control shift I to open up my Dev tools command shift I if you're in if you're on a Mac or you can just right click and do your inspect and then I have my responsive mode on which is this little button here people always ask me about that so we'll turn that on uh if in Firefox it's similar icon but on the other side of the page um and Safari has one but it's a little bit different so before we actually start playing around with stuff here right now nothing here is actually shrinking let's come on uh this one here too and we're going to do a flex shrink of zero and hit save notice I nothing in my layout changed and that's because while it looks like these out like this looks like it's smaller and it's smaller than it was when it was a display block element and it's now a flex char so things are different but they haven't started shrinking yet this is flex Box's intrinsic size this is what Flex boxes figured out the ideal size for this element should be based on this line right here and on this one on this one right here so the content of that element are defining the size of it no shrinking no growing we'll do a flex grow of zero here even though that's the default nothing is happening yet but then when I start shrinking this down that first one's going to start getting overflow right away because I've now said Flex shrink of zero now that's only affecting this first one up here and not this one down here cuz nothing need you know obviously there's no issue but then the farther I go down here that one will start overflowing as well that's why the default Behavior we don't have to say Flex shrink one on all the children this is what I have here with the flex shrink and the flex grower the default behaviors for both of these if I turn that on now and I start making this smaller now these are all going to start or the ones at the top are going to start shrinking to accommodate the space and now the ones on the bottom are also going to start shrinking down to figure you know to shrink down because they need to shrink basically um and the way that flexbox is even figuring out how big these need to be is it's looking at before we did any of that shrinking at this stage we had to flex we had to shrink zero nothing is shrunk yet how big is each one of these what's the ratio that they're taking up of the parent and then once the shrinking starts it's going to keep that same ratio so as this goes and that's because they all have a flex shrink of one so they're all shrinking at the same rate so it's maintaining the same ratio between the size of each element you can do the math on all of this and figure it out um if ever you're interested in that so it's all shrinking down um and it's working and it's great cuz Flex shrink is is a very handy property but we don't we obviously don't want my layout to look inconsistent like this ideally this here would actually be over on the side there and this is where you could get into things with auto margins that work really well I've done that in another video so I'll link that down below and I'll throw a card up top at the same time if you want to know how you can do this with auto margins but for today as I said I want to focus on Flex shrink and flex grow and so that one there if we come and look that's my Hotel info right there I'd probably just come on that one let's say uh hotel Hotel info and we'll just do a flex grow of one on that one and it grows and it fills up all the available space now there is this awkward thing where these two are no longer the same and that's because we have different content in each one of these right so this one is getting down to this size whereas this one's allowed to get smaller once again it's going down to this natural size but at least we're growing and we're fitting into the space and we're just saying like instead of all that extra space being left over on the right side we're just going to add all that extra space to this middle one instead and for a layout like this that makes a lot of sense to me this can shrink down but we just let it do its own thing the rest of the time this can shrink down but ideally it just does its own thing and then this one here just takes up whatever space we need it to and if there's not enough space they're going to smoos and shrink and everything will work but we don't want inconsistent layouts like we have here and one thing that's interesting is because see how this one's smaller right now so the my image here as a ratio is actually bigger than what it is here they the same size but because this one is smaller it's going to this one's going to shrink at a different rate and actually at this point nothing started shrinking yet nothing started shrinking yet nothing started shrinking yet we've got to this point where nothing has shrunk on on the bottom one but everything obviously on this one has started to shrink um right because we needed to start shrinking because this started shrinking so of course the other two started to shrink here we haven't had any shrinking yet so we get this really weird inconsistent layout and it's kind of annoying and then eventually that one start shrinking too uh and here I have a break point that I've hidden down below so we'd get some wrapping um but you can see like it's really annoying that we have some inconsistencies coming in again and this is the time when people start doing weird stuff with flexbox in my own experience to try and force it to do things it's not very good at so my first suggestion here is maybe grid would actually be a simpler solution just because I could Define the size of each one and then this one could just be like a 1fr and then I could be happy but I want to explore more of what we can do with a flex shrink and flex grow and we're just going to take a little break for a second now to let you know that if you are trying to Wrangle Flex box and you'd like to really take control of it I have a course that is fully dedicated just to that where break down Flex box really understand how all the different parts of it work we do it through realistic examples I give you challenges to follow to reinforce what you're learning I also give you some code Snippets and design patterns that you can plug and play into your projects there's some cheat sheets there's a private group in my Discord and a whole bunch more the link to it is just right below this video and with that done let's get back into the lesson so the first thing I would probably do is choose this one on the right side here and I'd want them to be the same size so that one if we come and take a look is my hotel meta so let's come and add a selector for that we can say we get my hotel meta and first I'm going to do a flex shrink of zero uh and the reason I'm starting with that is because you know here we have two knights two adults I don't really want this to happen where it goes onto two lines and we have room and it's kind of weird and you know what it's never that big there's no reason for that to shrink so right away that's going to add some consistency not still far from perfect because here we have shrinking going on all of the elements here we don't now we could also do a flex shrink of zero on my image and we'd probably end up with a very consistent layout then uh there'd be a small difference but overall it wouldn't be that that big of a deal but we sort of at least there's some consistency on the right side of things now and of course you wouldn't normally have these outlines on there either so that would even make things look more consistent but just remember we it still looks a little bit weird because this image is shrinking and this one is not and that's because as soon as anything in flexbox starts to shrink it's going to keep that same rate of shrinking across all of the elements it's not going to focus only on one of them so what can we do to fix that well the problem right now is this the size of this element is being calculated to be different to the size of this one underneath even though it's the same div and everything the content is what's defining the size of it and I just might have to change that maybe I don't want the content to describe it I'm going to say what it is myself uh you can do this with a width or a flex basis if you're not changing Flex Direction you're not going to see a a big difference between the two of them but since we're using Flex I will come in with a flex basis uh and I could do basically anything here I could say 10 pixels and it's just going to make both of them work the same we'll explore why that is in a second but they're both going to work the same way now uh I could put this at a th000 pixels same thing they're both going to work the same uh the only difference is we we've shrunk our images down because these are trying to be really really big this what's happening with the big FXX basis so so I'd probably ideally just come in here with something like I don't know 30 CH or something sort of what's the ideal width of them um CH is just characters wide you can B come in with basically anything you want there but the idea is now it's not the content that's inside of these that's defining the size of them anymore it's now trying to be 30 CH and this one's trying to be 30 CH and this one here is trying to be 30 CH so because they're both trying to be the same size everything is going to balance out and work much better now you'll notice there is a little offset here and this is actually going to cause a little bit of a difference in the flex shrink going on uh just because again this one is a little bit bigger than the one we have here so once again I'd probably come on my meta and I'd also give this one a flex basis the careful thing we want to do with this Flex basis is this is going to be a locked in number at this point because I have a flex shrink of zero so here let's come in with a flex basis of uh I'm going to focus it sort of around this the two knights and two adults 14 seems to balance out pretty well and again it doesn't have to be in CH or anything else it could be whatever unit you want to use there um but now you can see that those are consistent as well but there's a big difference between this one here and this one here the Hotel info has a flex grow on there and it has a flex shrink because Flex shrink is just on by default unless we turn it off like we did with our hotel meta this one here if you spell it right shrink um this one we're going the ideal size is 30 CH but it's allowed to grow or it's allowed to shrink but that how big I want it to be if there's an if there's more available space then grow if there's not enough available space then shrink and so now what we've done is we've wrangled it because we've gotten them both behaving in the same way we've gotten both of these behaving in the same way and our images they're always going to be the same because we probably have a width or something declared on those at one point uh along the way and then we get this nice consistent Behavior where this one is locked in exactly how we want it to be the one in the middle is going to grow and Shrink doesn't matter what we throw at it it's this going to work if we have lots of text a little bit of text it's completely fine and it's nice and robust and then the one on the left here is just the default Behavior it shrinks if it needs to shrink if it doesn't need to shrink then it doesn't we could definitely you know play around with the height on it and stuff to get it to fit the space a little bit better um but it's getting a little bit squished at those sizes um but yeah it it we're wrangling Flex box we're taking advantage of the grow the shrink and a flex basis or as I said you could do these as widths as well and you um is if you're not changing your Flex Direction you're not going to see a difference if between a width and a flex basis uh and sometimes we use flex basis when really you want a width but in this case um I'm not going to stress too much the flex basis is going to work fine for what I'm doing so instead of just throwing a display Flex at something and hoping for the best use flex grow and then fighting with things and wondering why there's inconsistencies between similar components using the same layout that have different content remember the content is King when it comes to flex box and we need to throw things like a flex and a grow and a flex basis or width at things to be a able to control them a little bit more now if you'd like to Deep dive the flex algorithm a little bit more and really understand sort of the under the hood thing on how the sizes are all being calculated I have covered that in a previous video and I also said if you want to know about margin Auto and how you can use that to control your layout when you're using flexbox I have a video on that too both of those videos are right here for your viewing pleasure and with that I would like to thank my enablers of awesome Andrew Simon Tim and Johnny as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner of the internet just a little bit more awesome