Flexbox Tutorial - Flexbox containers

Key Takeaways

flexbox is awesome it's incredible it's completely changed how we make layouts we don't have to do floats and clears anymore which while simpler also cause so many problems that flexbox just doesn't cause so that's awesome and this is the beginning of a three-part Series where we're going to be exploring flexbox hi there if you're new here my name is Kevin and I teach people how to make the web and how to make it look good while they're at it as I mentioned this is the start of a three-part series that I'm going to be doing on flexbox uh is an introduction to flex boox it's something for people that have started using it and aren't too sure about it or just have been confused by it and have avoided it completely in this video I'm going to be looking at the flex container so all the different properties we can use on a flex container in the next video we're going to be looking at the flex items themselves which are the pieces that are inside of a flex container and on the last video we're going to build a really simple layout using Flex box in a few different ways so like I said this is this video is all about the flex container so it's the different ones and the flexx container is the big thing that all the stuff is inside uh just by doing different properties on the flex container itself it completely changes how the whole thing works and it can be kind of weird and confusing so it's we're going to look through some examples or we're going to open up a code pen thing and just play around with it pretty much um looking at what all the different things do and I'll try and explain as much as possible as I go so let's just jump right into it all right so what I've done now is I've set up a document here in codepen so the link for this will be down below um all we have is a container here with five different different items inside so it's just five different divs I've given them a class of item but there's nothing much going on on these yet my container itself just has a pink background so we can see where my container is I've given it a height of 50 VH and a width of 50 VH just to make sure that it's a perfect square um I actually meant to make that VW so why don't we change that over now um the padding on it will be just 0.5 so I just want to keep my items off the side and I've centered it on the screen here on uh my items themselves so each one of these little items just has a light blue background on it and a margin of 05 um and the whole or 0.5 I should say and the whole point of that is just to create these little spaces in between them so we can separate them a little bit the first thing I'm going to do right now is just set change this over so I'm going to change the display to flex and as soon as I change the display to flex we can see that everything completely changes I'm going to run through um we're going to be going through this sort of item by item of all the different Flex properties so the very first flex property we're going to look at uh right now is the flex direction direction and what this has done by default is set it to row so a row is something that goes uh all the way across right so we have my one big row and then so because it's set as a row these have turned sort of into columns inside of that row so again if I take this now we take both of these off we can see it completely changes the behavior of what's going on on so by being a row all of my items have to be in that one row so they all line up one next to each other they also stretch to take this whole area up you don't always see this if they don't have a background on them so I like playing around with background colors a little bit just so I really know what's going on so um I said we're going to look at this item by item so the first thing we have here is our Flex Direction so my Flex Direction by default is row and we can actually reverse this so I can do a row reverse and it's going to switch it all around this is almost like doing or it's almost exactly like doing a float right so you can see that it actually does the flex item one my first one goes all the way to the right side and then it goes in reverse order and they're lined up all the way on the side there so doing a row reverse is literally pretty much like doing a float right the other option we have is to do a column and if I set to column it's almost resetting it back to how it was before where they're all stacking one on top of each other so now that it's a column they're all a column will make things stack instead of go next to one another so depends on the way you want it to behave personally I like being able to make this change at different media queries this works really well for a navigation um because in a navigation you might have something that's row to begin with you have your navigation items one next to each other and then a different screen size they'll switch over to a column and they'll all line up one on top of each other which sort of makes more sense at the smaller screen sizes um so for now I'm going to switch this back over to row and we'll look at the next thing we can do and the next thing we can do is a Flex wrap so Flex wrap um by default is set to no wrap meaning things don't wrap and right now it doesn't really make much sense because I only have five items and they're not taking up all the space so I'm actually going to take these five items and let's uh paste this in there so I have 10 and you'll see now they're all sort of squeezing into the available space they're just they're making room for one another and they've gotten a lot smaller and let's add a whole bunch more actually and you can see now they're actually spilling out the side so because um they've gotten as small as they can possibly get so one thing with flex items is they will adjust automatically to how big or how small they should be based on the content that's inside of them and because now I have so many items they've gotten as small as they can get and they're flying out the side so let's add a whole bunch more let's get rid of that space and they're just spilling out the side here by default things will spill out the side and it's personally kind of annoying that that's the default is no wrap but we can easily switch this over to a wrap and now they'll stack one on top of each other instead you'll also notice that uh let's just undo that for a second with the no wrap they got a small as they could so it was literally shrinking down to the smallest possible size it could to fit that text and then when I switch it over to wrap it's keeping the text on one line of code or one line of visual line here so we'll Flex item one that's as small as it's going to get it runs out of room and it will wrap that down below I'm going to delete a whole bunch of these let's go back to the original that we had so another way this uh does impact how things are working is I'm going to go over to my items here and give these a width so if I do a width of like 25% on it um my wrap it is making it wrap down so it's 25 50 75% I have some padding on these and I have some or I don't have padding but I have some margin on these so it doesn't have enough room to fit there so it's wrapping down below this is something that's really strange though if this is set to no wrap it actually changes the the width of it it's not 25% it's squeezing it into fit which personally I find a little weird and what that means is it will you know you can see that it's shrinking and growing so it's ignoring this width more or less it's going it's sort of like a Max width almost um and just to show you if I make this like a th pixels oops I don't need two semicolons there but a th pixels it doesn't change it's not all of a sudden shooting out the side because it's 1 th000 pixels tall um and this is a bit of an unexpected Behavior so just something to watch out if something's not behaving the way you'd expect it to just be aware the default is no wrap we can switch that over to wrap again it's this is becomes almost like a Max width on it so it's not going to spill out the side if I switch this back over to 25% let's say this is 25% now um and if my screen got really small I guess then you can see it's it's not even well yeah it still is a Max width but it's uh it's changing based on the size of the overall container and all of that stuff so it's a little bit unexpected um the way this Flex wrap works and again the default is no wrap the next thing we can look at is uh something called Flex flow and flex flow is just a shorthand for Flex Direction and flex wrap so I have Flex Direction row Flex wrap is no wrap I could write um Flex row and in here I could write row no wrap so this is literally the same same thing as keeping this like my flexx direction is row my wrap is no wrap so if I switch this over to column it should column it should overwrite actually oops I didn't this is flex flow not Flex row flow there we go um so my column is overwriting my uh row that's here so Flex flow is combining the flex Direction and the flex wrapped together into one as a short hand I'm going to get rid of that one for now the next big ones that we can uh look at are are justify content align items and align content and these are often mixed up and for good reason I would say so I'm going to put these On Their Own Line I'm going to do a justify content first just I misspelled that though justify content and uh the default for this is flex start so I'm going to leave that now so nothing should change that is the default value for our justify content we could switch Flex start to flex end and that's going to push everything over to the the end end of our item now the way justifi content works is it's dealing with the main access so I'm dealing with a row so rows go from here over to this side so it's moving the content on the main axis so it's moving it this way so if I flex start is starting at the start of my row Flex end is pushing everything over to the end I can also Center that so let's do a center so that's kind of cool it's centering it this is a really nice thing that we couldn't do with our old float and clear system so Flex our Justified content lets us Center things we also have a space between which will keep the first item all the way on the left our last item all the way on the right and it just puts an equal amount of space between all of them and the last one which I really like is space around which will put an equal amount of space on each item so this space is equal to halfway in between these two which is equal to this which is equal to this and so on and so forth so it's an equal amount of space around each item it's sort of like a equal margins on the left and the right of each item in this case but remember the justifi content is working on the actual access the main access so I said before that a row goes this way a column goes up and down so if I switch my Flex direction to column the justify content is now working up and down so my space around it's putting the same space on top and on the bottom and if I Put A Center on this it will Center it vertically instead of horizontally and if I make this a flex and it's going to push it all the way to the bottom so it's a little bit weird that justify content Works differently but it's always focused on the main access and that's the thing to remember um I'm going to switch this back to row for a second now and let's put this back to flex start just for the moment um another one that we have is our align items so let's try our align items we're almost at the end of these actually align items and the default for this is stretch so nothing should change because that's the default for my align items I'm going to change this over to a flex start so it's the same uh wording that I'm putting there but I'm looking at the alignment of my items I want my items to start at the top so they're shrinking down to the minimum size they're not stretching to fill up that whole Space uh anymore they're going all the way up to here so that's Flex start you can guess probably what Flex end is going to do it's going to pull it all the way down to the bottom now the difference is justify content is working on the main access so justifi content is always the main access and align items is working on the cross access which means the opposite access so because this is a row my row my justifi content is working this way and my align items is working up and down so Flex end is there now if I switch this over to a column they switch over so Flex start means the top and align items Flex end means the right side because again it's the the cross AIS and then this is where it can get kind of confusing when do I use justify content and when do I use align items they all take pretty much the same uh properties there's one that's a little bit different um but again let's just do a little let's Center that so then it gets centered in the middle and one thing that's kind of convenient is a center Center we always just plug something right in the middle if you're not sure which one to use honestly as you're getting used to this just try one and if it was the wrong one use the other one I know it's not the perfect answer but it should work pretty well overall one thing that align items has uh or one thing it doesn't have is the space between and space around and one thing it does have is Baseline um and let's change this back to a row for now okay so now that they're they're back to just being there um I'm going to take uh let's just do let's call this big and uh let's come over here and say that big has a font size of 2m so it should be twice as big that font um so my line items let's just do a flexx start and they're all going to be lined up right on the top this is because of a little bit of extra margin we have there so it's pushing it down a bit so they're all pretty effectively they're all lined up on the top um and when we use the Align items basine it means that the first line of text um is all lining up on the same line there so you can see that the bottom of the first line of text on all of them so if one of these the only time you'll really notice a difference with this align items Baseline is if there is different font size involved if everything has the same font size uh this will look exactly the same as a font as the flex start but because our font sizes are different the flex start does look a little bit different you can imagine the Baseline one works really well if you had a main content area and then a sidebar because you wouldn't want this happening this is one of those really annoying things that can happen where something's starting up higher than other things so if your main content area and your Baseline oops I misspelled that um if if your main content area and your sidebar both have aign or are sitting in something with an align items Baseline you know that they all everything's always going to be starting at the same point which just looks a little cleaner so that is pretty cool um now another thing that can be confusing is something called align content and that's cuz align content has uh sort of a m it has the same properties as the justifi content they both a content in them so I guess that makes sense um so we don't have the Baseline option and we do have the space between and the space around now align items uh sorry now align content only works if you have multiple lines of content right now it's not going to do anything and it also conflicts with the Align items so I'm actually going to delete align items now so we can see what it's doing um and when you only have one set of things here let's just do an align items Flex end and you can see it's not actually doing anything um whereas if I had my align items Flex end they would be just uh all lined up at the bottom align context Flex end hasn't changed anything it's it looks exactly like it did it's always looked um so again it only works when you have multiple row um things along the cross AIS so my cross access in this case is up and down so let's put a whole bunch of stuff in there and let's change this over to wrap so we actually get multiple lines of stuff there we go so now my align content is going to start working so I can do aent on that now just to show you this is my align content um I'm going to comment that out let's put in an align items Center and um you can see that works a little bit differently so align items Center is centering each one in that available space that it has so let's put that back to stretch for a second so it's pretty much aligning it in the center of each one of these parts here um whereas the aligned content Center will again overwrite what this is going on so if I delete that it won't even change anything and it's aligning all of the content right in the middle we can also do a space around or we can do a space between so um the Align content actually works a lot like the justify content but you need to have multiple lines of content once again I just I can't emphasize that enough whereas align items is dealing it more one at a time it's really one of those things right now it might be seeming kind of confusing how do you know which one to choose you try one or another the other thing I would suggest is having a flexbox playground type of thing to uh play around with and I will put a link to one of those below it is a lifesaver when you're first playing around with this stuff having one of them around I still use one sometimes just because um the mix of all these properties can get kind of confusing and that's what you can do with your Flex containers so I hope you like that video um just so you know you might have seen it in the last couple of videos but I thought I'll mention it again I do have a p now so if you do want to support this channel if you find that you're getting a lot of value from it I'd really appreciate it but don't feel any obligation to do so um on top of that just a big thank you for watching this video if you have any questions about it still that you're not too sure about leave a question down below in the comments but do remember that the next video is going to be dealing with the flex items themselves so maybe your question will get answered along there if you haven't subscribed yet to this channel consider subscribing it's a new video every single Wednesday just like this one and until next time remember try and make your corn of the internet just just a little bit more awesome