Flexbox design patterns you can use in your projects

flexbox is absolutely amazing and in this video i want to look at three flexbox design patterns that you can use in your projects that are easy to set up easy to control and in the case of the last two do away with the need of media queries plus i've got a little bonus tip at the end about spacing so stick around for that one so we are here in vs code and i already have some css here but this is just for styling purposes it's not doing anything too much and you can see here this is my first section here so we're going to focus on this one right here which is all of them and right here you can see i have this div of even columns and i have three columns in there so the first thing we will do is come in and select those even columns so even columns and obviously you don't have to use these naming conventions i'm just doing this for this tutorial here you could have better class names for these but um we have my even columns and i'm going to do a display of flex on there and hit save and just like that we have a display flex and one of the issues with display flex is elements want to shrink down to as small as they can get most of the time as a default behavior because they have a flex shrink on them and you can see they are getting small this is just the padding that is giving them their size right now and an even bigger problem and this is why i like this one is let's say we came in and this one has 10 words in it and if we come on this one and i have a lorem lorem let's say 50 words on that one and then we have a little bit more in this one alurum uh lorem 25 and i'm gonna hit save and now we get three columns that are not all the same size and actually let's do one other thing that's going to exaggerate this even more is let's just shrink this padding down a little bit and you can see that this middle one is bigger than those other ones because there's more content in it and it sucks that content can have an influence on our layout when we're doing things like this and if we hit save here with no content that gets even smaller and obviously wouldn't have no content but um a lot of the widths here are being controlled by like the the size of the smallest word and stuff so the easiest way to go and make sure that they're all the same and that's the idea here is to have three equal columns at all times is to not select the even columns themselves but to select all the children or the direct children anyway because we don't want to select things that are deeper in there we can do an even columns and then select all direct children and then on my direct children what i want to do is a flex basis of 100 and when i hit save we're going to look over here and you're going to see they're all going to get the same size they're all equal widths now which is really cool and really useful and this is happening because when you have a flex basis of 100 on all of them but they're allowed to they want to be 100 flex basis is saying i all you all want to be the same size um and then you know if i wanted to i could even come in and delete one of these columns and hit save and now we have two equal columns and if you wanted four you could have four equal columns and so on and so forth um if you squeeze the columns too much you might find that there's a little bit of play just because it's flexbox is gonna make sure that the content is fitting um and at one point it can cause overflow if you have way too much content and it doesn't work but for the most part this will give you the most of the time if you're using it in a sensible way and not squeezing things down on a phone this should work really really well for you um so there you know here let's just do it really quick we can have uh we can have two columns hit save we have three equal columns duplicate it again hit save we have four equal columns and so on and so forth and it just makes it really nice to have equal columns where you know all of them are going to be the same and it doesn't matter how many you're putting in there and again this is happening because they want to be 100 but they're allowed to shrink down because flex shrink is on by default and so ideally they're all the same and what this is the real trick here is saying all three columns should be the same size what you don't want to do here is say 33 because that's going to work for three columns but then that could start breaking things if you have two columns let's say so all of a sudden if we deleted one of these now well they want to be 33 so they are and they don't have to be bigger because by default they don't want to be bigger so the trick is to take advantage of flex shrink on this one which is on by default and this is allowing uh it's going to make it work by doing it 100 and just making sure that all of them are at 100 um or they're all the same size it could be a thousand percent and i think it would still work actually so that is the first one that is my even columns right there two selectors and it should work pretty well almost all the time um let's go down to this gridish and the gridish is one of the ones i actually like the most so once again we're going to select my selector so it's grid ish and we'll do a display flex uh flex and we get them shrinking down to be as small as they can possibly be now the real magic of gridish comes in two different spots so the first one i'm going to do is come on to my grid ish and we're going to do the same selector we used before and on my gridish this time we're going to do something a little bit different we're going to use a flex the flex property which is a shorthand for both flex or for all three of flex grow flex shrink and for flex basis and what i want to do is a 1 1 and then i need to choose a size and this size in this case we don't want it to be 100 which is my flex basis which is again think of flex base is sort of like a width and it changes if you change the flex direction but for now that's the right way to think about it so if i do this it's sort of the same thing as my even columns to be honest the only difference with it is if i had a small number here they're allowed to grow so they're still going to fill up that available space so like this no magic is really happening but my flex basis doesn't even need to be a percentage or we could be let's say we do 33 actually we'll start there and so we sort of want three columns but if there's something else going on we sort of want to fix it and where the real magic for this comes in is if we use a flex wrap which by default is a no wrap like that so what we want to actually do is change that and make the d change it to wrap and what wrap is going to do is if there's not enough room go on to another row of content and so we got three columns and then we had two left over so they fill down here now the order of the properties here is flex grow flex shrink and flex basis and usually or not usually but by default the flex grow is actually zero which means don't grow so if you left it like this you would get something like this which looks a lot more like a css grid type layout actually but by putting the one here what's happening is it's saying we're allowed to shrink but we're also allowed to grow so we want to be 33 if we're in a situation where there would be empty space you're allowed to grow to fill that space and the real magic happens here not if you're using percentages because if you're using percentages and what's going to happen is no matter what you do pretty much it's going to stay the same right or we get this where it's really running out of room because there's not enough padding but you get this situation where it's for the most part always going to look exactly the same um but where the real magic comes in is if you come in here and you actually put a width so let's say i'm going to make it small just so we can actually see it in action here um a little bit better so it looks the same right now but it wants to be each one of these wants to be 10m so if i make this bigger at one point you're going to see well we can actually get let's let's just do this a little bit here so if we get bigger oh we can actually pop up because there's enough room for these to all be 10m and there's not enough room for this one to fit there so he's just going to grow across the bottom and if we get big enough they'll actually all go next to one another if there's ever enough room and then if we shrink down at one point they stack that way and if we go a little bit further they stack all one on top of each other that's so cool and so nice right this is super super awesome so you can create this responsive layout without any media queries anything like that now sometimes you do run into these awkward situations like this it depends how many columns you have the widths you've set and different things like that so it might not be ideal for every situation that you're going to want but depending on the type of content that you want to have it's super nice that it just automatically adjusts on the fly for you and i think in the right situation it can be actually super super useful so i think that is a really fun one that can definitely be used on sites and again once again the nice thing with this is you're setting you're selecting all your direct children here so whatever the content that you're placing in this it's just going to fit into the space that you've created for it so i think that's really really useful and then we get down to here which is my content and sidebar and this is obviously a very popular design pattern that people have so for this one we called it content sidebar and on my content sidebar well of course we're looking at flexbox design patterns so we need a display flex on there which will give me my three columns and for this actually what i'm going to do i'm just going to comment out these first two for now so we can just focus on this one because every time the page refreshes it's going to jump up if not so we have my content sidebar and we're sort of going to steal that same idea once again but this time we have to do it a little bit differently but we are going to use the flex wrap again so we want a flex wrap of wrap and this is what's going to let us get away with not having a media query which is obviously a nice little thing and in this case what we do need to do though is we need to select them separately so i'm going to do it like this where i'm going to say content sidebar and then whatever the nth child is child one now in your case you might have a nice class on that of like main content and sidebar and you could just put your class in here instead of doing it this way so it depends on how you want to set this up but on here what i'm going to do is we're going to say it has a flex of what do we want to do we want to allow it to grow and to shrink and i'm going to say it should be at 70 percent so we have a 70 main area and then what we'll do is we'll copy this and we'll paste it down here and this will be my nth child two so we're selecting the second one over here and on this one we want it to be 30 so if i hit save on that well we get this nice you know 70 30 break and for the most part we're always going to get that 70 30 break just like that which is super cool and super useful now there are a few issues with this um obviously depending on the situation this is being used and the type of container you have and other things like sometimes areas might get too big sometimes areas might get too small and we want to prevent that from happening and that's also where this is going to come into play because i use the 70 30 split here it's very rare it'll only be at really small screens when they'll actually stack on top of each other so here you can see it is actually stacking and again that's just because it's run out of room because of the padding and everything that's involved in here as well um but what we want to do is we sort of want to have more control on this so i think what i'm going to do is i'm going to say and this is very specific to this situation because we're you know we have lots of empty space in white space and stuff and so what i'm going to do is on my main area i want to prevent it from ever getting too small because when we start getting into like this realm like obviously we don't really want this to happen right that's getting really really narrow so i'm going to throw a min width on here and i'm actually going to use ch and the ch unit is a super useful unit just it's how many characters wide so it's based on the font size of that area so it's going to end based on the font so it's going to sort of calculate so just make sure that our line lengths aren't getting too short and what that means is if we have that it's going to stop like when this gets to 20 let's actually boost that up just for demo purposes for now because it's still kind of small so you can see that even though it's allowed to grow and shrink when you set min and max widths that actually overwrites the the flex shrink in flex grow so by setting a minimum width we're saying that like if there's room they're going to go next to each other but if we run out of room that they're going to stack because you know there's not enough room so then it's allowed to grow again but obviously 50 ch is really big and it's going to cause an overflow so that's no good um so let's just say 25 or 30 ch i think would be a bit safer of a number and you can still see i'm getting some overflow so you do want to play with those numbers a little bit probably to get something that works for your layout and i think most of the time you won't have all this empty space around so that will help but you get this idea of it's being big and then we get to here and then it breaks and it stacks one on top of each other and of course you could do this with mr ram or pixels as well and if you know if you want to make sure that it's it's at a sensical level and but you get that and then they're going to stack one on top of each other so there we go and then we can even do the same thing on the side here of saying this has a min width of say 15 ch and then it might even kick in earlier then because here we get it going like that but we want to make sure this area doesn't get too small either and then just like that it can break over like that and if you're in a situation where you're getting to really big screens and i don't know you don't have a container this is getting too big you can also throw a max width on this as well to prevent the slide you know you'll have this range where the sidebar grows and drinks but it never gets too big and it never gets too small before we get to the last little thing on spacing i'd like to let you know that i've put together a cheat sheet with all three of these design patterns on it so if you'd like that cheat sheet to have it's a single page pdf you can go and grab that down below and then come back to see on how we can do our spacing on these really easily so on to how we can create spaces between these and i do think that's super useful to be able to do and i'm going to do it the the modern css way because i like exploring modern css and that is through we're just going to select all of these um so i'm just going to put my cursor there and then i'm also going to put my cursor here anywhere i have a display flex i want to put my cursor and i'm going to put in a gap and you might be saying kevin isn't gap a grid property and yes gap is a great property it used to be grid gap and then they changed it recently to speed gap it works for grid it works for columns and it also works here for flexbox now most of the time it doesn't work in safari sadly um so if you do want it is in the technical preview of safari so it's on the way it's almost here it's super close you can see how wonderful this works so it's not only creating my gaps here and here but it's also creating my gaps when i end up with rows like that so you know you get this nice layout that did i undo my oh my gap is actually breaking that look at that you might want to do a calc so let's just move this down to 25 for now though just to get it to work there we go um so you know the gap is working this way here and then when they stack one on top of each other the gap works that way it's just so much magic and so wonderful to get property in flexbox i did do a deeper dive on the gap property and how we can do a fallback for safari and actually it's not a fallback for safari it would be for everybody the only thing is sadly it will not work in this situation and would require immediate query for something like this here or anytime you want things to stack the other way just because of how it works but it's something that you know in the meantime you could definitely use but again it wouldn't work on this one sadly just because of this one being a little bit more dynamic and you don't always know which one is here right so here it's the third one and when i go like that then the third one uh moves up and stuff like that but i have a video on that the link for it is down below if you want to check it out um where yeah i dive into more detail but the gap property is in the technical preview of safari right now so hopefully it won't be too long until we see it in safari and we can start using it in production all the time if you're interested in that cheat sheet and you didn't yet go and get it don't forget to grab it before you go and a big thank you for watching i really hope that you enjoyed this video and got a few ideas that you can use going forward a really big thank you to my patrons for their support each and every month and of course until next time don't you forget to keep on making your corner of the internet just a little bit more awesome and you might have noticed i have glasses now how did this happen i'm getting old this is what's happening i'm too old to be a youtube content creator i think this is this should be maybe the end of you know no i'm just kidding but i am getting older my eyes are starting to get fuzzy a little bit i was fine without them i guess but here we are and yeah hope you like i hope you like what they look like and i really hope you like this video until next time guys bye

Channel: Kevin Powell

Views: 174,774

Rating: 4.9839411 out of 5

Keywords: Kevin Powell, tutorial, html, css, flexbox, responsive design, responsive web, responsive web design, flexbox design patterns, flexbox layout, flexbox tips, flexbox tricks, flex-wrap, flex-grow, flex-shrink, css flexbox, flexbox tutorial, flexbox explained, css flexbox tutorial

Id: vQAvjof1oe4

Length: 15min 32sec (932 seconds)

Published: Wed Dec 30 2020