 Hi there, my friend and friends. Flexbox is one of the most useful and used to 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 FlexShrink and FlexGrow specifically with this example that we can see right here where I got a design from Dribble a link to the original one 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 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 directed children so those three divs that we just saw and we're going to 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 because 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 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 and when we do a display flex being blocked 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 in line 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 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 another important thing I want to do is I'm going to highlight this 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 because 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 for 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 but there's a problem let's say I come in and I have another one after because hotel listings you never just have one right these sites always have hundreds of them you search up your hotel so let's say it's a different one basically the same but the second one only 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 flexbox 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 big would this be if we match the exact size of this this is my ul actually where I have some I've made it sort of go across with some inline block 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 about 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 flex 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 a whole flexbox 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 flexbox 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 if you're in firefox it's similar icon but on the other side of the page 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 this one here too and we're going to do a flex shrink of zero and hit save notice that 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 it's now a flex child so things are different but they haven't started shrinking yet this is flexbox's intrinsic size this is what flexbox has 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 because 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 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 if ever you're interested in that so that's all shrinking down and it's working and it's great because 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 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 smoosh and shrink and everything will work but we don't want inconsistently it's 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 the 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 it nothing started shrinking it nothing started shrinking it we've got to this point where nothing is 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 starts shrinking too and here i have a break point that i've hidden down below so we'd get some wrapping 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 one fr 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 flexbox and you'd like to really take control of it i have a course that is fully dedicated just to that we break down flexbox we 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 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 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 probably end up with a very consistent layout then 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 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 big difference between the two of them but since we're using flex I will come in with a flex basis 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 I could put this a thousand pixels same thing they're both going to work the same the only difference is we've shrunk our images down because these are trying to be really really big this is what's happening with the big flex basis so so I probably ideally just come in here with something like I don't know 30ch or something sort of what's the ideal width of them um ch is just characters wide you can 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 30ch and this one's trying to be 30ch and this one here is trying to be 30ch 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 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 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 30ch but it's allowed to grow or it's allowed to shrink but that's 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 the both behaving in the same way we've gotten both of these behaving in the same way in 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 in shrink doesn't matter what we throw at it it's just 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 we're wrangling flexbox 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 and sometimes we use flex basis when really you want to 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 in a grow and a flex basis or width at things to be 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 layouts when you're using flex box 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