Flexbox CSS In 20 Minutes

hey guys welcome to a quick crash courseon CSS flexbox so many of you probablyknow what flexbox is and that's finethis will help you brush up on yourskills a little bit but this video ismore for beginners that know CSS butwant to get into using flexbox and theirprojects I did get a request for thisand I figured it'd be something a bitdifferent nice break from the JavaScriptand PHP videos alright so before webegin I just want to mention my websitetraversing mediacom where you can findall of my tutorials videos free coursespremium courses via Juwan --ax sourcecode and more alright so check that outalright so what the hell is flexboxit's also called the flexible box modelit's basically a layout mode or modelthat provides an easy and clean way toarrange items within container so ifyou've used CSS for a while you'veprobably been using the old block modelwhere you assign widths whether it's apercentage or a fixed width and then youuse floats to arrange items on the pageif you want for instance three boxes ina row and then you'd have to factor inyour margins and your padding and youhave to do all types of math to figureout how much margin how much width youshould have and it can get kind of itcan be kind of a pain in the ass soflexbox has basically taken care of allof this there's no floats at all it'sresponsive and mobile-friendly km itlooks good on smaller screens and ofcourse you can use media queries to tomake that work even better positioningchild elements is much much easier andflex containers their margins don'tcollapse with the margins of theircontents and then another great featureis that if you want to change the orderof the elements okay so for instance ifyou have a main column and then asidebar in another sidebar if you wantto change the order of that you don'thave to edit the HTML you don't have tomove the first sidebar over to the tothe otherside if you want the main column in themiddle all right you can simply assignan order property and we'll get into allof this as we move along all right sosome of the concepts of the flexible boxmodel is the ability to alter item widthand height to best fit in its containersavailable free space flex box is alsoDirection agnostic alright and this isdifferent than the block model which isvertically bias and then the inlinewhich is horizontal horizontally biasflex box works well for both alrightflex box was created for small-scalelayouts and there's another standardcalled grids which is geared moretowards larger scale stuff this willwork similar to the way to Twitterbootstrap grid system works alright butthat's for another video so this is aquick diagram of how flex box looksbasically we have a main containerwrapper alrightthe Flex container and this is theelement that we assign the displayproperty we design we assign displayflex and then inside that we have childelements or flex items so there'scertain properties that go on thecontainer and certain ones that go onthe items themselves there's also an Xand y axis or in Flex box it's calledthe main and the cross access and we canuse certain alignment properties toposition items here and to to changedirections and vertically andhorizontally aligned all kinds of stuffalright but it's kind of hard to explainjust talking and showing you a diagramso we will get into the code and I'llshow you how it works so here are themain Flex propertiesokay so we have display flex okay youcan also do in-line flex this goes onthat container element we can assign thedirection so flex direction row whichwould be horizontally or we could docolumn which would assign it verticallyflex wrap so we can define if we wanttheto rap or not so if we make the browserwindow smaller should they go down tothe next line or not flex basis isbasically the same as with okay you canassign a width to to each of your Flexitems justify content okay so thisbasically if we wanted to align to theleft we can say flex start the rightwould be flex end we can also do Centerand then we have a bunch of otheralignments to align self this basicallyallows the default alignment to beoverridden for individual flex items wealso have aligned items this is thebehavior for how the Flex items are laidout along the cross access and then wehave aligned content which aligns on thecross access now flex grow and flexshrink basically we can we can makedifferent elements in the row differentsizes so we may want to main column thattakes up let's say three spaces and thentwo smaller sidebars to take up one andflex is basically both of these puttogether but we'll get into that as wemove along we also have order so we canchange the order of elements withoutactually having to change the HTML allright so enough of these slides let's goahead and jump into some code and I'llshow you how this works all right sowhat I have here guys I have thescratchpad dot IO console where we canedit our HTML and CSS and this will livereload and what we have is if we look atthe HTML we have a div with the class ofcontainer 1 and that's wrapped aroundthree other divs with the class of box 1box 2 and box 3 and they all have justan h3 in a paragraph all right and thenup here if we look we have our styles wehave the container one which doesn'thave any styles in it container one divI did this just so that we can have aborder and some padding around each oneof these boxes and then we have someemptyour box 1 box 2 in box 3 now let's saythat we want these to be side by sideand take up the whole width so all wehave to do is go to the containerelement and say display flex and you cansee that it just automatically puts themside by side we didn't have to put inany floats or anything like that andthat may be very well what the onlything that you want to do and that'sfinebut let's go in a little further andlet's assign flexoops we'll say flex 1 and we're going toassign flex 1 to all three of theseelements alright and that basicallygives us the same thing we have 3 evenboxes now if we want to let's say takebox 1 and make that the main column makethat a little wider what we could do ischange that to flex 2 alright you cansee that it pushed these two over andthis is now larger we can go on to flex3 flex 4 and so on actually I think whenwe get to a certain length certain widthit just stops let's keep it at flex 2all right now if we wanted to take box 3and say flex 2 we could do that as wellbut what I want to do is now show youhow we can change the order of theselet's say that we want this to be themain column and we want that in themiddle of the two side bars so all wewould have to do is say box one will sayorder 2 and to let's say order 1 andthen 3 will say order 3 so now you cansee box 1 is in the middle because weassigned order - okay - is in 1 and 3 isin 3 now notice that by default theseare all the same height even though thatthis box 1 the text is ending up herethese are still all the same height andthat's by default now if we want tothese two let's say a line to the topwithout you know without the automaticheight then we could go to our containerand let's say we can say a line itemsand let's set it to flex - start allright now you can see that box one isshorter because it has less content ifwe want to go the other way and put ittowards the bottom we could say flex endand that would move it down alright andI'm actually going to leave these I'mjust going to comment them out just soyou guys can have this for futurereferenceok so that'll be end and I'm just goingto wrap this in a comment alright we canalso do Center so if we were to say aline items Center you can see that thatmoves it to the center alright - bydefault it's actually stretch ok that'sthat's the default alright let me justmove this up here okay so that's alignitems now if you want to change thedirection to go vertically instead ofhorizontally horizontally is a rowvertically as a column we could add flexdirection and set that to call or acolumn and you can see it goes back tobeing column all right but we do want arow so I'm going to just put that inthere now this is all well and good butwhat if you want to have for one youwant to have margins and you also wantto specify the widths all right becauseright now we don't have any withspecified so what I'm going to do is godown here and go underour container one and I'm going to justpaste this in alright so you can see wehave a div with container - let me justfix thisso container two and then each divinside has a class of container - boxthey're all the same I don't for what Iwant to show you I don't need to havethem with different class names alrightand then let's just go ahead and add ourborders and stuff to that by just sayingcontainer - div alright so what I wantto do now is take the container - boxremember that pertains to all three ofthese boxes they all the same classalright so let's go up here and just putthat in there and let's set a width andwe'll set that to 30% okay so you cannow see that the boxes are 30% wide nowthey're not side-by-side because wehaven't attached them to flex box yet sowhat we need to do is just like we didwith container 1 up here let's go aheadand put container 2 and we're going toset display to flex okay that puts themside by side and notice that well Iguess you can't really notice it herelet me make these a little let's say 20all right so now we have 20 20 percentfor each box but it leaves all this roomon the side here now if we want tobasically put margin in the middle ofthis so that this can spread all the wayacross and also have margins in themiddle then what we can do is go up toour container - and we can use justifycontentnow by default it's going to be flexstart okay notice that that didn'tchange anything I'm going to actuallykeep this stuff in a comment so let mejust comment that out for you alright soflex start now let's say we want it toline over here we could say flex endokay that pushes it over let's copy thatput that up here now what I would wantto do in this situation is actuallylet's see we do Center that puts it inthe center okay but we want margins inthe middle so we want to set it to spacebetween okay and you can see that thatputs the margins in the middle alrightI'm going to actually change that tolet's say 25 or 27 all right we also cando space around now notice with spacebetween there's nothing on the sidesthere's no margin on the side it's flushbut if we say space around that's goingto also add some margins on the side allright but I'm going to keep it at spacebetween what I mean to save it now usingwidth is fine it does work but if youwant to make it more I guess flexi thenyou want to use flex basis okay whichdoes the same exact thing it's just amore flexbox way to do it okay ratherthan with use Flex basis now what I'mgoing to do is I'm going to just releasethis full-screen mode here and I'm goingto drag this oh you know what it's notah this isn't a good platform to giveyou this example oh yeah it is I canjust go like thatso as I make this smaller let's saywe're looking at this on a smartphone ortablet these columns are way too smallwe don't want to have a three columnlayout when you're on a smartphone so tofix this what we can do is just use asimple media query around our containersso up here at the top let's say media Idon't like this editor so media andlet's say min-width and we'll set thisto let's say 7 768 pixels alright andwhat we want to do is take the container1 & 2 and cut that and let's put that inthere alright now when we're at acertain width now this is a lot this iszoomed in so this looks like it's a lotmore than 768 pixels wide but it's notif I actually zoom out yeah that's sothat's about right so when we get to acertain point our columns go away okayso on a mobile device it would look morelike this all right so that's an easysolution to basically make thisresponsive let me just make this biggeragain all rightfor the time being I'm going to changethis to let's a 468 so what aboutwrapping okay we want to have the optionto make our elements wrap so what I'mgoing to do is paste in another set downhere this is going to be container 3 andnotice I have what is it six boxes inhereI'm just going to add the border aroundthem too so right here let's saycontainer 3 container 3 div alright andthen what we'll do is go right here andsay container 3 box ok they all have thesame class and let's set the width orthe Flex basis okay so we'll set that to15% and let's make sure we add thedisplay flex I'm not going to put it inthe media query this one so container3 display flex all right so now we havethese boxes side by side and I want themto wrap so I'm going to go to thecontainer 3 and we're just going to setflex - wrap I'm going to set that towrap and now you can see that at acertain point this one gets pushed downthere alright and if I were to make thissmaller you can see that it's going towrap up into the point where we actuallyhave two rows two rows of three boxesall right so that's wrap and I probablywant to set that with - let's see let'sset it to 10 or 12 yeahall right and then we may want to addspace between justify content for thatas well all right so that's the gist offlexbox hopefully it helps some of youguys out I will make this code availableon my website Travis and Mediacom sothat you guys can kind of use it as areference when you want to use it inyour projects but yeah so if you likethis video please subscribe leave a likecomment leave a dislike if you didn'tlike it and I will see you next time