Flexbox Tutorial - Flexbox Items

I would write guys in this week's video we're continuing our series on flexbox we're gonna be looking at flex items flex items are the little everything that's inside a flex box as soon as we take a container we say display flex everything inside becomes a flex item and we can do a whole bunch of cool flex stuff with it we're controlling them individually so we saw before you know you can make everything shift from one side to the other but what if you want one thing to act differently that's what you can do with a bunch of the flex box properties that are dealing with individual items and that's what we're gonna be exploring right now all right so 4 flex items the behavior changes things a little bit so we're just gonna stick with three items in this one so the five that we had in the last and the very first thing just to look at really quickly there's actually three well there's five different properties when we looking at there's flex grow there's a flex shrink and aiways misspelled shrink I hopefully I don't do that in this video there's the flex basis there's the order and there's the align self which is really really awesome now flex oh and there's one more sorry there's also just flex and flex is a shorthand for these three and it's actually sort of recommended but we're gonna look at these three first and then we'll get into with those with these other ones here are after now the thing that's important to know with it is as soon as one of your items gets it so here even we can take my flex grow off of item the in see up here we have our one two and three that I've added so each one I can control separately so sue if I do a flex grow on this I'm just gonna put a one on there I mean see it's growing to take up all the available space so the the default flex go is zero which is why by default they look like this but as soon as I put a what whoops a 1 in there and their unit list numbers so as soon as I put a one in there it now takes up all the available space the way the Flex CRO works deals a little bit with how some of the other things work so I'm just going to set up on here too so we also have a flex rink and the default flick shrink is one I'll put this to zero and we have my Flex basis and the Flex basis is how much room does this want to be taking up if it has the available space how much should it take up so let's say we want it to be 250 pixels wide so now it's sitting at 250 pixels and I'm gonna copy this on to all three because I think this is the easiest way to understand it so we have a 2 and we have a 3 except I should have made this a lot smaller but just really quick this is how much space it wants to take up you can see right now it's smaller than 250 pixels there's not enough room inside the container and actually maybe I should make my container a little bit wider let's make it like 80 yeah that will work well so it has the amount of space so what it's doing is it's not growing so the grow is 0 that's the default it's shrink is 1 which we'll get into in a second and it's sitting at its ideal width of 250 pixels and as I grow it it's gonna stay there but if it gets just smaller you can see that now when it's it's not gonna overflow at the side it's gonna get smaller than 250 pixels so this is a lot like the width when I was looking at it before it's more like a max width it's the ideal width but if it has to get smaller it will get smaller than that so that is important to understand it doesn't make responsive layouts a little bit easier to deal with because you're not getting locked into a width now I'm gonna switch number 1 here to a flex grow of 1 and it grows to take up all that available space it's taking all the space that's available these ones aren't growing so by this being a flex core one it's saying I want to be 250 pixels but if there is available space grow to fill that space now this is at 1 but it's the only one so if you're the only one it's the only it's growing and the other two are gonna stay the same and then here everything shrinks together now if I make this a flex one sorry I flex grow of one now they're gonna grow at the same pace these both grow at equally so any bidding smaller or bigger the the amount of space that they're growing by is the same and let's go on to number three here and I'll make that a flex grow of two so when R add our ideal width of 250 pixels they should all look the same they'll all shrink the same way but if they have more space than they need this one will grow faster than these two so let's even make this a three just sort of exaggerate it a little bit you can see that this space is now bigger than these two so these two are growing at the same rate and this one is growing faster than the other ones because it has the larger flex grow so you can sort of guess now what's gonna happen with the Flex shrink my flex shrink let's put this one all the way up to a three so now when I'm smaller than 250 pixels how fast is it shrinking so now you can see that this one is actually shrinking faster than the other ones so with these ones it's growing faster when it's bigger than 250 pixels and it's shrinking faster when it's less than 250 pixels so that's pretty cool so that's with the shrinks let's put this back to a 1 so they should all be equal and just to show you I can make this one a 2 so now the one in the middle is going to shrink faster than the other ones but when I get to a larger screen size this one here is still growing faster than them because the grow one a girl one and it grow three and again if I have two items with the same number those two will grow at an equal speed and this one will grow slower than the other ones and if this is a flex furrow of zero it's gonna stay at it's flex basis size so it's just always as long as I'm bigger than 250 pixels it's just going to stay at 250 so that's how the flex grow the Flex shrink and the Flex basis works and the shorthand for it is just flex so this would just be 0 1 250 pixels and then I can get rid of all of that and that's the exact same thing so this one would be a flex of 3 to 2 50 pixels and this last one would be a flex of 3 1 2 50 pixels so one thing that's nice about just writing flex is if I just do a flex 250 it's going to default the rest to its gonna assume what you want for the other ones now what that is doing is it actually is letting this one grow so let's do my flex probe 1 and a flex grow of 1 so the the growing should be all the same now so it's assuming if you do a flex 250 it's just going to get a shrink of 1 a grow of 1 and it works that way so it works nicely and I could do a 1 250 or let's do 2 so it's gonna grow faster than the other ones because the other ones have a grow of 1 let's put a shrink of 2 on them but it's gonna automatically give it a shrink of 1 so the shrink is going it's it's still it's shrinking slower than the other ones they're shrinking because it's defaulting to a 1 on the shrink so if you want to use the shorthand here it is a little bit easier because if you forget one of them or you just ignore it it automatically fills it in for you so I usually just use the Flex property like that so yeah that's I think pretty cool now well I'm gonna come up to here and change a couple of things or just one thing let's change my align items to flex oops flex flex start so when I do in the line items flex start they all get aligned up to the top like that or they get aligned to the on the cross axis the start at the cross access so now what I can do is I can take the align self and put a flex end on this and it's going to align it it's the same as the align items property except it's aligning only itself on that part so the Flex end I can pull one thing down or I can do an align self Center and it's going to Center just that one item so aligned self can be kind cool if I took off my a line say I take this one off these ones are stretching because the default for align items is to be stretched so that's why they're taking up all that space that's the default but as soon as I do an aligned self its breaking out of the default so you can choose whichever of the align items properties that you'd want for align self and control it on its own so that's awesome and the last one and is order and I was going to do order before a-line self so I'm out of order but that's okay and you can control the order of things now the thing it's a little weird with orders if you do an order one it actually goes to the end because these ones don't have an order on them if I do in order to zero it will go to its natural resting place it doesn't pull it over to the front which is what a lot of people originally assumed and it's because the default is zero so if I don't give anything it's just giving it an order of zero by default so order zero just puts it back to where it is in the HTML if you do want to pull it all the way to the start you can give it a negative value though and that will pull it all the way to the beginning and you might be wondering why would I want to put an order on it this is nice when you want to rearrange things when it's a mobile display or going from mobile to something else if you need to change the order of things because you don't like the way things are falling this is a nice way to do it so I can actually have my item two my item three and then my item one or if I make this a bigger negative value I could do that I wouldn't suggest getting too far into the negatives I think it would make more sense to do a 1 a 2 and an order 3 if you really needed to change the order of things like that or in this case because the reversed I could just change my flex direction to row reverse that might be a bit smarter but it's just to show you you can change the order of all of your Flex items to any order you want them to be in so that's a nice nifty thing that can give you a lot of control on for when using media queries and trying to get things where you need them to be and there you go now some of those items might be a little bit confusing and weird still so if that's the case don't be afraid to play around with it a bit the best way to learn and get used to these is by trying them out and a little bit of trial and error because knowing you know just seeing how one thing works in a little demonstration like that's not always perfect but that's why in the next video I will be taking a look at an actual layout don't worry it's give me a pretty simple layout but it's common ways that flexbox is used if you do have any questions right now though please don't be shy leave a comment down below and in case you haven't heard I have launched a patreon account so you can go and check in the description below if you don't know what patreon is go down there and check the link and there's a nice welcome video that explains it in a little bit more in detail thank you so much for watching and until the next video don't forget to make your car in the Internet just a little bit more awesome

Channel: Kevin Powell

Views: 49,775

Keywords: HTML, CSS, How to, Web development, tutorial, web tut, web tutorial, Kevin Powell web, flexbox, flexbox tutorial, flexbox tutorial for beginners, how to use flexbox, how flexbox works, flexbox items, flexbox item, flexbox grow, flexbox shrink, flex-grow, flex-shrink, flex-basis, flexbox properties tutorial

Id: 4Oi5xpjoCRk

Length: 11min 51sec (711 seconds)

Published: Wed Jul 19 2017