The Ultimate CSS3 Flexbox Tutorial - Colt's Code Camp

everyone it's cold today we're talking about flexbox and I've got to say I'm pretty happy with how this video turned out speaking of being happy yesterday I hit a hundred thousand subscribers on YouTube which is amazing it's great to see this community grow to see new faces and to celebrate I'm giving all of my YouTube subscribers a $500 scholarship to my software engineering boot camp it's a self-paced online boot camp you can take it at home from the comfort and safety of your own sofa and it comes with a job guarantee so if you're interested in learning to code and getting a software engineering job without any risk you can offload all that risk onto me if you don't get a job you get your money back so take a look at the link in the description there's also information about the scholarship the $500 and how you can redeem that speaking of the description there's also links to or a single link to a folder of code pens and that includes all of the exercises and challenges solutions and the code from this video speaking of the exercises I definitely recommend that you do them this is a long video because we have a lot to cover and the exercises are there for two main reasons one to break up the content so you don't get too bored but two to help you understand some of these concepts so take a look in the description at both of those things and I think that's enough chitchat at the beginning thanks again for helping me hit a hundred thousand subscribers and let's talk about flexbox here we go so let's begin with the obvious upfront question what is flex box flex box is just a nice way of laying out elements inside of some container some box so we can lay them out we can align them distribute space between the items or Center items move them to the left to the right flex box is a model for laying out content within a given box so imagine that we have some container on our page maybe it's a section with three images in it each image is represented by one of these little colored squares so there are so many different ways to arrange those items within this container we could put them all on the Left equally sized and any additional space will be on the right-hand side we could do the opposite push them all to the right and have the space on the left we could distribute the space between the images or I could grow the middle image and have it take up more space so have the left and the right ones be squares or be some size and then the middle one will just grow to take up whatever is left so there is no gap anymore or I could do something like this where I have the first image way way larger and the other two are equally sized and small I could go vertical I could take that container and totally switch it up and make it into a column instead of a row and then do the exact same thing how do I split up the space vertically do they all grow to be one third do they stay a square and then we split the space between them all of these layouts and many many more are easily achievable using flexbox now you do have to understand some of the terminology around flexbox there are quite a few property names I still mix them up all the time it's just one of the downsides of flexbox in my opinion is that some of the property names are not that intuitive so I want to give you a couple of examples of what you can do with flexbox so here's an example from a webpage I found online where we've got this layout we've got one big box here if you can imagine we don't see it but there's a box all this content is inside of and then it's split up into a couple different boxes one two and then this third box is actually divvied up vertically into space inside that box so we have nested boxes where we're laying out some content and distributing space here's another example we've got what five no I can't add at all how did I think that was five we've got seven images and three of them go across here and then four of them go across down here the same idea here we've got three pieces of content one two three and then within each one of those boxes we have a vertical column with three elements inside and then within each one of those elements we've got content on the left and on the right so by the end of this video you'll understand how to make layouts similar to this or to this here or to this I really like this web page this is a developer's blog we've got this middle content that contains all the blog posts and it alternates between a post going all the way across and then 50/50 and then all the way across 5050 and so on and it just so happens that some of the posts are about flexbox so let's begin now with actually learning how we use flexbox I did mention that there are quite a few properties and their naming is not always that intuitive I'll tell you the two I get tripped up on all the time once we get there there are two groups of properties there are container properties and then flex item properties we're going to ignore the right-hand side for now and just talk about the left container properties so in order to use flexbox we have some container elements that we it will turn into that flexible box into a flex box basically we have some space that we want to divvy up so here if there's a box around this entire thing which there is we could say that is our flex box and then within that we can now use flexbox properties and I can divide the space or with this example here there's a box around this a div or section or something that is set to be a flexbox so to help visualize all this flex box craziness I have a code pen with a bunch of colored divs just different background colors you can find the link in the description if you'd like to follow along anyway so we've got what nine different boxes they all have the exact same font size just different background colors okay so right now no flex box involved whatsoever and they're all inside of a section here and this section is going to be my box that I'm going to turn into a flex box so I can manipulate this content so replace this in your mind with images or I don't know pieces of text or buttons or links in a navbar whatever the content is that we want to move around within a given box okay so that's what I'm gonna do and I'm gonna start with this first piece of magic which is to make my container a flex box I need to set the display property to flex so I'm gonna select my class of container just the section right there and then I'm going to set display to be flex and wow quite the difference right all of a sudden I have nine boxes all of them in a row way smaller than before so I'm going to begin by giving this section a border that we can see how about I don't know eight pixels solid black just so you can see where the container is so it goes all the way over there and if I get rid of that display flex each one of these elements is a block-level element it takes up the entire width of this parent of the container and they end up stacking and taking up a whole bunch of space but display flex totally changes that behavior now if I give my container of heights let's see what happens if I give it a height of maybe 80% of the viewport height check it out they stretch to grow vertically that's definitely a little bit different than normal without flex box okay so display flex is how you turn a box into a flex box it changes how that box works how things are moved around and positioned inside of that container so we have just to reiterate here those container properties one of them is setting display to flex then we have the Flex item properties that we apply to the individual boxes or whatever we're styling okay so we do have some terminology this is a stuff I'm not such a big fan of with Flex box in any flex box in any container which we'll just call a Flex container there are two axis YZ axes axes that we need to label there is the main axis and the cross axis and I have to talk about these in order to explain some upcoming properties so there's a direction that our content flows in the main axis by default is from left to right I have them numbered here right and we can see they're going from left to right 1 2 3 4 5 6 7 8 9 based off of the order that I wrote them in inside of this container so the main axis is this horizontal left to right right now at least then we have the cross axis which is just going to be perpendicular and in our case it's top to bottom so if I had enough content that overflowed this and the content ended up wrapping it would wrap underneath but we can change things using flex Direction flex Direction is a property that we put on the container and it's going to define the main axis and its direction so the default is flex direction of row this is what we already have happening our content is flowing in a row from left to right but if I change this to row reverse let's try it on the flex direction row - reverse all of a sudden that content is on the complete other side and in a different order that content is flowing from right to left we change the direction of that main axis now we're going from right to left whatever we have first is going to be on the far right and then second third and so on that's why I have them numbered it's easier to see the order but they cross axis which is this perpendicular line is still going from top to bottom this will be important when we talk about wrapping if we have content that doesn't fit how does it wrap so we also can change everything into a column we can very easily say actually this is not a row anymore I want this to be a column layout and I'll just show you if I go back to row which is the default we don't notice any difference that is the default direction so if I make it a column layout now our main axis goes from top to bottom and our content is stacked in a column and you can see we're actually overflowing that container it stops right there but right now these have a height set on them based off of the welted I guess an implicit height based off of the font size and they are overflowing now we'll learn how to handle that in a bit so the main axis now when we have direction of column is top to bottom and just like with row we have flex direction column reverse where we can reverse that direction from bottom to top column - reverse and now we start at the bottom 1 2 3 4 5 6 7 8 and then go upwards if you're following my free youtube course on this on CSS and learning to code I have not covered responsive design yet but I was waiting to cover flex bucks you can very easily make a layout that starts as a row a row of images and then on a small screen collapses to a column okay so that's flex direction we have 4 values that we've talked about Rho which is the default row reverse column and column reverse we're setting the direction of the main axis now let's talk about flex wrap flex wrap controls whether the elements in a flex box or a flex contain are forced onto a single line or if they can be wrapped into multiple lines so to make this a bit easier to understand I'm just going to go back to row which is the default and I'm gonna give my elements a much larger size I'm gonna hard-code them at 300 pixels each box for now so with 300 pixels and these are not 300 pixels I can tell you that much right now they are squeezing into this box but they are not actually 300 pixels what if I made them 500 pixels nothing changes they're still the exact same size so they're sucking in and holding their stomach in so they can fit into a tight pair of pants but they're not actually 500 pixels but if I change this one property on the container flexwrap and I set it to wrapped all of a sudden my content is going to wrap over to the next line so let's try it again but this time we'll set flex wrap to wrap now take a look at what's happening here so we go from left to right still that's our main axis but then we overflow we can't fit 500 pixels there so the content wraps to the next line and the same process repeats so if I change this to be 300 pixels we still won't be able to fit and we wrap over to the next line now remember those two axes we talked about the main axis by default with row left to right and the cross axis is top to bottom so the content is going from left to right and then when it wraps over to the next line it's top to bottom cross axis so the next line starts below but we can change that by changing flexwrap to be wrapped - reverse as its value and now it's going to alter the direction of the cross axis the terminology is not crucial that you're probably not going to be talking about main axis and cross axis with a whole lot of people just remember there are two axes and you need to be able to control both of them and the way we control the direction of the cross axis is with flexwrap so if I set it to wrap reverse now we still go from left to right that's our main axis but now the cross axis goes from bottom to top so our content wraps upwards now if I go back to just regular old rap and I change direction to be column now our content is top to bottom that's the main axis and the cross axis is left to right now don't worry about this spacing this is something we'll cover later on but each one of these is still 300 pixels wide so that hasn't changed but there's a whole lot of extra space now because they're not in a row they're in a column now if I change this to wrap reverse we're still gonna go from top to bottom as our main axis but notice how the cross axis has totally reversed it's now from right to left anyway those are two very important properties flex direction and flex wrap we use them to control these two axes main axis and cross axis okay super quick exercise time if you'd like to do this recreate the layout you see in front of you with the exact same boxes a couple things have changed first of all notice that there are three elements per line that is not done with Flex box I'm just setting the width property so that they're each a third but then pay attention to the order what's the main axis and what is it cross axis using the properties we've covered so far how could you make this work or how would you make this happen and here's the answer it's just two properties flex direction row reverse so that we are going from right to left is our main axis and then we need to set Flex wrap to wrap one two three four five six seven eight nine also I set the width to be thirty three point three three three three three three percent instead of hard-coding it as a number of pixels so that I could have them fit three on the line whatever the size is so now we get to one of the most useful properties justify content another property name that I'm not crazy about but it is when we use all the time and the goal the responsibility of justify content is to define how that space is distributed between the items in your Flex container along the main axis I know it's a mouthful so let's go back to a row flex direction and we'll just go with regular rap so our main axis ask yourself right now what is the main axis to draw it mentally and what is the cross axis which way do they go main goes from left to right and cross axis is from top to bottom anyway we've got a little bit of extra space first on this row here we've got extra space right and on this row here we've got also a bunch of extra space justified content allows me to allocate that extra space on the main axis so I'm gonna do justify content and the first option I'll show you is Flex end so let's do that now flex end and all of a sudden my content moves over to the right side which is the end of my main axis my main axis starts here and it goes to the right so the order did not change this might seem like it's the same thing it's what we had when I did row reverse but it's not here our content started here 1 2 3 4 5 6 and so on but if I go back to just row but I justify content flex end it's still the correct order 1 2 3 and so on but they are aligned to the right side of this Flex container but flex ends notice it's flex and it's not flex rights or a line right because the main access direction can change as we've already seen I could set this to row reverse and now flex end is actually the left side for the content the main axis starts here and it moves to the left anyway let's go back to just a regular row we also have flex start which aligns the content with the start of the main axis and then we have some other options including Center which is very useful it's going to take that extra space and use it to Center our content in the middle and you know I might actually just get rid of some of these boxes for now let's go with 4 boxes just to make this easier to illustrate okay so there's my 4 boxes and there's extra space it's on this sides so my content is centered if we just go back to flex and they'll be on the right side we go back to flex start they'll be on the left side because that is the direction of my main axis left to right start to end so we saw Center but we also have to that I'm gonna highlight here called space between and space around and they seem similar space between allows us to take whatever additional space there is and jam it evenly between our elements so in between any two elements but not on the edges so this is what that would look like and then if we do space around it we'll also add that space around on the edges so each element has the same amount of space around it whatever this is here let's just make up let's say it's 30 40 I don't know I can estimate this stuff let's say it's 60 pixels 50 pixels oh my god I'm spending too much time on that whatever that number is it also has that spacing on the side here and then this element has that same amount there and here so every element has that same spacing around it versus space between our end elements don't get any space on the left or right in this case so at this point hopefully you can already see how useful this can be if you replace my color divs here with images or with paragraphs or buttons or links in a nav bar all of a sudden you can space them with just a single line justify content I can put them in the center of my contents I can distribute space between them which is when I use a lot space between this is pretty useful in my opinion it doesn't look great here but it can be it's really nice if we didn't have flexbox this sort of thing would be very tricky to set up the margins and figure out what I don't know what percentage sir what to put as the margins here on the Left we wouldn't want any but then here we want margin rights then we want margin left and right here it just gets really annoying and very difficult to do but flexbox allows us to very easily manipulate that space just using a single or a couple properties and this is all distributing space along the main axis so if I change what that main axis is right now it's left to rights we already saw right to left if we just did row reverse but if I instead go to a column layout what is my main axis now it's top to bottom so I'm distributing that space top to bottom evenly between my elements but if I do flex end where will they be aligned to flex dash and oh my goodness there we go they go to the end of that main axis top to bottom and if I did flex starts they'd be aligned to the top if I do Center they're now aligned vertically Center from top to bottom now if I wanted to align them horizontally Center centered horizontally that is the cross axis right this is the main top to bottom because I'm in a column left to right is the cross axis and that brings me to the next property aligned items I'm interrupting myself with a quick exercise for you recreate this layout that you see here with the same four boxes we don't need all of them involved so one two three four how do you get this exact layout so the width is still 300 pixels you don't need to change that but notice where they are in the middle of this box and also the order they're in and here's the solution all that you need to do is set Flex direction to row reverse that part's very important because we're going one two three four right to left for that main axis we don't need flex wrap set to wrap we're not actually wrapping at this point and then justify content needs to be set to center in order to Center our content a line items defines how space is distributed between items in the Flex container along the cross axis very similar to justified content but justify content is for the main axis aligned items is for the cross axis so we can do flex start which is going to be the default if I set this to flex start a line items flex - start the cross axis goes from left to right so they're already aligned to the start but if I do flex end now they're going to move all the way to the right side because that's my cross axis endpoint and now if I set it to be Center hey there we go we've got horizontally and vertically aligned content thanks to justified content that's our main axis top to bottom we want it to be centered and then cross axis is what line items controls left to right center it as well now if I change this back to a row flex direction row things change a little bit but we're still centered horizontally and vertically but let's go back let's do instead of center here let's do space between okay and then we can decide what we want for aligned items I'm going to set it back to how about flex end before I finish typing where will flex end be what will that look like there we go they aligned to the end of the cross axis which is top to bottom I could change that with wrap reverse now all of a sudden the cross axis is bottom to top I know it's a little bit overwhelming having to see all of those let's do flex starts and let's see what happens if I leave this off entirely what are they doing here well the default value in this case is something called stretch for a line items the content is going to stretch to fit that cross axis so if I go back and I set a line items to be stretch nothing changes but if I instead set it to center our items align in the center and they don't take up as much space as possible if we set it to be stretch they grow to fill the entire container along that cross axis but if I set it to flex and flex starts we've already seen what happens now what about if they have different sizes so why don't I pick one of these we've got one two three four I'll give box one a font size of about one pasher 1.3 m/s and then let's do I don't know I'm just quickly to this here how about three point four two point three and 6.3 m/s okay now they have different sizes that height is just set based off of the content sizing and I'm not setting it explicitly of course where I did give each box a height if I set height to be I don't know 400 pixels then they're all just going to look exactly the same but let's not have that let's give them a different height and now if I set the to be aligned items of stretch they still will take up the exact same amount of space in this flex container if I set them to be centered they will be centered along that vertical axis or in this case its vertical but they're technically along the cross axis which could be horizontal it could be right to left left to right top to bottom bottom to top it's not set in stone that's the whole point of flexbox and that's why the terminology is a bit wonky is that it's not nothing is necessarily vertical or horizontal it could change in the blink of an eye based off of flex direction and flex wrap so we have this other option which is base line and base line is going to align elements based off of the base line for their text I don't know I don't know what the exact terminology is but let me just set it up for you base line and why don't I smoosh these guys together how would I do that how would I get them to aligned in the center here with space on the left and the right horizontally I would need to change justify content I'll just make it Center okay so if I set a line items back to center you'll see that they are aligned horizontally and vertically in the center but if I go back to baseline now they're aligned based off of the base line of the text so it is different this can be very useful if you have text different different sizes or elements that have text inside of them like each headings or buttons or something and you want them to be aligned even if their size is different you want them to start at the same place all right it's time for yet another exercise very quick one with this same file the same code pen I'd like you to recreate this so you'll need to uncomment the what we have four of them the other five boxes notice well just look at what I have and create that using the properties that we've just covered so justify content align items if needed flex direction flex wrap that sort of thing alrighty so here is my solution scroll down well actually before that notice we have a column layout one two three four five six seven eight nine but it is wrapping in the verse direction so the main axis goes this way top to bottom but the cross axis goes right to left so we need to set that cross axis with wrap reverse flex direction is column and then justify content is space between so that's along the main axis this way space between as you can see more clearly on this side the extra space on that main axis is evenly distributed between the elements and then we have aligned items set to center now you might notice all this extra space between the actual columns if I get rid of a line item center which direction is this over here well this is the start of our cross axis it's the same as doing a line items flex starts but fortunately right after this we are going to cover how we could get rid of this space or at least use it and figure out how we want to align our columns do we want them to be centered together so most all the way across the page there's all these different things we can do so that's coming up right now okay so now we're going to talk about yet another property align content another thing that I think is very confusing a line items align content which one is which align content defines how space is distributed between rows in a Flex container so along the cross axis so I've gone ahead and added in the remaining boxes that were commented out I made everything the same size again and what are we working with per row that does wrap where we have justified content set to center so there is no space between the rows there's no space to distribute at the moment because the default value for aligned items is stretch here so if I look at a line items stretch nothing is going to change but if I change that to Center for example now we have a whole bunch of extra space and we need to decide how to distribute that space with a line content so one option is flex start a line content flex start so remember this is based off of the cross axis and the cross axis right now is top to bottom if I did flex end it's the end of the cross axis if I had Center our content will move to the middle there and if we have space between or space around you've seen what this does there's space around and here is space between so again this is the space between the rows and if I switch this up actually what if we did a column here instead we're dividing up the space between well I guess it's a column and a column or just a row if you tilt your head a little bit anyway it's the space between them or if we did Center we're now centering them in the middle and then what if I wanted everything to be up against the top of this container everything pushed up so remember this is a column so the main axis goes from a pier top to bottom and the property we need to change is justify content for the main axis I could set that to flex start and there we go so that is aligned content as I've already mentioned I mix it up with aligned items a lot so at this point we've wrapped up the different container properties flex direction justify content flex wrap aligned items and aligned content now we're going to talk about the Flex item properties these are properties we apply to the individual items that are inside of a Flex container so these all are like they're not global but they are container wide changes now we can manipulate one item at a time so the first thing we'll see is aligned self and this allows us to override align items on an individual item so for example I've got everything in here aligned well I'll have a line items for the container set to flex start but then I can align this one box using a line self it's a way to break the mold I guess so let's go back to a row and let's go back to probably four if these guys or five of them just easier to look at and we'll change this back to a row here we'll wrap let's justify content sure let's do space mm sure space between a line item Center we don't really need a line content right now okay so if I wanted to change box three so it's not a lot and vertically in the center I want it to be aligned at the top I need to find box three which is right here and I'll just open this up here align itself and then we have the same properties flex and flex start so this is based off of the cross axis right main axis for a row cross up and down well up to down so start is up here flex end would be to align it to the bottom so this is how you can move one item at a time or a line one item at a time we've got flex starts we have stretch if I wanted to make that take up the entire available space there we go and that's kind of it for align itself so moving on here at this point all of our layouts all of our items have been equally sized although we could change the sizing of things manually I could give each one a different width but we're not doing any flex boxy stuff to resize elements to make them take up available space for example if I wanted the middle orange box to grow or the side left and right box is to shrink down how do we add Chomp Chomp lessness how do we accomplish that well we need to use a property called flex or we can use a property called flex it's actually a shorthand for three different properties and those three properties are flex Gro flex shrink and flex basis so we're gonna begin with flex basis this one is kind of like with but it's actually not the same thing I'll show you some differences but what we're doing with Flex basis is specifying the ideal starting size of some flex item before it's placed into a Flex container so with these boxes here if I get rid of let's get rid of a line itself on that one item okay so right now I have hard-coded a width of 300 pixels in but if I get rid of that okay so that is our element size just based off of the content in each one of these divs but if I decide I would like each one to ideally be 300 pixels which is what we had before or maybe 200 pixels I can use flex basis and set that to be 200 px or I could use a percentage so if I wanted them to take up 20 five percent there's four of them I'll do 25% and then we shouldn't have any left over space so that is the basic idea of flex basis but I could also set something like but if I have 50% and I turn off wrapping so we don't wrap well what happens now you can see what happens there they're still smushed down to fit inside of that one rope so flex basis is the initial ideal size we'd like for each one to be 50% of the container but if we can't wrap or if there's too many elements then they're gonna have to shrink and we'll learn how to control the shrinkage we'll learn how to decide which elements shrink and which ones don't but let's talk about the difference between flex basis and with this is an important thing that I see come up pretty pretty commonly when I'm teaching this so let's go back to 25 percent we're saying each one of these items should be 25% along the main axis we're not saying 25 percent wide or width when we're in a row yes that is with but if I were to suddenly make this a column so column right here now our elements have a height of 25 percent so that is very different if I well I'll just keep that there and then if I make this a width of 300 pixels or how about it just a width of 25% that's very very different when we're in a row it's exactly the same for controlling the width with Flex basis but in a column flex basis is controlling the size along the main axis which ever direction that may be so it is different than width also if you do have both of them set for example if I go back to a row layout and I set Flex basis to be 25% and I have width of 10% you'll see that flex basis wins out even though width is coming afterwards we're in a Flex container flex basis has higher priority so we can use height in a row if we want to control the heights we would use height there's not a flex property for that so I could say Heights is actually 100% or Heights fifty percent and another exercise with this code pen I'd like for you to recreate this layout that you can see here so I've got all nine boxes involved and notice that we have sort of an alternating pattern we have one box that goes fifty percent or half way across and another box that takes up half the real estate but then the next box goes all the way across and then we have fifty-fifty and then all the way across fifty-fifty it's kind of hard to see the two blues there and then one hundred percent all the way across so you'll need to use the properties we've covered I'm not setting with explicitly on this also you'll need to figure out a way I wouldn't call out each one of these boxes like three six and nine individually you should be able to style every third box the same way so there's a selector you can use to select every third element with a class name of box and here's a solution that looks like this I gave every box a Flex basis of 50% so that's where these guys get their Flex bases from and then I selected every third with enth of type 3n and I gave them a Flex basis of 100% and now they go all the way across so this is kind of silly with these colored boxes but this is really similar to what we saw with one of the blog layouts at the very beginning of the video all righty so that's flex basis that is the first piece to controlling our content and go back to a row but as we've already discussed if we have a flex basis that is too large or our content does not fit if I have 50% or the other way around if I set Flex basis to be 10% and I have a whole bunch of extra space how do I get elements to grow and take up that space so that's where this property flex grow and flex shrink come in so flex grow dictates how any unused space should be spread amongst individual flex items so it's something we can apply to one item at a time and unlike flex basis where we use an actual length pixels or a percentage or some measurement with flex grow it's all about ratios so we can make each box share space evenly if I set Flex grow to one for every single element or I could set flex grow to be 20 on every box and there won't be any difference at all so if I do that here flex grow about 40 they all will grow to be the same size just as if I had flex grow for flex grow one this is just the ratio and they're all going to have the exact same value so it doesn't matter it doesn't matter what the number is usually I would just put one but we're indicating that among all these boxes one two three four if there's leftover space which there is each element should get an equal share of that leftover space but if I instead allocates to box three I say flex grow is actually two now it gets twice the amount of extra space that doesn't mean it's twice the size or doesn't necessarily mean that it could be instead we're saying that it gobbles up twice the amount of leftover space so if I set flex grow to four you can see what we end up with why don't I do something like this I'll do flex grow of one up here so we get some extra space flex grow of two here and then flex grow of three here and then on box for we'll keep it at four so again we're not ending up with you know this one to being half the size necessarily of this box here it's all about how much extra space we have left now my Flex basis is set to 10% but if I hard-coded this to be how about 10 pixels now we can see what happens we end up with a lot more space being allocated to this guy and then just a little bit of space being allocated here but if I set Flex basis to be 300 pixels there's not a lot of leftover space to allocate but more of it goes to this element then goes to this one here so it's all about ratios if I just go back to what we had before get rid of some of these I've got flex grow of 1 for all boxes except this guy has flex grow of 2 but I could change that to be flex power of 4 and flex grow of 8 and it will look exactly the same it's just the ratio okay so once again let's do something like 10 pixels has the Flex basis very very tiny and if I set Flex grow to be any number if it's all the same all of these elements will grow to share that space so if you don't want that to happen then don't add flex grow so next up we have the counterpart which is flex shrink this dictates how item should shrink when there is not enough space in the container they can't all fit in there how should things shrink down so let's set things how about Flex basis to be 50% and obviously at 50% we can't have four elements going across so there's a multiple rows but if we get rid of that and I say Flex direction or sorry flex rep is not wrap I'm just gonna comment it out well they all shrink down to fit there and that's the default behavior they're all going to shrink down the same way so if I set Flex shrink to be one nothing changes if I set it to 10 nothing changes they all shrink in the same way it's the same ratio I'll shrink as much as you shrink as much as you shrink as much as you shrink but if I pick one of them how about box one here and I give it a different flex shrink value like 10 it's going to shrink a lot more so whatever the amount of space is that we're overflowing so whatever that amount of space is that we are overflowing 10 times more of the space is going to be removed from this guy than from other boxes at least that's how it should work right if I say a hundred times more we're still bound by the size of my content here so it's not going to make this like one pixel wide and minuscule it would I guess if there was no content in there but generally we're not gonna do something like 1 to 100 but just like with flex row it's all about ratios so those three properties are super useful and as I've already talked about there's the Flex shorthand property I just want to quickly talk about how it works if you pass three values in the first one will be grow the second one is flex drink and then flex basis will be the third but if you just pass one in if it's a unit list number like 2 or 5 or 7 it's going to be flex grow if you pass in a number with units some sort of length like in Em's or percentages or pixels that will be considered flex basis and if you pass in two values unit lists it will be flex grow than flex shrink if one of them has a unit that will be flex basis you get the idea so just to demo that if I said how about flex basis on all of them to be 10% sure and then I want to set all of them to flex grow I want them to take up the same amount of empty space except for this second one or maybe the third one sets of Ardea indented this here I could just use flex the shorthand and set that to some number that will be flex grow and then I can call one out here with Flex of two and there we go that is flex grow if I passed in another number here like how about 100 percent that would be the Flex basis and you can see that it takes up a lot more space although it's still not a hundred percent of course it doesn't go all the way across but it gets higher priority to take up as much space as it can and then whatever is left over these guys still have to take up a minimum amount of space because of their content that can't be erased or ignored so this thing it's not a hundred percent but it gets priority anyway that's the basic idea of flex flex Gro flex shrink and flex spaces three standalone properties one shorthand property next up we'll take a look at kind of a fun one which is order order is another property we apply to the individual flex items and it allows us to reorder elements in their Flex container and this might seem sort of silly why would you need to reorder something why bother can't you just change the order in your markup the answer of course is yes you could just change the order but sometimes you want dynamic orders especially with responsive layouts so here's something that will be building in just a moment it's very simple I've got a navbar a footer and then I've got three pieces of content a left sidebar a right sidebar and a main article so imagine there's actually content in here and I've got this left sidebar on the left side but it's actually not first in my markup and that's deliberate I don't want the sidebar to be the first thing in the markup if you look at it here we actually have the article first so that people who are using screen readers or even other code that is reading my application are reading my websites content is going to encounter the article first this is the most important thing I don't want it to be buried beneath a sidebar that probably has like hundreds well maybe dozens of links and a bunch of nasty ugly markup in there that's hard to comprehend I want the main stuff to be upfront I want it to be the first thing that you encounter if you're navigating without a mouse you're using the keyboard you're hitting tab or something or you're using a screen reader this should come first so that's one reason just making things more accessible prioritizing our content but being able to reorder it using CSS without actually changing the order in the markup but this is also responsive and as I shrink this down you'll see the order changes so if I scale this down like we are on a mobile phone you'll see that the order changes once again first of all this goes to a column we'll see how to do that but then we have the article up front if you're on an iPhone or a mobile device you may not want to have a large sidebar first you might just want that the nav bar and then the main article so those are two reasons why order can be useful we're never changing the order of our markup but we are reordering the visual display the visual order of the Flex items so how does it work well it's just a property that accepts a number up forget a semicolon here so we pass in a number like order two so I'm assigning box one which is this box here order of two what's going to happen what according to the slides which you'll have to trust it ends up at the very end shouldn't it just be the second item well the way that order works is the default value is zero for everything every flex item so if I selected box three and I gave it an order of negative one it would move to the front so you can pick whatever order you want whatever number you want you could give everything in order of twenty and then give one element in order of 19 and nineteen will be first so if we go back to this example I'll get rid of the Flex stuff the sizing I'll just get Flex basis back - I don't know sure ten percent and I'll just set flex 2 1 so everything shares the space evenly all righty so if I wanted to put how about 3 up front I wanted 3 to come first I can't just select box 3 and give it an order of one as we've already seen it's going to move to the end because these guys have an order of negative 1 or sorry of 0 but I could say order of negative 1 and now it will move to the front or I could keep it at order of 1 and then give every other box every other item or box a order of 2 now we get 3 1 2 4 so I can use whatever numbers I want and I'd maybe there's an upper limit or a lower limit generally though you're not reordering tons and tons of stuff it's just a couple things maybe that you want to move around so 1 2 3 4 that sort of thing is what I use but the default is 0 so now let's play around with creating this example where we have our content in a different order main article left sidebar right sidebar but then it's showing up left main right and this main section is taking up more space so here's what we're gonna begin with we have our markup over here I've got my Styles there's no flex box involved each one of these is just a header or an article or an aside or a footer they're block level elements they go all the way across the screen so as I've already shown you I want the three middle elements to be in one line in a row so I'm going to put them in a Flex container put them in a flex box and they're already inside of a main element I've got a header a main and a footer so I'm gonna select my main I'll just do this all where should I do that maybe here and make it a flex box so display flex okay and the default Direction is a row which is fine now what I want to do let's start with the order is make it so that my main article is actually in the middle I want the left sidebar to come first visually without changing the content here so my main is first the main article content is the first thing you encounter but visually I want it to be the second thing so I can select I have sidebar left and sidebar rights and then I have the article item which is this here I can give them an order so I'll give sidebar left in order of 1 and then the sidebar right we'll have an order of 3 and then I can give this article item which is right there the purple thing in order of 2 and there we go now I just need to make them take up more space so I'm going to give them all a flex grow or just a flex of 1 to begin with so we'll do flex of 1 here it's gonna get really big and I could just leave it at that if I'm happy with that width or I could do flex of one for these guys this left and right sidebar flex of 1 and then give the middle main article maybe a flex of 3 or something and have it take up more space I think that looks a little better so that's the use case for order if I shrink this down though things get a little bit cramped and what I'd like to do is actually change it so that it goes to a column layout on a smaller screen size now if you're following along with my Colts code camp we have not talked about breakpoints and media queries that will be a video topic in each release shortly but for now we already know what we need to do we need to make it a column instead of a row based flexbox so I could just start with that which is not what we want to do but I could select my main and say Flex Direction is column just like that and now when we shrink down that's exactly what we want but it's just not what we want on the large screen size so in order to add that logic so that it switches between column and row I'm gonna add in this media query that says for a size between 0 pixels and 575 pixels basically for mobile screen sizes I want something to happen I want on my main element that's the Flex container this thing here that we just played around with I want its Flex direction to change I want Flex direction to be column and that's it so I'll shrink this down we're in a row layout flex direction row but then we get to mobile now we go to columns now I could also change the order as I showed you I may not want the sidebar to be right after the navbar if this is a mobile layout often we might want to just hide it entirely or just have it after the main article so I'm just gonna change the order here just to show you that let's take the order of the left sidebar which right now is one and let's just make it two or three so left sidebar our sidebar left on a mobile size order will be two so nothing changes but then when we shrink down now we have main article first and then left and then right so we go back to what we had before basically in the markup versus when we go back to our row layout an on mobile screen size the order changes we have left main right alrighty so at this point we've covered all of these properties that you can see in front of you we've got the container properties on the Left flex direction justify content flexwrap align items align content we spend all that time talking about the main axis that cross axis and then we talked about a couple different flex item properties that we apply to individual items order flex which is the shorthand for flex Gro flex shrink and flex basis which for some reason that's missing from this diagram and we also saw a line self hopefully you can see the utility in flex box yes there's a lot of terminology there's a lot of properties to keep track of but it's also very powerful so if you'd like I have another relatively quick exercise I'd like you to take this starter code which you can find a link to in the description take this initial code pen and turn it into this right here so I've given you all the styles in terms of the fonts the background color this little box shadow there's a hover effect but the layout is not great so we use flexbox to create this navbar and we also use flexbox to Center this content here right in the middle vertically and horizontally but I'll tell you right now if you do want to attempt this we actually have nested flex boxes or flex containers this navbar is going to become a flex container but then actually if you look at each item in there this is an anchor tag it's just a link notice that the content is centered both horizontally and vertically so I'm using nested flexes nested flex boxes also I just have this class called active and whatever link I apply that to that style is already made for you but it just gives it that blue border on the bottom so you don't need to worry about that okay so give it a shot if you'd like and I'll go ahead and implement it here we go so let's start with the easier part which is the main to Center this content horizontally and vertically we have this main element and I've already given the main of heights this is a little bit tricky we haven't solved that tricky but if you're following my course on YouTube we haven't talked about calc basically I set this nav bar to be 80 pixels tall and I want this gray background the main to be 100% of the view height minus 80 pixels tall there are other ways of doing this but that's just one of the shortest ways okay so I'm going to now select that main and make it a flex box display flex okay so now our content an h1 and an h2 they're in a row so how do I make that not a row we'll set flex direction to be column and there we go and then I want to align them well let's start actually with justify content I want them to be centered justify content center and then I want them to be centered horizontally which is the cross axis so I need a line items Center and now that part is pretty much done now let's talk about the nav bar so this nav bar already exists as a nav element I probably should have given it an ID or a class or something here's the nav I've already written some styles and what we need to do now is turn it into a flexbox so display flex so that doesn't appear to make a huge difference because there's all this empty space so how do we get these elements to grow to take up that empty space well we could set flex grow on the individual items not the container but each item that's the anchor tags instead of the nav so I could set Flex grow to be one or just the shorthand flex one now they grow and that looks ok but now we have the problem that the content inside each anchor tag is aligned to the top left there's a little bit of padding there but it's the top left it's not centered and I could just do Center text so text a line I don't know why I'm typing Center there text-align:center but we still want it to be aligned vertically as well and you know I could add padding or margin to make that happen but if I want this to be responsive whatever the height is of the navbar I want the individual links to be centered vertically and horizontally I'm not going to hard-code in a percentage or a number a number of pixels or something instead I'm actually going to make each anchor tag a flex box display flex and then I'm going to set justify contents to be Center so that should Center us and then I'm going to set a line items for the cross axis to also be Center and there we go so we have one flex box here for the entire navbar and then each link is actually its own Flex container and then we have our main content here there's not a lot to see but that is also a flex container this one is set in a column so the main axis goes from top to bottom justified content center a line item center so there's another example if you're still struggling to see the utility of flex box I definitely recommend that you try and recreate this yourself without it Center these links horizontally and vertically space them out evenly in this navbar Center this horizontally and vertically and make it work on any size it's doable but it's kind of a pain also with just a little tiny bit of code by setting Flex direction to column on a small screen size I can make this a somewhat responsive navbar doesn't look great obviously because of the way this border is set up you probably wouldn't want this to display like this but this is something you could do on a mobile device we would probably get rid of that or maybe we would add an element inside for the text I guess span and we could add a border to that span rather than the entire anchor tag but anyway just a tiny little change you can totally reconfigure that navbar but I'm gonna get rid of that that wasn't part of the exercise okay so that's it for now we've covered a lot it's been a pretty long video I hope you're still with me I hope you're still conscious flexbox is incredibly useful a little bit overwhelming with all those properties don't feel bad about referencing them or trying align items and then realizing oh it's actually a line content or even mixing up a line items and justify content I still do that probably every other time I try and use flexbox and then I manage to remember it like I don't know for five or six hours and then it just disappears so memory of a goldfish anyway very useful stuff layout without flexbox can be a huge huge nuisance now flexbox is not the only system or the only tool for laying out your webpages with CSS there's also the CSS grid system which I'll be doing a separate video on anyway I'm gonna go away I'm gonna go curl up into a ball and take a nap for seven years this video has been quite the undertaking so I hope you enjoyed it please consider liking it subscribing commenting all that stuff sharing definitely sharing if you don't mind hope you're all doing well staying safe and sane and I will see you later this week alright bye everyone

Channel: Colt Steele

Views: 53,927

Rating: 4.9751759 out of 5

Keywords:

Id: qZv-rNx0jEA

Length: 59min 15sec (3555 seconds)

Published: Wed Apr 15 2020