Flexbox Alignment & Justification Without the Guesswork

Key Takeaways

hello my front end friends if you're anything like me when you're using flexbox you often mix up your gine items and your justifi content and it can be frustrating to know which one to use when but there's actually some pretty good mental models that you can use about knowing which one to pick in the right time or little tricks to have a mental model I guess I should say that we're going to be exploring right now in this video as well as a few other little tips and tricks along the way with flexbox as well so you can see I have my parent here with a display of flex on there if we turn that off they just stack on top of each other as regular Block Level elements nothing too uh fancy and my shortcuts aren't working so we'll do this the hard way and turn that back on to have my display flex and first of all they are stretching as well so they're hitting the Min height that I have set here on the parent which is causing them to stretch out just for the simple visualization that we're doing right now uh and the other thing before we get into sort of this mental model uh that I was mentioning if you go into your Dev tools uh and it seems to be every time I talk about this people get a little surprised and they don't realize it but if you go on whatever's has the display Flex on it you'll get this little pill that shows you the flexy stuff going on so we see the empty space we see the gaps that are in there and then I also get this little tag down here where my display flexes on the parent and if I do that I get this really cool visualization that just helps me out uh right now uh the Align content is at the top I guess cuz it's in it's not even alphabetical order I don't know why they chose this but anyway you can click these things to like move stuff around and change them or turn them off and then you'll see see what the default values are for all of them uh which can be useful align content is that one that you barely ever use but sometimes it can be useful so we will talk about align content near the end uh but just really fast from my alignment we can see that I can align them centered or I can align them to the top or I can justify them and align them or do different stuff and you can play around with this which can be really useful just in quickly like if you're getting frustrated and you don't know why it's not doing what you want it to do you can come here uh and play around with it a little bit I would say is don't copy and paste once you get something that actually works instead of copying and pasting what I would do is actually uh write in the code afterward just so it helps you remember what you're doing along the way but it's also one of those things a little bit it's like margin and padding that I always say for beginners try one if it doesn't work try the other and over time it should hopefully syn in though of course the problem with flex box is you can change the flex Direction which sort of makes things a little bit more uh easy to mix up but what we're going to do let's reset this so I'm just going to refresh my code pen here to go back to the original that we had where it's set up with a display Flex my Min height and nothing else going on and what we're going to do is turn on these visuals that are right here just to help us visualize the main axis and our cross axis that we have right there and the main axis just goes left to right as a default and my cross axis is the up and down so my items are stretching this way and they're aligned to the start uh along the main axis and this is where that mental model can sort of come in a little bit and I think I got this from Josh KO who knows how to teach CSS as well uh and so if it was from Josh thank you um I might be misremembering that and I apologize if it was someone else uh who talked about this but let's start by talking about the justify content justify content and first of all the word content there gives you a bit of an idea of we're grabbing all of the content so you're just grabbing everything sort of as one bunch of stuff you could say it's it's one net sort of grouping everything together and then we can choose what we're doing with that content so let's say we want to do Center and it's going to Center that content along the main axis so from left to right we're centering it there that's not too complicated but let's say we did a one of the ones that space uh we'll do a space between uh why not so it spaces them all out and adds that empty space in between each one of them and it's doing that along this axis that's right here along that main axis this is really important because we actually have space that we can put in between them let's open up those Dev tools again really fast here and we're just going to turn back on that visualizer and you can see all of that empty space there if we don't have that justified content let's just turn that one back off for a second you can see that we have all that empty space over here so all that justifi content space between is doing when we turn it on and if we highlight it here it's showing us that it's Distributing that space equally between them if ever you're doing something where you're doing a space between space around any of those things it wouldn't really make sense to do this on the cross axis right cuz let's you know try and visualize that let's say we come here let's uh we'll turn that back on let's close down our Dev tools uh again here and let's say we do an align align uh items align items of Center and if we align our items center it's aligning them in the center of this up and down axis this way right but we're now using the items word so it's like we're we're taking each item and we're moving them individually into the center up and down we're not treating them as a big group anymore we're we're sort of grabbing each of those items and putting them where we need them to be because we can't move the content in the same way this way right if we wanted to do an align items space between it's space you know on this axis here there there is no space between them the space between is only along the main axis and not along the vertical axis so this doesn't really make sense so Center this way we're centering it along this way and they're sort of centered along with themselves right if I take one of these items and I make it bigger we're still centered ing this individual item along this axis it's not really paying attention to what the other items are doing it's just taking that individual item centering it individual item centering it one after the other after the other which is why we can do something like this let's grab this we're going to make this one here our blue color uh we'll make that our third one and let's make this one 200 pixels and that's why we can do an align self of start because I can take that and I can move it to the start on its own because the items here is always looking at the individual items and how they're aligning on that cross axis whereas you know people always wonder why can't we have a justify self but how could we justify self of start or end when the justify it's looking at the group of content along this axis like if I did a justifi self of start where would it go would it move all the way over here it doesn't really make sense because there's these other elements that it's sharing along that axis along the the justify axis that we have available to us so when we do that it doesn't really make sense anymore but aligning the items again it's just align self is I can move this one thing all by itself or a line items is just saying all of you on your own don't pay attention to what the other ones are doing just go on the center along that cross axis and of course what we can do is we can come here and we can actually say Flex direction is column which is going to change everything it's going to move those all around because what that's actually doing is switching those axes around as well and right now this this Min Height's actually becoming a little problematic so we'll do that just so we can get the fourth one down there and once again if we think about it we're saying I want to align myself so the third item to the start and again align is the cross axis so by having switched uh our Flex direction we're switching the cross axis right we we turned this to go this way instead and so because we've turned that it can go to the start along the cross Axis or I could say that you're actually going to go to the end on the cross axis and it's going to move it to the end instead and then we can we take number two here and let's just say we come here and we add some content two has more content once we've done that it's not paying attention to what the other elements are doing it's just centering itself along that main axis even though it's just a line items it's just doing it to each individual one because it can do it that way whereas my Justified content right now is still doing a space between so there is some extra space that I can put in between each one of those cuz again it's grouping them all and then spreading them all out so then we could put this a center instead and then it's taking all those items and centering them along that main axis and my visuals are a little broken cuz I didn't make it very well uh to go to these larger sizes obviously um but I think it gives you an idea of sort of what we're talking about here and how it's moving around on these different axes so let's actually go back and switch this Flex Direction back around and we can turn that off uh and what we're going to do is actually come in and add a few more items here so we have eight items now and you can actually see we've run into a problem where we have some overflow um just for those visuals I had I turned off my overflows cuz they were going to stick out the ends if not um so you can see though they would be overflowing we just have an overflow hidden so they can't so one common thing that we'll do is a flex wrap of wrap which will stop them from overflowing and it's actually going to wrap the items down and as they continue to run out of space they continue to sort of do this type of thing right uh and that's where we have the final property that can come in which is the Align content again we just have to make that thing of align items is grabbing each individual item justify content is grabbing all the content and moving it around sort of as a group on that main axis and so align content the Align word is still sort of saying cross AIS to us and what it's doing now is it's grabbing all of the content and it's going to move it along that cross AIS and just really quickly before I show the example of how that's going to work if you are learning something from this video and you want to learn more about flexbox I do actually have a course that deep Dives this topic in a lot of detail including some actual examples that you could use in real world project including looking at more real world examples than just sort of silly demos like this where we have some visuals we start with the visuals move into the actual more real world projects I leave you some patterns that you can reuse over and over in your projects uh along the way and it just we really break down flexbox and make sure that you really understand how it's working so you can take the most advantage of it in your day-to-day work so if you're interested in that it's flexbox simplified.svg align content now uh so let's do that align content and we'll do a center and for that I am going to once again make this a little bit bigger let's bump that up to 800 once again and let's turn that off for a second and see what's happening where by default we're going to do a few things here actually let's turn off the Align items and by default they want to stretch and so this is in a row of content and this is sort of an a second row of content so they're just taking up basically 50% of the parents height total a lot of the time you're not going to have a height on the parent it'll be the different children creating the height and then the elements might have varying sizes so they'll be centering or stretching depending on what's going on uh along your individual axes here so these stretches are working and then we have sort of you know our align um self end here is pushing that one down to the end and a few different things that are going on but by default they want to stretch and they just want to take up the available space that's there and so if we do on all of them and align item Center which is always what we start with go I want to take my items and Center them each one of those rows has its own cross axis that we're centering on now so this is centering in that bigger space that it had available and these are centering in that bigger space that it had available to it so each row is centering its items there which is often not what we want and this is again where you go oh man that's not this is frustrating it's annoying uh and it is sometimes you do that and you go oh yeah I needed the content instead so you just come here and you switch that from align items to align content where now we're looking at the the main cross cross axis for this entire element we're saying take the content everything just like we were justifying it before around that way we're justifying the content we're grouping it all we're moving it you can do an align content Center and it's taking all that content and centering it or you do your align content and and it moves it all the way down except in this case we are in code pen so we want a flex end uh or we can do the start and again it has to be a flex start uh old have it diey hard there and it pushes everything up over to the top and one thing I did mention along the way here too is that we had the alignment that I was talking about uh and I said we can't do a justify self cuz justify self really doesn't make sense but you might be saying I want to take this eighth item here and actually push it all the way to the end and that's usually when someone's thinking I want to justify self something that's what they're thinking or maybe I want this fifth one to line up here and these other ones to stay there something like that uh and there is a trick that you can use for this but it's not about justification cuz again justifying content along there that just justifying items doesn't make sense the with the way that that axis works all right but what we can do is let's grab that eighth one I'm just going to copy this really fast we can come down here and this is a little bonus tip that I snuck at the end for people that actually watch the entire video so I do appreciate it and give you a little extra content we can just say margin left of Auto and like magic it's going to push itself all the way over to the end there now what you might wanted is to have kept this part centered uh but CU what's happening is the margin left Auto is basically taking all of that empty space you've done this before right margin left margin right Auto and it centered something you can do this on anything and it's going to push the thing all the way to the right side because it's adding all the empty space to the left so then what we could actually do is do the same thing but on the fifth one and do this as a margin right and now we're Distributing the uh oh margin margin right left Auto actually on that one as well uh sorry I was mixing myself up so now we're taking some of the space and putting it there and the other half of the space is going here it's automatically Distributing the space in between them and you can sort of have some really interesting things come up by playing around with your margin Autos left and right when you're using them in conjunction with flexbox uh depending of course on what you're trying to do I would that sort of I would use my Flex boxy stuff first and then come the stuff at the end and then if you need to move something along the main axis that's where your margins do come into play and so yeah if you do want to unlock more of flexbox you feel like there's a lot more you could learn from it flexbox simplified the link for it is in the description below and with that I'd really like to thank my enablers of awesome Andrew philli Simon and Tim as well as all my patrons and channel members for their continuing support and with that thank you very much for listening and of course until next time don't forget to make your corner of the internet just a little bit more awesome