Flexbox Tutorial - Flexbox containers

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 well 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 gonna 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 as an introduction to flexbox it's something for people that have started using it and aren't too sure about it or just I've been confused by it and I've avoided it completely in this video I'm gonna be looking at the Flex container so all the different properties we can use on a Flex container in the next video we're gonna 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 gonna build a really simple layout using flexbox in a few different ways like I said this is this video is all about the Flex container so it's the different ones and the Flex container is the big thing that all the stuff is inside 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 gonna look through some examples we're gonna open up a code pen thing and just play around with it pretty much 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 alright so what I've done now is I've set up a document here in code pen so the link for this will be down below all we have is a container here with five 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 as a pink background so we can see where my container is I've given it a height of 50 V H and a width of 50 V H just to make sure that it's a perfect square I actually meant to make that V W so why don't we change that over now the padding on it will be just point five so I just want to keep my items off the side and I've centered it on the screen here on my items themselves so each one of these little items just has a light blue background on it and a margin of point zero five and the whole i0 point five 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 a 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 gonna run through we're gonna 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 right now is the Flex direction direction and what this is done by default is set it to row so a row is something that goes all the way across right so we have my one big row and then so because it said is a row these have turned sort of into columns inside of that row so again if I take this you know we take both of these off we can see it completely changes the behavior of what's going 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 I said we're gonna 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 gonna 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 the 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 we'll make things stack instead of go next to one another so it 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 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 and 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 by default is set to no wrap meaning things don't wrap and right now it doesn't really make much sense because they 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 paste this in there so I have ten and you 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 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 up the side and it's personally kind of annoying that that's the default is nowrap 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 let's just undo that for a second with the no wrap they got as 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 label and that's as small as it's gonna get it runs out of room and it will wrap that down below I'm gonna delete a whole bunch of these let's go back to the original that we had so another way this does impact how things are working is I'm gonna go over to my items here and give these a width so if I do a width of like 25% on it my wrap it is making it wrap down so it's 2550 75 percent I have some padding on these and I have some 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 in to 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 and just to show you if I make this like a thousand pixels oops I don't need to semicolon so but a thousand pixels it doesn't change it's not all of a sudden shooting out the side because in pixels tall 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 gonna spill out the side so if I switch to this back over to 25% let's say and this is 25% now and if my screen got really small I guess then you can see it's it's not even well yeah it still it's a max width but it's it's changing based on the size of the overall container and all of that stuff so it's a little bit unexpected the way this flex wrap works and again the default is no wrap the next thing we can look at is something called flex flow and flex flow is just a shorthand for flex direction and flex wrap so a flex direction ro flex wrap is no wrap I could write flex Rho and in here I could write Rho no wrap so this is literally the same thing as keeping this like my Flex Direction is Rho my wrap is no wrap so if I switch this over to column it should call them it should over write actually oops I didn't this is flex flow not flex row hello there we go so my column is over writing my row that's here so flex flow is combining the Flex direction and the Flex wrap together into one as a shorthand let me get rid of that one for now the next really big ones that we can look at our our justify content align items and align content and these are often mixed up and for a good reason I would say so I'm gonna put these on their own line I'm gonna do a justify content first misspelled that though just defy content and 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 justify content we could switch flicks start to flex end and that's gonna push everything over to the the end of our item now the way justify 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 access 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 justify content that lets us Center things we also have a space between which we'll 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 we'll 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 equal margins on the left and the right of each item in this case but remember the justified 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 gonna push it all the way to the bottom so it's a little bit weird that just of a content works differently but it's always focused on the main access and that's the thing to remember I'm gonna switch this back to row for a second and let's put this back to flex start just for the moment another one that we have is our a line item so let's try our line items we're almost at the end of these actually a line items and the default for this is stretch so nothing should change because that's the default for Maya line items I'm going to change this over to a flex start so it's the same 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 anymore they're going all the way up to here so that's the 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 justify content is always the main access and aligned items is working on the cross access which means the opposite access so because this is a row my row my justify 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 aligned items flex end means the right side because again it's the cross access and this is where it can get kind of confusing when do I use justify content and when do I use a line items they all take pretty much the same properties there's one it's a little bit different 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 will 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 no it's not the perfect answer but it should work pretty well overall one thing that a line items has or one thing it doesn't have is the space between in space around and one thing it does have is baseline and let's change this back to a row for now okay so now that they're there back to just being there I'm gonna take I let's just do this call this big and let's come over here and say that big as a font size of 2m so it should be twice as big that font so my line items let's just do a flex start and they're all gonna be lined up right on the top and 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 and when we use the align items base line it means that the first line of text is all lining up on the same line there so you can see that on the bottom of the first line of text on all of them so if one of these the only time you really notice a difference with this align items base line is if there is different font size involved if everything is the same font size 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 when something starting up higher than other things so if your main content area and your baseline mr. Philbeck if your main content area and your sidebar both have a line ID or sitting in something within the line items base line you know that they're all everything's always gonna be starting at the same point which just looks a little cleaner so that is pretty cool now another thing that can be confusing is something called a line content and that's because a line content has a sort of a mid it has the same properties as the justified content they both have a content in them so I guess that makes sense so we don't have the baseline option and we do have the space between in the space around now aligned items sorry now aligned content only works if you have multiple lines of content right now it's not gonna do anything and it also conflicts with the aligned items so I'm actually undelete aligned items now so we can see what it's doing and when you only have one set of things here let's just do an aligned items Flex end and you can see it's not actually doing anything whereas if I have my aligned items Flex end they would be just all lined up at the bottom aligned context Flex end hasn't changed anything it's it looks exactly like it did it it's always looked so again it only works when you have multiple things along the cross axis and I 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 aligned content is going to start working so I can do a center on that now just to show you this is my aligned content I'm gonna comment that out let's put in a line items center and you can see that works a little bit differently so a line item 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 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 the aligned content actually works a lot like the justified content but you need to have multiple lines of content once again I just can't emphasize that enough where's the line items is dealing it more at 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 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 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 liked that video um just so you know you might have seen it in the last couple videos but I thought I'll mention it again I do have a patreon now so you 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 on top of that just a big thank you for watching this video if you have any questions about it till 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 corne in the Internet just a little bit more awesome

Channel: Kevin Powell

Views: 105,281

Keywords: HTML, CSS, How to, Web development, tutorial, web tut, web tutorial, Kevin Powell web, flexbox, flexbox tutorial, flexbox tutorial for beginners, flexbox container, flexbox container properties, how to use flexbox, how flexbox works

Id: hwbqquXww-U

Length: 17min 30sec (1050 seconds)

Published: Wed Jul 12 2017