Flexbox Crash Course 2022

[Music] hey what's going on guys welcome to my flexbox crash course so i did one of these about five years ago or so and i'm in the process of updating all my old crash courses so in this video we're going to go from knowing nothing about flexbox to knowing just about everything and we're going to start off with some slides just to give you an idea of what flexbox is and then we'll jump into vs code and we'll go over all the css properties that have to do with flex containers and flex items then after that we're going to build a layout including a nav bar with flexbox so this video should be able to to get you up and running and make it much easier to create layouts all right so flexbox is also known as the flexible box model it's part of native css and it's a one-dimensional model that provides us with different methods to offer space distribution of elements and it gives us powerful alignment capabilities so if you're relatively new to web development i can tell you that you definitely picked a good time to get into it because before flexbox we use something called floats and even use tables to align elements on the page uh you know and create rows and columns and so on and it was pretty much a nightmare and it led to a lot of bad layouts so flexbox has definitely made life easier for people that work with css now css grid is another option that you have to create layouts i'll be redoing my grid crash course as well now many people ask me which one they should learn and the answer is always both you can use them for different things it's pretty much preference but what i like to do is use css grid for the overall layout of the page and then i use flexbox for the inner elements you don't have to do things that way that's just what i do i i know a lot of people that only use flexbox and don't even touch css grid and vice versa all right so the first thing to understand is that we have flex containers and flex items and these are just just html tags so a flex container is a single element and we the way that we define a container is with the display property so we say display flex and then all of the direct children are going to be flex items okay so if we look at this example here this html we have a div with the class of flex container and obviously that could be called any you know whatever class name you want and it doesn't have to be a div either it could be any element so if we say display flex on this div right here then everything in it the immediate children are going to be flex items and flex containers and flex items have specific css properties that we can use to do different things all right now it doesn't have to be a div inside the container you know to be a flex item you can see we have two divs and then we have an image what's going to happen if we say display flex on this div right here these turn into flex items and it's going to be put they're going to be put into a horizontal row all right so the text and the image they're going to go horizontal automatically now you can change the direction from a row to a column with the flex direction property so you can say flex direction column if you want and then it'll go up and down instead of left to right all right now i'm not going to go over all of these properties right now we're going to do that in vs code i like to do things more hands-on but just know that there's certain cla certain properties that we put on containers and certain ones that we put on flex items all right now another thing that i want you to get familiar with is the axes so it's important when using a certain alignment properties that you understand how the axis goes so on a flex row which is what a flexbox is going to do automatically a row is horizontal all right so if it's a row then the horizontal axis is going to be the main axis and a the cross axis is going to be the uh going vertical okay up up and down or the y-axis and then if we say flex direction column and we make things go vertical the main axis is then going to be vertical and the cross axis is then going to be horizontal okay so that's really important to keep in mind because like i said there are certain alignment properties that we use and what they do really depends on what access we're talking about and the main axis and cross axis are different depending on if it's a row or a column but i'll get more into that in a little bit all right so i just wanted to spend uh just a couple minutes in slides just so you know what flexbox is and you understand that there's flex containers there's flex items and then we have our main axis our cross access and so on so now we're going to jump into vs code and i'm going to show you this in a more hands-on way all right guys so we're going to get started and all i have is two files i have an index html which is empty in a style.css which is also empty and what i'm going to do is just create a boilerplate here with emmett in the vs code so exclamation enter and for the title here we'll say flexbox crash course and let's bring in our css so we want to not script we want a link tag and we're going to bring in style.css and then in the body for now i'm just going to say hello and you can either open this index.html right on your file system or if you're using vs code you can use an extension called live server which is what i'm going to do so that should open in the browser now as far as the html it's going to be very simple i just want to have a container so i'm going to have a div with the class of flex container and then we'll have some divs in here which will be our flex items so i'm going to give these a class of item we'll say let's do times three so we'll have three of them and in each one we'll just have some text we'll say item and then whatever the number is and just to show you what i did here this is emmet so just to kind of have a shortcut here to create three divs class of item and then just some text in each one so let's go ahead and save that we should just see item one two three okay so we'll jump into our style css and i just have some basic styles i want to add so for the universal selector we're going to say box sizing set that to border box and then i'm going to have zero margin and zero padding so i'll just create a reset and then on the body i'm just going to add a font let's do font family and i'm just going to use ariel okay now i want to style the items so we don't just have some text we'll turn them into boxes so this so i can show you things a little bit easier so the item class let's go ahead and do let's do a width of 100 pixels and we'll do a height of let's say 100 pixels and a set of background here so the background let's see i want to do that blue that's css blue which is hexadecimal 2 5 4 d e d e 4. all right and then let's do a margin we'll say margin 10 pixels all around and let's also make the color of the text we'll make that white okay so now we have these boxes and i should be able to make this smaller make this a little bigger alright so we have these three boxes the class of flex container we want that to be our obviously our flex container so let's go right here let's say flex dash container and remember to create a flex container you want to add on the display property you want to set that to flex so as soon as i do that you'll see that these boxes are then going to be put into a flex row now on the background for the flex container i'm going to add just a light gray color so we can see exactly where that is and then i want to show you how we could get the same result before flexbox which is kind of a pain so i'm going to comment out display flex brings us back to this and then what we would do is we would add a float on the item itself so we could say float left okay and it does float left however we have an issue because if after the div here we want to put something let's just put in h3 and say hello you'll see that that is now also float floated so we would have to then clear the float and we could do that either by adding another element in to do this on or we could just do flex container and then we could use after and if you use before or after you have to add content in this case it's just going to be blank and then we would do clear both and then we would have to display it as a block so that that hello then gets put put on the next line and this gets goes all the way over all right now in addition to having to do this we didn't have access to any of the flex properties that uh that you'll find out are very very helpful so layouts were often got screwed up and things didn't line up correctly so flexbox is it's really great so i just wanted to show people that that maybe didn't know life before grid or flexbox so let's get rid of that h3 and let's just go back to display flex and what i want to get into is some of the alignment properties that are really helpful so the first one we're going to look at is justify content so i'm going to go on the flex and this is something you use on the flex container not the items so let's say justify content and i'm going to say end and we're going to save that so what this does is justify content pertains to the main access and remember if we're working with a flex row horizontal is the main access so what we said is we want to justify the content to the end which is to the right okay if we have start which is it's just going to go back to on the left now we also have values of center so if we wanted to align them all to the center and then we also have space around so if i do space around what it does is it takes that remaining space and it puts it around all the elements including in the beginning here including at the end now we also have space between if i save that it doesn't do it on the beginning and end it just puts them it puts it in between the elements and it doesn't matter how many of these we have you know i could add a bunch more boxes here and it's going to do the same thing all right so i'm just going to get rid of those and then back in our style css i want to show you how we can align vertically which is the cross axis if we're dealing with a row now i want to put a height on this so that i can show you this because if we don't have a height then we can't there's no way to move these or align them so we'll say height 400 on the container and then the property we use to align on the cross access is going to be a line dash items so i can say align items end and you'll see that they'll get put to the bottom i could do start which is where it just was and i can do center as well if i want to center them now let's say i want to align just one of these like maybe i want this box to be down here so we do have a property called align self if you want to align one of these or one or more so in addition to item here let's do item and i want to get the last one so i'm going to do nth of type 3 and of course i could add a special class i could add like item 1 item 2 item 3 and target it that way but i'm just going to use the pseudo selector here nth of type and then let's do a line we want a line self and let's say end for that so now if i save you can see that one is now moved to the end and we might as well select the other two there's going to be some stuff that i want to show you on those so let's do one two all right and we'll even go ahead and change align self here let's say start and two will say center that center if we save that now you can see the first one is start center and on the align self but we're going to get rid of that just wanted to show you how that works so we're going to get rid of that and now i want to show you how we can do this with with a column because when you have a column the main axis is then vertical and the cross axis is horizontal so the way that we create i'm just going to get rid of the height for now the way that we create a column is with flex dash direction so if i say flex direction row is is going to be the default and then we also have row reverse i'll just show you that real quick if i do roll reverse notice that item three is first so it just reverses them so we have that and then let's do uh column so column of course is going to be up and down now this is is what kind of confused me in the beginning because now if i want to align going this way right and remember we're in a column if i want to align going horizontal i would then use align items so if i say start that puts it at the beginning which is a little confusing because when it's a row if you want to align this way it's justify content so you just have to remember that justify content let's actually put a comment here this this always uh is always on the main access okay and then we have a line items which is always on the cross axis okay so when you have a column the main axis is this way right the cross is this way so align items since that's the cross that's going to align it that way all right and then for justify content we could do like start and let's add a height back so we'll say height 500 pixels and save and now you can see it's aligned that way if i change justify content to end it again it's going to align on the main access which when you have a column that's going to be up and down that's going to be vertical all right so i just want to really make sure you guys understand about the the main and the cross axis and how that changes depending on if it's a row or a column so i'm going to go ahead and just get rid of the height and let's get rid of the flex direction so it's a row and then for now i'm just going to comment those out all right now a lot of times you might want to center something so if we want to center the text with that's within the item here or the box we can use flexbox to do that so if we say display flex on this div right here then the text here that's the only flex item so let's go to the item class and say display flex okay and it doesn't matter that that the item is a flex item it can also be a flex container as well which is what we're doing right now and then we could say a line actually let's do justify first so justify content we'll say center so since it's a row by default justify content will be going horizontal which is the main axis if we wanted to center this way as well then we would use a line align dash items and say center for that and that puts it in the middle so there's there's a running joke with css like how to center a div i mean this is this is one of the easier ways to do it now there's a couple things that i want to show you before we get into setting the different widths for the boxes because right now they're just all 100 pixels no matter what but i first want to show you flex wrap so if i were to have just a bunch of boxes here so i'll save that and you can see that now they're all they're all just on the same row but i can add to the flex container here i could add let's go down here say flex wrap and we can set that to wrap and save and now if it can't fit another 100 pixel box onto the page it's going to move it on to the next line alright so if i were to make this smaller you'll see whenever it can't fit the 100 pixel box it's just going to keep it going down all right so that helps with responsiveness but what we're going to show you how to work with media queries and flexbox later on when we get into the layout that we build but we do have flex wrap and i'll just actually i'm going to shut that off for now let's just comment it out but i'll keep it there so the next thing i want to show you is the order so let's go back to having three of these and if you want to change the order which is something that you might do quite a bit it's let's say you have like some text and an image and then in the next row you want to have the image on this side and the text on this side but you don't want to change the html around you still want to have that same order you know text image text image you can do that with the order property so for instance let's go ahead and add here for the first one we'll say order three actually let's let's set that to order two and for the second one we'll say order one and then here let's say order three so now if i save this you can see the order we have item two which is the first one because i set that to order one item one is the second one because i set that to order two item three is the third because i set that to three all right so that is another property that you have that can be very helpful all right so now let's get into the the width of these of these boxes because a lot of times you're going to want them to take up the entire space a lot of times you might have different widths and so on so the first property i want to look at is flex basis so flex basis we set on the item and it's going to be the the width of the box when it starts out okay without adding flex shrink or grow which i'm going to get into in a minute but basically in this case it's going to be the same as width so i'm just going to actually change width to flex basis and if i save you'll see that i have this the same exact thing and of course i could set the flex basis different on other boxes so i could come down here and for the second one we could say flex basis and set that to 200 pixels if i do that then of course the second one is going to be 200 pixels now we have a another property called flex grow which is uh it's a factor of the flex item's main size and it's specified as just a single number so one two three and so on and the default of flex grow is zero so we can think of this as kind of a growth rate so for instance let's get rid of the flex basis so we'll keep it as 100 pixels on all of them and let's say let's say flex dash grow and let's set the first one to one all right and then the second one we'll say flex grow we'll set that to two and for the third one we'll say flex grow let's set that to we'll set that one to one as well and if i save you see that the it's going to take up the entire space so a lot of times this is what you're going to want to do when you have a section or you have a row you're going to want to take the entire space and here we're just saying we want the second one to be larger we want it to grow it starts off at the basis of 100 pixels and then as we extend as we make this grow the boxes grow at different rates the the one and three are at one the second one is at two all right if i want to change that around maybe we could do like let's do three we'll say three one one and then this is even bigger or we could do three one two so now this is the biggest then we have one then we have two if i spread it out but if i go all the way down i can't make the browser any smaller than this but it's going to go to 100 pixels because that's what we set as the flex basis i could change the flex basis on one of these so let's say flex basis set that to 200 pixels and now the first one isn't going to go any smaller than 200 pixels all right because that's that's the start point and then it grows at at the rate of three okay so it's just split up between these these different numbers now a lot of times you just want the same exact width for all of your columns like maybe you have some cards with some text and icons or whatever so in that case you could just you just get rid of all this and you could just set on the item here you could just say flex dash grow and set that to one and that's going to make them all the same no matter what all right so if i stretch it out if i go smaller it's always going to they're always going to be the same size now we also have flex shrink which is the opposite it's going to it's the rate at which they shrink so let's go ahead and get rid of the flex grow so we just have our 100 pixel items and then let's add uh let's actually make this instead of 100 pixels we'll do 300 um so now these are 300 pixels okay and then we can set the shrink rate so let's say flex shrink and we'll set that to one and then let's come down here and for this shrink rate let's do two let's do three all right so we'll save that and you'll see that when i i mean when i'm stretched out like this it's going to be three three hundred or what i see yeah three three hundred pixels but as it shrinks you can see that they shrink at a different rate so see how this one is bigger this is this is three the second one is two and this one is one so they shrink at different rates now this isn't something that you're going to be using very often this flex shrink it just at least for me i haven't used it much in fact you can use a flex property which is what i want to show you now which is a combination of flex basis flex grow and flex shrink so you have three values so what i'm gonna do is get rid of these shrinks and then let's set um let's actually get rid of the flex basis so save and now since i got rid of the width and the flex basis it's just going to take up whatever the amount of the content is right and put them into a row but i'm going to add now onto this a flex property so what this is going to be again is going to be the the flex grow so let's say 1 the flex shrink let's do 0 and then the basis let's say 100 pixels okay so now we just have 3 three same size columns that all grow at the same rate and they start at 100 pixels now if you want to have a basis that's fine but a lot of times we won't have a basis we'll just set that to zero and it's still just going to be you know it's just three even columns now a shorthand to do this is simply saying flex one so if you just want three boxes to take up the entire space i say three but it could it could be anything we could add you know two more in here and we could say item four and five and save and it's just they're just gonna be all even i've just been dealing with three or working with three boxes or three items um so that's this is very useful you know obviously when you have cards or maybe you have an image in text so you just have two flex items and that's really it that's really the the basics and fundamentals of flexbox so what i would like to do now is get into a small project because i know that i've gone over all of flexbox but we're just dealing with little blue boxes which isn't very helpful in the real world so let's go ahead and just clear all this up and let's create a real project with flexbox okay so now that we've gone over just about all the properties that have to do with flexbox we're going to create a project that is similar to what you would create in real life so this isn't the you know the best looking layout or website in the world but it is something that's very common we have a navbar at the top we have a hero section here with some text and then an image and then we have some boxes or some cards here and you can continue on with this if you'd like we're also going to make it responsive so once we hit a certain point you can see that everything is basically stacked so we will be adding some media queries as well so that's what we'll be building so i'm going to jump into my page here vs code i just cleared up everything from both files and i do have this grid svg file that's going to be this main image right here so you can get that from the link in the description i'll probably have it in a code pen but you can just grab the svg or you can use any any image you want all right so let's get started with the html so i'm going to start off with a boilerplate here and let's see for the title let's say flexbox crash course and we're going to add in our style i guess i could have just sorry not style link could have just left this here but it's fine so add that and then let's go into our body here and i'm going to add a navbar so let's say nav use the html5 nav tag i'm going to give it a class of navbar and and i just want to say that the way that i build and style things it's just my preference there's so many different ways to do the same thing so don't think that you have to do everything the way that i'm gonna do it here just use it as an example so in the nav bar and in most of these we're going to want to have some kind of container because you can see how this ends here this ends here if we don't use a container then this is the tech the content is going to go all the way over so i almost always have a container in my in my html so we're going to have a class of container and then in there let's have a div with the class of logo and we can just say flexbox all right and you can kind of you can look at this as an example to kind of see what we're doing here so container we have our logo then let's have a ul i'm going to give it a class of nav and we'll have our list item and inside our list item we'll have a link it's not going to actually go anywhere and we'll say home and then what we can do is grab this list item copy that down a couple times and then we'll do about and then we'll do contact and of course you're welcome to create these pages if you want so if i save that we take a look at what we have let's see there we go so obviously that doesn't look very good but we're just doing the html right now so that's the nav let's go under the nav and let's have a header with a class of header and you can just style it by the tag if you want but you might have a header somewhere else in your site so it's good to have a specific class so here we're also going to have a container because we're going to want to lock it into a certain width and then in here let's have a div with the h1 where we'll just say flexbox crash course and then under the h1 i'm going to have a paragraph with some text that i'm just going to paste in and again you can get this from the link in the description if you want to use this exact text now under the div within the container which ends right here we're going to have an image tag and this is where i'm going to add the grid dot svg okay and of course you could put whatever you want there but i'll save that and that's what it's going to look like then under the header we're going to have the boxes so this this section right here with the boxes so let's go under the header and say section and i'm going to give it a class of boxes and it's important to use these html tags header nav section aside and all those so in here again we're going to have our container to restrict the width and let's do a box here so each one is going to have a class of box we're going to have an h2 and i am going to use font awesome because you can see here i have these little icons which you don't have to have of course but i think it makes it look a little better so i'm going to have an i tag with a class of fas and also a class of f a dash arrows dash alt dash v okay and then next to the i tag we're going to have inside the h2 still we'll have the text i'm going to say alignment and space and then under the h2 i'll have a paragraph still within the box and i'm just going to copy that paragraph and paste it in all right so basically that's our first box and then i'm going to paste in the other two boxes so this div right here with the class of box i'm going to go under it paste in these two boxes which you can grab from my code if you want it's just you know another h2 paragraph and we'll save that now the icons aren't going to show up just yet because we need to bring in font awesome and of course you don't have to have these icons i just figured it'd make it look a little better so i'm going to search for font awesome cdn and click on this link here okay and then we'll just grab the cdn grab this link tag right here copy that and then paste that right above our style sheet save and now we should see those icons all right so now we can jump into the css and i'm i am using the poppins font so i'm going to paste that in again you can use whatever font you want and then let's add a reset here we'll do box sizing border box and we'll do margin zero and padding set that to zero okay and then for the body let's go ahead and add our font family which is going to be poppins and say sans serif okay and then let's set a font size 16 pixels we're going to be doing a lot of styles that aren't that don't have to do with flexbox because obviously there's more to it since we're building an actual layout actual website so let's do line height 1.5 and of course you can change whatever you'd like so color i'm going to set that to 333 and then i'm going to add a background color of kind of a light blue so it's going to be hexadecimal a 1 c 3 3 ff well that's not right that's too many too many characters it's a1c3ff all right so we just have this light blue background and then just some other like image i want to do max with 100 percent i will do it for the h1 and h2 i just want to add a little bit of margin bottom so we'll do margin bottom 15 pixels just some base styles make this a little smaller for now actually we can make this smaller okay and then for the container remember we have a container pretty much in every section the nav bar the the hero or the header and the boxes so for the container i'm going to do a max width and let's do 11 we'll do 1100 pixels okay now we want it to be in the middle obviously so let's do margin and we'll say zero top and bottom auto on the left and right which will put it in the middle so if we stretch this out it should limit it to 1100 pixels and it should be in the middle and then i'll just add a little bit of padding on the left and right so we'll say zero 30 pixels okay now we're going to start on the nav bar so this part right here we can get this a little smaller i think all right so for the nav bar let's say class nav bar and i'm going to set a background on this and that's going to be hexadecimal 3 4 7 and then 4 e6 it's going to be our blue background and let's say color is going to be white height of 60 pixels so let's see we're going to want to let's actually get rid of the bullet points here for any unordered lists so i'm going to say ul let's say list style list style type set that to none get rid of those and now we want to start to work on our actually you know what the logo i want to make that bigger so that has a class of logo and i'm going to set the font size font size on that we'll set that to extra large and um let's also let's make it bold so font weight set that to bold oops all right so i'm going to use flexbox now to have the logo on this side and i want to have the ul on this side if we look at the the html here we have a navbar class now we don't want to make the navbar class the container the flex container because all we have in there is one div right because the flex items are going to be the immediate children to the flex container so we actually want to make this container class we want to make that our flexbox so that the div with the logo and the ul are two flex items so i'm gonna actually i'm gonna prefix this with nav bar for one thing and then let's say dot nav bar and then dot container and then let's say display flex and what that'll do is it you can see it puts them into a row let's make those links white say nav bar a color we want to set that to white just so we can see it and then text text decoration we'll set that to none font size 18 pixels and let's do font dash weight we'll set that to bold okay so we have display flex we have the the logo the div here and the ul are right next to each other because they're in a row but i want the ul way on this side so remember on the main access we want to use justify content and i'm going to use space between because that's where i want to put that remaining space instead of having it on the right of both items we're now putting it between now another thing that i'm going to want to do is align items so if we say align dash items that will make sure that going this way the cross access we want those to be center now the ul doesn't look right because everything is is vertical so we also want to add a flexbox onto this ul so that the list items inside go in a row because we want them to go horizontal so what we'll do is say navbar ul and if we say display flex and save now you can see that these are all you know in a row now you might be saying why are these at the top and not aligned in the middle because we did put on the container here we put a line at item center which is the vertical alignment now the reason for that is because the height of the nav bar is on the navbar however our flexbox is on the container which has no height so what we can do is simply add a height here to take up a hundred percent of the nav bar and if i save that now you can see that everything is placed in the middle okay so let's now work on uh actually for the ul yeah that should be good so let's go to the lis now so we'll do navbar li or ul li and really all i want to do here is add a margin left to add some space here so we'll say margin left 20 pixels just to add a little bit of space and then i just want to have a hover color for the links so let's see we'll just go right here say nav bar actually we have the links up above so let's do it up here say nav bar hover and for that i'm just going to set the color to we'll just do light blue so now if we hover over we should uh why is it oh yeah that would help all right so now the the navbar should be all set so let's work on the header now so i'm gonna come down here and let's say header so for the header i'm gonna add a background let's do background color and we'll set that to a hexadecimal value of 0 a 5 1 cc which is going to be a darker blue and then we're going to set the color of that to white and let's set a minimum we're going to do a minimum height of 400 pixels okay and then i just want to style a couple things within here before we add flex blocks to align the the two items so first of all the h1 let's say header h1 i'm going to set that font size i'm going to make that pretty big we'll do three three ram units and then let's do a font dash weight of bold and then let's do a line height because line height is going to be you'll see if it's smaller since it's so big the line height is pretty you know there's a pretty big space there so let's change the line height on that to 1.2 instead of 1.5 all right and then for the image let's say header image i'm going to just set a max width on that of 400 pixels okay now we can start to align it so remember we have the header and then we have the container inside of it the container has a div with this in it and it has the image so those are our two flex items so let's say display display flex and that will align them side by side now obviously this is too far up we want both of these to be aligned vertically on the cross access so that's where we use align items and we're going to set that to center and now this is a line center going vertically and then as far as the justify content which is the main axis we're going to do space let's do space between all right and i know that this this does look a little weird because of the image but um the image has this space within it so that's why it's not pushed all the way over like if we open up our tools here we can select you can see that this is the image so it is all the way over to the side but the boxes don't go all the way over so you could use a different image or you could edit it or whatever all right so i'm not going to make this responsive just yet you'll see that doesn't look very good we want these stacked but let's finish the the rest of the page we want to do the boxes section now so let's go come down here and let's say dot boxes and then the container inside is where we want to add the flex box so we'll say display flex save and right away you'll see that they line up in a row and it just takes up the the amount of content that's in there all right so if it's if it's all the same amount of content like it's gonna be even anyway even if you don't use flex grow or anything like that um now i'm gonna justify the the content on the main axis we want to use space between okay so we'll save that and then on the box so each box has a class of box i'm going to set flex 1 so they're all going to be even let's set a a background and we'll do 0 0 a 5 1 cc which is the dark blue and let's do a color text color of white and then let's do a border dash radius of let's see what did i do 10 pixels and then we want some space in between so we're going to do a margin let's do 20 pixels top and bottom 10 pixels left and right to kind of space that out and then i'm going to add a box shadow which i'm just going to paste in okay and then let's do some padding so padding we're going to do 15 top and bottom 20 left and right all right so yeah i mean that looks that looks pretty decent fairly common layout these icons are a little too close to the text so we could do box and then i tag and then margin margin right 10 yeah we'll do 10 pixels okay now to make this responsive isn't actually going to be too too bad we actually only have a couple what two two properties to deal with so the menu now the menu if this were a real project i would probably make this like a hamburger menu and incorporate some javascript but that's that's not in you know that has nothing to do with flexbox so i'm not going to deal with the menu what i do want to do is have it so that we have the text and the image under it and then these three boxes i want those to all stack as well so to add a media query we're going to do media and i'm going to set a max width of 768 pixels so meaning anything that's in here is only going to pertain if the screen is under 768 so let's grab the header container and i'm going to actually show you two different ways to do it one one on the header one on the boxes so the first thing we could do is we could change the flex direction to column because right now it's a row which is side by side if i change it to a column then they're on top of each other so that's one way we could do it right and i'm just going to quickly just add padding to the top just to push it down a little bit and then just text align center right now for the boxes let's say boxes and then container now we could do flex direction column on this but what you'll see sometimes is you'll just change the display property from flex to block okay and then it just stacks them so that's another thing you could do all right so it's really up to you and then i just want to text a line oops text a line to the center on those as well all right and then we have a pretty responsive layout so that's going to be it guys i know this was a long one but i wanted to have separate sections where we have the slides then we have the section to go over all the different properties and how alignment works and all that grow shrink and then do an actual project so you can see how it's actually used with a real layout so i hope you enjoyed this uh code's in the description if you like this these videos and you're not subscribed i would appreciate it if you would subscribe and like and comment and all that good stuff so thanks for watching and i'll see you next time

Channel: Traversy Media

Views: 401,011

Keywords: flexbox, flex, css flexbox, css

Id: 3YW65K6LcIA

Length: 46min 53sec (2813 seconds)

Published: Tue Jan 18 2022