Flexbox CSS In 20 Minutes

hey guys welcome to a quick crash course on CSS flexbox so many of you probably know what flexbox is and that's fine this will help you brush up on your skills a little bit but this video is more for beginners that know CSS but want to get into using flexbox and their projects I did get a request for this and I figured it'd be something a bit different nice break from the JavaScript and PHP videos alright so before we begin I just want to mention my website traversing mediacom where you can find all of my tutorials videos free courses premium courses via Juwan --ax source code and more alright so check that out alright so what the hell is flexbox it's also called the flexible box model it's basically a layout mode or model that provides an easy and clean way to arrange items within container so if you've used CSS for a while you've probably been using the old block model where you assign widths whether it's a percentage or a fixed width and then you use floats to arrange items on the page if you want for instance three boxes in a row and then you'd have to factor in your margins and your padding and you have to do all types of math to figure out how much margin how much width you should have and it can get kind of it can be kind of a pain in the ass so flexbox has basically taken care of all of this there's no floats at all it's responsive and mobile-friendly km it looks good on smaller screens and of course you can use media queries to to make that work even better positioning child elements is much much easier and flex containers their margins don't collapse with the margins of their contents and then another great feature is that if you want to change the order of the elements okay so for instance if you have a main column and then a sidebar in another sidebar if you want to change the order of that you don't have to edit the HTML you don't have to move the first sidebar over to the to the other side if you want the main column in the middle all right you can simply assign an order property and we'll get into all of this as we move along all right so some of the concepts of the flexible box model is the ability to alter item width and height to best fit in its containers available free space flex box is also Direction agnostic alright and this is different than the block model which is vertically bias and then the inline which is horizontal horizontally bias flex box works well for both alright flex box was created for small-scale layouts and there's another standard called grids which is geared more towards larger scale stuff this will work similar to the way to Twitter bootstrap grid system works alright but that's for another video so this is a quick diagram of how flex box looks basically we have a main container wrapper alright the Flex container and this is the element that we assign the display property we design we assign display flex and then inside that we have child elements or flex items so there's certain properties that go on the container and certain ones that go on the items themselves there's also an X and y axis or in Flex box it's called the main and the cross access and we can use certain alignment properties to position items here and to to change directions and vertically and horizontally aligned all kinds of stuff alright but it's kind of hard to explain just talking and showing you a diagram so we will get into the code and I'll show you how it works so here are the main Flex properties okay so we have display flex okay you can also do in-line flex this goes on that container element we can assign the direction so flex direction row which would be horizontally or we could do column which would assign it vertically flex wrap so we can define if we want the to rap or not so if we make the browser window smaller should they go down to the next line or not flex basis is basically the same as with okay you can assign a width to to each of your Flex items justify content okay so this basically if we wanted to align to the left we can say flex start the right would be flex end we can also do Center and then we have a bunch of other alignments to align self this basically allows the default alignment to be overridden for individual flex items we also have aligned items this is the behavior for how the Flex items are laid out along the cross access and then we have aligned content which aligns on the cross access now flex grow and flex shrink basically we can we can make different elements in the row different sizes so we may want to main column that takes up let's say three spaces and then two smaller sidebars to take up one and flex is basically both of these put together but we'll get into that as we move along we also have order so we can change the order of elements without actually having to change the HTML all right so enough of these slides let's go ahead and jump into some code and I'll show you how this works all right so what I have here guys I have the scratchpad dot IO console where we can edit our HTML and CSS and this will live reload and what we have is if we look at the HTML we have a div with the class of container 1 and that's wrapped around three other divs with the class of box 1 box 2 and box 3 and they all have just an h3 in a paragraph all right and then up here if we look we have our styles we have the container one which doesn't have any styles in it container one div I did this just so that we can have a border and some padding around each one of these boxes and then we have some empty our box 1 box 2 in box 3 now let's say that we want these to be side by side and take up the whole width so all we have to do is go to the container element and say display flex and you can see that it just automatically puts them side by side we didn't have to put in any floats or anything like that and that may be very well what the only thing that you want to do and that's fine but let's go in a little further and let's assign flex oops we'll say flex 1 and we're going to assign flex 1 to all three of these elements alright and that basically gives us the same thing we have 3 even boxes now if we want to let's say take box 1 and make that the main column make that a little wider what we could do is change that to flex 2 alright you can see that it pushed these two over and this is now larger we can go on to flex 3 flex 4 and so on actually I think when we get to a certain length certain width it just stops let's keep it at flex 2 all right now if we wanted to take box 3 and say flex 2 we could do that as well but what I want to do is now show you how we can change the order of these let's say that we want this to be the main column and we want that in the middle of the two side bars so all we would have to do is say box one will say order 2 and to let's say order 1 and then 3 will say order 3 so now you can see box 1 is in the middle because we assigned order - okay - is in 1 and 3 is in 3 now notice that by default these are all the same height even though that this box 1 the text is ending up here these are still all the same height and that's by default now if we want to these two let's say a line to the top without you know without the automatic height then we could go to our container and let's say we can say a line items and let's set it to flex - start all right now you can see that box one is shorter because it has less content if we want to go the other way and put it towards the bottom we could say flex end and that would move it down alright and I'm actually going to leave these I'm just going to comment them out just so you guys can have this for future reference ok so that'll be end and I'm just going to wrap this in a comment alright we can also do Center so if we were to say a line items Center you can see that that moves it to the center alright - by default it's actually stretch ok that's that's the default alright let me just move this up here okay so that's align items now if you want to change the direction to go vertically instead of horizontally horizontally is a row vertically as a column we could add flex direction and set that to call or a column and you can see it goes back to being column all right but we do want a row so I'm going to just put that in there now this is all well and good but what if you want to have for one you want to have margins and you also want to specify the widths all right because right now we don't have any with specified so what I'm going to do is go down here and go under our container one and I'm going to just paste this in alright so you can see we have a div with container - let me just fix this so container two and then each div inside has a class of container - box they're all the same I don't for what I want to show you I don't need to have them with different class names alright and then let's just go ahead and add our borders and stuff to that by just saying container - div alright so what I want to do now is take the container - box remember that pertains to all three of these boxes they all the same class alright so let's go up here and just put that in there and let's set a width and we'll set that to 30% okay so you can now see that the boxes are 30% wide now they're not side-by-side because we haven't attached them to flex box yet so what we need to do is just like we did with container 1 up here let's go ahead and put container 2 and we're going to set display to flex okay that puts them side by side and notice that well I guess you can't really notice it here let me make these a little let's say 20 all right so now we have 20 20 percent for each box but it leaves all this room on the side here now if we want to basically put margin in the middle of this so that this can spread all the way across and also have margins in the middle then what we can do is go up to our container - and we can use justify content now by default it's going to be flex start okay notice that that didn't change anything I'm going to actually keep this stuff in a comment so let me just comment that out for you alright so flex start now let's say we want it to line over here we could say flex end okay that pushes it over let's copy that put that up here now what I would want to do in this situation is actually let's see we do Center that puts it in the center okay but we want margins in the middle so we want to set it to space between okay and you can see that that puts the margins in the middle alright I'm going to actually change that to let's say 25 or 27 all right we also can do space around now notice with space between there's nothing on the sides there's no margin on the side it's flush but if we say space around that's going to also add some margins on the side all right but I'm going to keep it at space between what I mean to save it now using width is fine it does work but if you want to make it more I guess flexi then you want to use flex basis okay which does the same exact thing it's just a more flexbox way to do it okay rather than with use Flex basis now what I'm going to do is I'm going to just release this full-screen mode here and I'm going to drag this oh you know what it's not ah this isn't a good platform to give you this example oh yeah it is I can just go like that so as I make this smaller let's say we're looking at this on a smartphone or tablet these columns are way too small we don't want to have a three column layout when you're on a smartphone so to fix this what we can do is just use a simple media query around our containers so up here at the top let's say media I don't like this editor so media and let's say min-width and we'll set this to let's say 7 768 pixels alright and what we want to do is take the container 1 & 2 and cut that and let's put that in there alright now when we're at a certain width now this is a lot this is zoomed in so this looks like it's a lot more than 768 pixels wide but it's not if I actually zoom out yeah that's so that's about right so when we get to a certain point our columns go away okay so on a mobile device it would look more like this all right so that's an easy solution to basically make this responsive let me just make this bigger again all right for the time being I'm going to change this to let's a 468 so what about wrapping okay we want to have the option to make our elements wrap so what I'm going to do is paste in another set down here this is going to be container 3 and notice I have what is it six boxes in here I'm just going to add the border around them too so right here let's say container 3 container 3 div alright and then what we'll do is go right here and say container 3 box ok they all have the same class and let's set the width or the Flex basis okay so we'll set that to 15% and let's make sure we add the display flex I'm not going to put it in the media query this one so container 3 display flex all right so now we have these boxes side by side and I want them to wrap so I'm going to go to the container 3 and we're just going to set flex - wrap I'm going to set that to wrap and now you can see that at a certain point this one gets pushed down there alright and if I were to make this smaller you can see that it's going to wrap up into the point where we actually have two rows two rows of three boxes all right so that's wrap and I probably want to set that with - let's see let's set it to 10 or 12 yeah all right and then we may want to add space between justify content for that as well all right so that's the gist of flexbox hopefully it helps some of you guys out I will make this code available on my website Travis and Mediacom so that you guys can kind of use it as a reference when you want to use it in your projects but yeah so if you like this video please subscribe leave a like comment leave a dislike if you didn't like it and I will see you next time

Channel: Traversy Media

Views: 1,328,310

Rating: 4.9416556 out of 5

Keywords: flexbox, css flexbox, css grid, justify-content, flex

Id: JJSoEo8JSnc

Length: 19min 59sec (1199 seconds)

Published: Thu Dec 08 2016