How to build a 2-column layout using flexbox | HTML/CSS

Key Takeaways

hey everybody in today's tutorial I'm going to show you how to build a two-column responsive layout using flexbox by the end of this video you'll know how to build the simple responsive layout is to clubs on desktop and as a viewport decreases it stacks to one column for tablet and mobile sound good well let's get into it let's start building this layout in our code editor I'm using this code as my editor and I'm also using an extension called the live SAS extension which you can see on here it's watching my sass file and it's going to compile it into the CSS file in my disco in addition to that it's also running a local server so I can load the actual web page in my browser at local host port 5500 okay so with flexbox you need to have a parent element and you also need to have some child elements in that parent so in excel HTML file let's create a parent element I'm going to use the main tag and I'm also going to add a class of flex - container I'm using some Emmet shortcuts here to make writing the mark-up a little quicker so this will be the parent element in the main tag and in that main tag I'm going to create our child elements so the first one's going to be the main content and I'm going to use the section tag for that and I'll give it a class of main - content and then I'm going to create the sidebar in an aside tag and give it a class of sidebar now you could also use divs for all these if you wanted to but I try to use semantic hTML whenever possible okay now in each of our elements let's also add some text so we can sort of know which is which and it just makes it look more real so in the main content tag I'm going to add an h2 and I'll write some text just saying main content do the same thing down in the sidebar we'll just say sidebar and then I also want to add some filler text so I'm gonna create a paragraph tag in that paragraph tag I'm just going to add some lorem ipsum placeholder text and I'm using the shortcut lorem and let's just say 50 words for that and then we'll do the same thing down in the sidebar Pete oops P then we'll go lorem 50 okay so now we have our two elements here and we have the filler text so now that we have our HTML markup all set let's go into our styles so in our style that a CSS file you can see here that I just have some boilerplate Styles that I always use we have some global styles for the HTML and the body elements and I also have some preset backgrounds using sass variables as well as a little linear gradient just to make the content look kind of nice and if you're curious I do have all this code in a code pen which is linked down in the description below so let's add our flexbox Styles so going down to the bottom of our sass file here first I'm going to create a selector for the parent Flex elements that's the class Flex - container and for now all I want to do is turn on flexbox so I'm just going to write display flex and we will be adding some more properties in a little bit but the cool thing about flex box is that just adding this display flex is going to make the child elements display side by side in the Flex box look looking layout so let's look at our website now so you can see here we have our main Flex container and we have the main content as well as the sidebar and they are side by side let's actually go back and add some background colors to these child elements so I'm gonna use the helper classes that I have in my sass file and I'm gonna make the main content blue and the sidebar green so we'll say that and then go back to our website so now we have the main content and blue sidebar in green and again the only thing that we had added here was display flex on the parent element so if we toggle that off it will revert back to display block and stack the elements 1a1 on top of the other but because we just added display flex by do the browser is going to evenly divide the space between the 2 flex child elements in order to fit them all on one row as much as possible now for our two column layout we do want something a little bit different we want a little more control over the widths of the Flex child elements specifically what I want is I want the sidebar to be 300 pixels wide and then the main content to take up you know the rest of the available space and we can do this by adding some more flexbox tiles to our child elements now going back into our style of a CSS file let's add a selector for main content it also for sidebar now we're going to add some Flex properties to the Flex child elements so to start off we'll say Flex of one and we're going to do that for both the main content and the sidebar now this isn't gonna add that 300 pixel width that I would wanted for the sidebar but for now we just want to kind of explore how the Flex property works so let's go back into our browser now we can see that the layout looks kind of the same as it did before and the reason for this is that if you don't explicitly set a Flex property on the child elements it's just going to default to Flex of one and you know evenly divide the space between the 2 flex children elements in Firefox they have some really awesome tools in their code inspector here so if we select the Flex parent element and then go to the Layout tab here it's going to show us some flexbox related information so first this is telling us a Flex container or the Flex parent is the element having the Flex - container class and it has 2 flex child items the main content and the sidebar element in addition we have this toggle on the right side here now if we turn this on it's kind of thin but it added some lines around the Flex elements so you can kind of see you know where the boundaries are which is can be pretty helpful and if we click on one of these child elements it's click on the main content it kind of tells you some more information about the width of the element and how that was calculated we're gonna get into this a little bit more later but for now it just tells us you know file size is 402 pixels for the main content and about the same for the sidebar this is an awesome tool I use it all the time when I'm building websites and it's one reason why I like using Firefox as my default browser alright let's take a closer look at that flex property so if you click on the main content element in the inspector and then select the rules tab it's going to show you a rule of flex of 1 now the Flex property itself is actually a shorthand property and if you click on this arrow here you can expand it and it tells you that the Flex property is made up of three different properties flex grow flex shrink and flex basis so what do these all mean well the last property flex basis is the default or the initial size of a flex child item so what this means is it's 0% meaning the main content flex item has an initial width of 0% or 0 pixels now that doesn't really make a lot of sense by itself right why would you want to set it with zero but flex basis will work intelligently with the other two properties flex grow and flex shrink in order to calculate the final size of the item itself now flex growth sets what's called the Flex grow factor of the item flux grow can be a number of 0 or greater with a default value of 1 if you set flex 0 to 0 it basically means that the element is not going to be allowed to grow in order to fit the width of the parent container but instead it's going to stay at the width the initial with calculated by flex basis now if you do set flex grow to 1 or greater this is going to allow the element to grow and it also acts as a ratio to divide up the amount of growth between all the child flex items in our case both the main content and side where elements have flex growth set to 1 so since the numbers are the same their ratio of the amount of growth is going to be 1 to 1 so this means that they're each going to grow the same amount in order to fit the parent element and it's why both of these elements are the same width they're both about 512 pixels now if we go back in the Firefox inspector and select the main content element it's going to give us some information in the layout tab so this is the flexbox inspector under the flexibility section it tells us that the item was allowed to grow to fit and then it grew about 472 pixels up from the Flex basis which is your member was set to 0 now one thing to remember in the flexbox inspector is that it doesn't include padding when calculating the final size listed down here I've set a padding of 20 pixels on all sides to both the Flex child elements just so they look a little bit better so this final size and the flex box inspector is 472 and it's gonna be less than the actual size on the website which it says is 512 so it's about a 40 pixel difference so what happens if we decide to change the Flex for a property of the main content element to 2 instead of 1 we can change this right in the browser if we go to the rules tab and we click on the Flex value and change that from 1 to 2 so we can see that the Wits immediately change what's happening here is this has made the Flex grow value of the main content to 2 and it's changing the ratio of the main content a sidebar growth to 2 to 1 instead of 1 to 1 so now because the main content has a flex grow value of 2 and the sidebar still has the Flex grow value of 1 this is going to be different so what happens is the main content element is going to grow twice the amount that the sidebar element is allowed to grow we can see that the main content looks roughly double the width of the sidebar however it's not exact and the sidebar is about 354 pixels the main content is 669 pixels which is not quite double the reason for this is because flexbox will calculate flex growth relative to the default width or flex basis of each item so even though both elements have a flex basis of 0 they're true minimum width is not 0 but it's actually going to be based on the content in them because flexbox is always going to size to fit the content in the Flex item itself in our example the minimum size of the elements both the main content and sidebar elements the minimum side is going to be the width of the longest word in the text because it can't get narrower than what that word is right so if we decide to set both items to flex zero so let's go ahead and do that now main content flex zero see that changed some stuff inside bar flex of zero as well so now both of these items have been compressed to as narrow as possible while still fitting the content in the item itself so for the main content element that longest word that it has to fit to is the word content in the side bar it is the word sidebar alright let's reload the page in order to reset the Styles back to what we had before now let's take a look at the next property Flex shrink so if we go back to the main content and expand the Flex property flex shrink is set to one and that's the same for both main content and the sidebar so the Flex shrink property is similar to Flex grow but instead of allowing the Flex items to grow to fit the parents with Flex shrink allows them to shrink in order to fit the parents width if by default the children would have a width that's greater a total width that's greater than the parents width and we can do this by basically limiting the width of the parent so we're gonna do is in the Flex container we're just gonna set a hard-coded with of 600 pixels okay so now you can see that the child items have now shrunk to fit because they have Flex shrink set to 1 so what we want to do now is we want to basically force these child items to have a total without greater than 600 pixels just to see what that looks like so in the main content we're going to set Flex of 0 so no growing loud 0 no shrinking allowed and set it at 400 pixels so now the main content has grown 400 pixels wide we'll do the same thing for the sidebar so flex 0 0 400 so now you can see they're both 400 pixels wide and if we hover over the parent flex property we can see that it's they are basically overflowing the parent container because the parent is set at 600 pixels and if we look in the Flex box and Specter for the main content element in the layout tab this is the flexbox inspector it tells us that the base size and the final size are both 360 pixels and again this is because if we add the 20 pixels of padding on the left and the right we get to that 400 that we have set as the Flex basis so now let's allow the Flex child items to shrink to fit the parent width of 600 pixels so we'll do this by setting both child Flex items to flex of 0 1 400 pixels oops so if we expand that we can see flex grows at the 0 so they're not going to grow flex shrink is that's a 1 so they'll both be allowed to shrink and then flex spaces is 400 pixels so since both items have the Flex shrink set to the same value 1 that means that they will both shrink by the same amount in order to fit the parent width so now if we go to the flex box inspector it says that the base size from Flex spaces is 360 pixels and again not including padding but now we have some additional information in the flexibility section so it says that the item shrink or decreased by a hundred pixels in order to fit so instead of a 360 pixel width it straight to 260 pixels and yeah you can still see that which ends up being 300 pixels after you add padding on the actual website so it's 300 pixels there and the same thing for this sidebar it's at the 300 pixels now let's play a little more with this and let's see what happens if we give the main content element a flex shrink value of 2 and we'll keep a sidebar at flex shrink of 1 so we'll change this to 2 now it looks like the main content element has shrunk and it's actually narrower than the sidebar element so let's go back into our flexbox inspector for the main content and see what it tells us so in the inspector tells us that the main content element again it has a the Flex basis space size of 360 but it has shrunk 133.33 pixels then if we go to the sidebar it tells us that it has shrunk 66.67% but the main content element has shrunk twice as much as the side where element because 66 times 67 times 2 I mean sixty six point six seven times two is about 133 so the reason for this is because of that flex rink of two on the main content element as opposed to the Flex rink of one on the sidebar element so the shrink ratio from the main khandha sidebar is two to one so it's the main con it's going to shrink double the amount as a sidebar is going to shrink and this is what we can see here in the flex box element and again it is important to remember that the Flex box is going to base both of the grow and the shrink amounts relative to the Flex spaces of each Flex child item setting the main content to have a Flex rank of two doesn't mean that the final width of the main content is supposed to be half that of the sidebar it only shrunk twice as much of the sidebar so in our example we had the Flex basis of 400 pixels for both main content and sidebar but that adds up to 800 pixels which is greater than the 600 pixels of the parent so we had to shrink by 200 pixels to get from 800 to 600 and that 200 pixel amount in that 200 pixel amount of shrinking the main content has to shrink twice as much as the sidebar so that's why the main content shrunk 133.33 pixels whereas a sidebar shrunk half that which is sixty six point six seven pixels okay so now that we've gone through how to control the width of the Flex child elements let's create our two column layout that we originally wanted to so we said earlier that we want the sidebar to be 300 pixels wide on desktop and we want the main content to then take up the rest of the space so let's do that in our Styles so in our code in the sidebar selector we're going to set that Flex property to 0 0 300 pixels and what this means is we are not going allowed to grow we're not going allowed to shrink and we're going to set the default width or the Flex basis to 300 pixels so this ensures that the sidebar is always going to be 300 pixels wide no matter what and for the main content selector we can keep it at a flex one so that it can be allowed to grow to fit if necessary so we've saved that and let's check out our website now in our website we can see that the sidebar is 300 pixels wide yep and the main content is taking up the rest of the space and they're all fitting together on one row since we have flexbox turned on so if we take another look at the flexbox inspector it tells us that the sidebar has both a flex basis and a final size of 260 pixels adding on padding it results in 300 pixels of total width on the website and if we go to the main content element in the inspector it tells us that in the flexibility section it was set to grow and it grew 684 pixels in order to fit the rest of the parent content so if we change the viewport width keep an eye on this final size down here and it should change based on what the viewport width is because the main content width is going to change in order to fit the full width of that parent element so this two column layout is what we want on desktop but how do we make it stack for mobile and tablet well one way that we can do this is to only turn on flexbox for desktop widths so what this involves is going to our code and what we're going to do is we're going to use this display flex rule when a certain viewport width is reached so when a viewport width is let's say nine hundred pix is reached then we'll turn on flexbox but up till that point is not going to be display flex so to do that we can add a media query so at media and then the criteria is going to be min width of 900 pixels but we want to use EMS instead of pixels for better accessibility so to get from pixels to EMS you take the pixel width 900 and you divide it by 16 this is because 16 pixels is your default browser width so 900 pixels will convert 256 point two five EMS so that's just something I try to do to keep the website more accessible and allow users to adjust the size of the text by adjusting the zoom in their browser so using EMS if I can add that unit on is what's gonna allow it to happen so now what we have going on here is in the Flex container by default it's going to not be Flex box so it's gonna just be display block because that's the default and then once we hit that 900 pixel I'll set a little comment here also get 900 pixels V port with or 56.2 5 EMS then it's going to turn on flex box so let's go back into our browser and see how that looks it looks the same right and that's because we are greater than 900 pixels in our browser window so if we decrease then we can see that at this point here at our breakpoint this is when it converts back to display block on the page on the parent if you look down in the rules tab as I keep increasing the viewport you can see the point where it becomes the two column layout the Flex container then has the display Flex property I hope this tutorial has helped you understand how to build a two-column responsive layout using flexbox my next video is gonna be about how to build a sleigh out using CSS grid so stay tuned if you're not following me yet don't forget to subscribe if you like this video give it a thumbs up if you have any questions or feedback leave a comment down below and as always thanks for watching and keep on coding