Learn Flexbox In 20 Minutes | Learn HTML & CSS | Flexbox Tutorial

hello everybody welcome back to another tutorial okay so happy holidays happy all the good things New Year's is almost here that's two more days I believe and yeah we're gonna party a bit here but before that I actually wanted to get this out of the way because going into 2019 I think flexbox is gonna be something so Universal and used by everyone with the browser support and everything so if you don't know flexbox then this video is gonna help you out a lot and plus you're gonna learn it super fast and if you know thanks box there are a few small things that might slip out that you might not fully know so I'd recommend you watching this video and hopefully you're gonna pick up something new so let's get started okay what do we have here so I just set up a bit of HTML here and CSS but don't be scared it's nothing too crazy we just have a parent div and three children in here okay so just a big div and three small dips in so you can imagine this in a practical way like you can have a section and then you can have your content in here or smaller sections and then you can position them the way you want so let's get started alright so in our CSS here I just added some basic basic styles here just to illustrate on what's going on so here we just remove the margins and padding's just so we can see everything clear in our parent here we have this parent element I just added the height of 100% so the height of this as you can see down here and a border of 5 to 20 pixels we want we want to bit wild look at this one but yeah just to illustrate where our actual parent is so again you can imagine this as a section or anything on your page and I selected all three children here and just added a basic width and height to each and just a background color just random background color alright so naturally our content is flown down and a column like this right so anything you basically add is gonna flow down in the column like this alright but what happens so we're gonna go to the properties first that you can add to the parent and then we're gonna see what we can deal with the children all right so first we're gonna cover everything that we can do with a parent so here in our parent class all right the outer one we can add display flex so we're gonna say display and we're gonna say flex so what this is gonna do is gonna take all the content in the parent container and it's gonna put them one next to each other like this so horizontally now what we have to keep in mind here is we have two different axes all right we have a main axis which is gonna be horizontal in this case so this is our main axis and the way you notice the easiest is you're gonna look in which way your content flows so if it flows like this then it's horizontal so that's your main axis if it flows like this then that's gonna be your main axis okay and this is gonna become useful in just a bit I promise so what can we do with this well we can change the direction just like it told you so initially it's gonna flow like this horizontally okay but we can change that with Flex direction so if we say Flex direction you're gonna see that a lot of things pop up here so initially it's on row here but we can change it to row reverse which is just gonna have like a mirror effect and it's just gonna switch everything up like that and never really use this to be honest but if you can definitely get experimental with this but the most important one is column which is gonna give us pretty much the initial way our page flows so it goes like this alright well we're gonna keep it with the first one for now like this and then we're gonna switch the column in a bit but I can want to emphasize on why you need to know these main axes and these cross axes well we can use a few properties here on our pair element so we can do let's say we want to align these items and horizontally so we can see justify content and initially the default is flex start which is like this alright but we also have Center which is gonna align everything in the center and we have flex end which is gonna align everything you guessed it to the end and I'm using another laptop here so my keyboard skills are very bad alright what if we want to add space in between well we can do space between say this is why flex box is really nice so this is basically gonna add space in between each element but it's not gonna leave space here at the at the border right so even here it's just gonna add space in between the elements if we want space here we can also add space around like this so this is gonna add space around but as you can see this space is not even with this one so at this even spaces are only between the elements so if you want space here as well you can do space evenly and that's gonna have equal spaces even here here here and here all right cool let's let's mess around with this vertically so what what property that we have there well we have aligned items so this allows us to take our children take our children and align them vertically so we can do Center here which is gonna align everything like this our default again is flex start so the same kind of properties apply here as well so you don't have to remember a ton of things so as you can see this is Fleck start if we on flex end that also works and I apologize here for my my keyboard skills here so that aligns everything he cannot see this one from my face but trust me it's there there's another one we can use called stretch which is not gonna work right now because we have a set of height on each element but what if we remove the height but it's basically gonna stretch to the size of our parent so that was stretched us but since we have a set height here it's not gonna work so that's never again really you stretch but it's good to know now what I want to actually show you is what happens with the cross you know the cross sections like the main axes and the cross axes well if we add flex direction column these two aligned items and justify content you can imagine as they change places basically so now if I adjust if I can't justify content cent let's go space around for example it's not gonna do it horizontally anymore it's gonna do it vertically and that's because just because we change the flex direction so that's what you have to keep in mind the cross axes are changing so the main axes again that's all you need to know if your content flows like this that's your main axis if it flows like this that's your that's your main axis then so just keep in mind what direction you're you're if you're in column or row and then these are gonna be different so now if we want to align this actually horizontally all we have to do is just a line items Center and there we go we should have that in the center so that's how these work so we have our I added another div here just to illustrate our next example very easily if we go down like this and make our screen smaller you're gonna see that nothing basically happens right now our content doesn't flow to the next line here however we can do that if we add a property called flex wrap now this is initially set to no wrap so nothing's gonna happen but if we do add your if we make our screen smaller you're gonna see that our content jumps down here as soon as it doesn't have any space left up here so it goes all the way down here now how can we modify the way the car content flows as soon as it hits the next line well for that we have a property called align content and if we do flex start here then all of our content is just gonna come down like that so if we make this big again and this doesn't work there we go you're gonna see that our content just comes down one next to each other and here you can pretty much experiment the same way as we did with justified content and align items so we have Center that's not flex Center just Center and our content is just basically gonna go down here in the center we can also use something like align content space around and that's just gonna add space around vertically again so this is probably used it's not used that much but it's used when you have multiple lines of content going down if you have the Flex rack on so if your content flows down like this to another line that's when aligned content is very useful now again you can imagine these sections as smaller sections so this can be a big section and these can be smaller sections so and here in our parent and on our children we can add content like a h1 and AD display flex to this as well and align it in center or wherever you want to align it so don't be afraid to to add more because making more complex layouts you're gonna have to add display flex to even inner children making them the parent to the hello here all right so definitely this is a more practical way of doing it you're gonna have a big div you're gonna have smaller sections that you're going to position the way you want ad more content a display flex to this as well and do that now one thing I actually forgot here and what if we want to align the texts and this you can also do an align items you can do baseline which is gonna align the text as you can see perfectly one by each other like that so that's something to also keep in mind if you want to do so there is also a shorthand notation you can use which I recommend if you want to control the direction of your reflects items and also the wrapping of it so you can do flex flow here and what this does it basically combines the two properties so you can combine the direction and if it should wrap or not so we can do column here and wrap so if we save this as you can see right there it's gonna do the same thing now if we go down like this it's gonna wrap in that way obviously because we have it and column all right so those are pretty much all the properties that you can use on a parent now let's move on on what you can do with the children here so we have child one two three and four selected here I just have display flex a simple display flex on it because I'm not gonna bother with this now we're just gonna do these children now so the first thing we have is order which is really awesome because you can easily modify the order of your sections without changing anything in HTML so maybe one day imagine that this can be our header this can be two sections and this can be our footer well maybe we want to change these two sections positions well we can easily do that with order on the children down here so how is this gonna work well basically all we have to say is order and I'm selecting the first one here so one and basically the bigger the number here it's gonna be on the last so if I say one here it's gonna put it all the way forward here now why is that well initially every element by default has an order of zero so as you can see nothing happening if I add zero here however the big again the bigger the number is gonna be placed less here so how would we change let's say to entry how would we change these two positions well this one can be order zero which is default so we're actually not gonna do that this one can be order one two and three so this is our initial actually everything nothing should change right now orphans order tends to go for here so 1 2 3 4 so if I want to change to entry I just add 2 here and 1 here and boom we change the position what if I want to do for change the 4 and the 1 well again the lower the number it's gonna be the first one here so if I change this to zero and I'm gonna change this to 4 then this is gonna be boom we changed its position so that's order for you just remember the higher the number it's gonna push is gonna be pushed to the last element the lower default is 0 it's gonna be the first one so if you really want to mess a lot with these you can just name them 0 1 2 3 4 and just modify them like that so that's order our next property is gonna help us change the size of each container down here so if we want to change the size we can do something called flex grow what flex grow is gonna do is gonna take all the available space that's left here and it's gonna take the space and it's gonna make it its actual size so if I put it on 1 here then it's gonna take all the available space left so the empty space basically now if I do it on 2 it's gonna split that empty space that we had and it's gonna split it between 1 & 2 so if I want the 1 & 2 to be the same size we can do something called flex CRO 1 again boom if I want this to be 2 times bigger than the to the I just do - and as you can see this is gonna be 2 times bigger than this one so if you want equal dips here with the same width well you can just add flags go one two each and then they're gonna have the same size like that so even if we have empty space even if we make this larger you're still gonna share the same size so this is really nice for responsive design now the opposite duplex grow is flex shrink so what this is gonna do is basically the opposite that defines the ability for a flex item to shrink if it's necessary and if we set here one well nothing's gonna happen right now but there is another one which is called flex basis which is basically gonna add a default width so rather than using width you can kind of use flex basis actually so if we set flex basis here to 200 pixels well then it's gonna yeah it's the default size of a container that's what it's gonna do here so this is more recommended however it's actually more recommended to not mess around with Flex grow and flex shrink and everything like that rather than doing all of this crap we can just delete everything here and you can just define something called flex and this is gonna combine basically all three so it's gonna combine flex grow it's gonna combine a flex shrink and flex basis so you could define something like zero and this is actually Auto so this is the auto this is the default that it has but you can combine everything like this and the nice thing is rather than you messing around with this it's gonna apply some very nice defaults here so right now as you can see it kind of works the same way as flex grow but it also applies those defaults so now the cool thing that we can deal with this is let's say we want the Flex we want it to grow so whenever there is empty space we want it to grow and take up the full space the shrink is default by one so we're not gonna touch that usually we don't really touch that that much but and we're gonna add a basis of 300 pixels so this is the size that we're gonna use so basically we don't really need the width here anymore but let's copy and paste this to each element like this so basically this is gonna take effect right now so they're gonna have a 1 1 1 the flag scroll so it's gonna be the same size but as soon as it hits that 300 mark it's gonna go down here and that's because I add a flex wrap so if you have flex wrap and have this property here if we make this smaller you're gonna see that as soon as doesn't have space anymore for 300 it's gonna jump all the way down here and then it's gonna grow and it's gonna take up the full space so if we go down one more time it's gonna jump down like that so again this is really nice for responsive web and definitely take I would recommend to go on CSS tricks com take a look at a few examples that you can mess around with this maybe do an image gallery or something like that yeah there's a lot of possibilities with this and last but not least since it's getting so dark outside and you can barely see me anymore we can also add something called aligned self so this is used if you want a single element to be positioned let's say vertically on your page so you don't want aligned items everything down here maybe you just want the two in the center so to do that all you have to do is just say aligned self and we can do center here and that's gonna jump it down here and let's let's put this one down at the bottom aligned self that's cool whoo flex and so you can get some wacky designs here if you want but yeah this is kind of fun to use if you want a specific section to be moved along your page so that's it that's the gist of flexbox hope you understand the more hope hope this helped in any way thank you very much for watching we're definitely gonna celebrate New Year's and after New Year's we'll be back for great great here with more tutorials and more awesome things so thanks again please drop and subscribe if you enjoyed this video and I'll catch you in 2019 [Music]

Channel: Dev Ed

Views: 314,250

Keywords: learn flexbox, learn flexbox in 20 minutes, learn html and css, flexbox tutorial, create layouts using css flexbox, learn to use flexbox in css, how to use flexbox, css flexbox tutorial, css flexbox, html tutorial, what is flexbox, css grid, css grid tutorial, how to create website layouts using css grid, how to create content using flexbox, how to align content using css flexbox, css tutorial, flexbox vs css grid, flexbox grid, flexbox, html, css, layout

Id: FTlczfR82mQ

Length: 20min 20sec (1220 seconds)

Published: Sat Dec 29 2018