Intro to Flexbox | An Evolving Web Free Tutorial

hello my name is Trevor and I'm a developer and I'm a trainer at evolving web and we want to start doing some more video content and so we're gonna start with giving you a little intro to flexbox there's a training that I do it's called a intro to theming in Drupal and on the first day we build a theme from scratch and just as an example I asked the students who's used flexbox before and it's surprising how many people have not so this is just gonna be a real quick crash course to what flex box can do for us and flex box was introduced with css3 and certainly gives a new way of laying things out on our pages you've probably used floats before it had to move and shift things around on the page with Flex box we get a much much easier more you know understandable way of moving things around so let's let's dive into it what I've got here on the screen is a very simple example I've got three sort of sections here main content left sidebar and the right sidebar and add evolving web we try to build our sites using a mobile first perspective so we got on the smallest screen size here and so they're each you know got their own background color and they're all about 200 pixels high so here it is and in the HTML is is set in a good way for accessibility so if you're using a screen reader it's gonna look at this and it's gonna read the the main content first and then go to the other sections the sidebar one in the sidebar two right there so this is good semantically this is a good way to have our HTML so here it is they're all stacked on top of each other each have 100% width and I've got a CSS file here and I've created a media query and I've said at 768 pixels give each of these a different width so the main content will be given 50% width and the two sidebars will be given 25% with so let's increase the size of the browser and let's see what happens here we go and there this has taken up 50% and then this sidebar in this sidebar taken up 25% now the issue we're seeing here is that they're not all in the same same row they're not beside each other so to do this with floats we would do this let's go back to the CSS we would add this rule here float left and float left on all of these okay save that we refresh and now they're all beside each other and that's that's good that's that's that's what we want but we got a problem we got a problem the problem is that the left sidebar it's the right of the main content well it's a left sidebar it should be on the on the left in floats it's it's all mentally taxing to get this done I'm gonna show you how to do it as quick as I can here what we got to do first is we got to add this rule position:relative on all this so on each of these I'm going to add these rules here position:relative and I'm gonna copy this to each of these okay now what we need to do is we need to move this sidebar this left sidebar here we got it we got to pull it pull it here so it's to the left of the the main cons and then we got to sort of push the main content to the right so we'll start with the main content we got it we go we want to you know push this you know 25% this way because that's the the width at the sidebar so let's take a look we'll go left 25% let's save that let's see what happens okay so I did it gets you know pushed left 25% we got this blank white spot there so now this this left sidebar we've got to you know pull it the other way okay and we got to pull it well let's see let's put in a value just see what happens this is where sort of gets confusing here so we got a will pull it man we use this rule left but we got to use a negative value for this okay well say negative 25% how much do we have to do it you know it's refresh okay so it's it's pulled it to the left here but we got the value wrong I guess we have to pull it you know a bit more let's try 50% negative 50 percent refresh okay there okay that now we now we got it all right and this is responsive this this this this does work but that was mentally taxing okay mentally taxing and the values put in you put in there for the push in the poll are dependent on on how big the section is so as an example if I change the width of the left sidebar let's say I move it from not 25% but to 20% and i refresh well what we end up with is this this blank white spot right there all right so what do we got to do we got a you know I guess we have to push the main content you know not 25% but 20% we refresh okay and I guess we have to add a bit more percentage to the right side but it's confusing it's really confusing to use floats to do your layout like this to get all responsive there's got to be a better way and the quiz there totally is a better way this is what a flexbox was designed for and again flex box came with with css3 and css3 has been available to use for quite a few years now so let's let's see how we can do this in a much more simpler simpler way so what I'm going to do is I'm going to just comment out this float section here and I've got a flex box section here I'm going to uncomment this and so we got the same widths for all these here we got 50% width on the main content 25% on each of the sidebars the only difference I've really done here is I've added this rule on the body or in a real project any sort of container you'd have for each section I've added display flex display flex okay let's save this and let's see what it what it looks like well refresh okay and it looks the same way that it did when we just added floats before now how can we move this left sidebar to the left of the main content we gotta do we have to do you know position:relative and pushing and pulling it in different section no we don't have to do any of that flex box comes with this really cool rule called order order and with order we can choose which order we want these these to be in okay so in this scenario here we've got our you know our columns here what we want is we want this left sidebar to be the first one to show up we want to have the order one and we want this main content to be the second one to show up order two and this right sidebar in the same position where it is right now but we want to be in the order three okay the rule is super simple super simple so I still have the same width for these so sidebar one I want this to be the first one to show up so I'm going to order one and the main content I wanted to be the second to show up so I'm gonna go order two and then the sidebar right sidebar I want this to be the third to show up so I'm gonna go order three all right let's save that and we will refresh let's see what happens there we go much much simpler we didn't have to do any pushing and pulling position:relative and none of that much much easier in flexbox and and if we want to do this on different break points let's say we want to change the order on different break points I got another little example here let's say let's say we want the left sidebar this is Akademik of course the left sidebar first and the right sidebar second and then the main content on the right side really easy to do this I'm not sure if you'd ever use this on a real on a real project but I can change the order of things here I'm gonna change the sidebar one to be the first one I want sidebar two to be the second one to show up and then main content to be the third one to show up again would use on the would use this on a real project I don't know maybe but just showing that at this breakpoint at this breakpoint it'll be different so before I do that I'm gonna show how it looks on this screen size okay they're all stacked on top of each other then once we hit 7 or 68 pixels of this breakpoint they're all like this and I'm gonna refresh and then now we want to get to this breakpoint 1024 we're gonna see the right sidebar swap places there so that's just a real real simple demo of how flexbox works you can do a bunch of really cool stuff with flexbox mixer makes it much easier to to Center and align things they're things that just seem to be such a headache before with before flexbox so hope you enjoy this we're gonna try to do more of these thanks for watching and go to evolving web CA we've got other trainings we're gonna do more online stuff so hope you tune in and thanks for watching

Channel: Evolving Web

Views: 240

Rating: 5 out of 5

Keywords: CSS, Web Development, Tutorial, Flexbox, CSS grid, web layout, CSS layout, responsive, web design

Id: tJHyP8-ApHM

Length: 9min 43sec (583 seconds)

Published: Fri May 08 2020