**Modern Layouts with Flexbox**

Let's create three header layouts and explore how to use flexbox to achieve them.

First, we'll create three header sections using flexbox. We'll start by selecting the nav element and setting its display property to "flex" of one and then "row". This will make the logo appear on the right side of the navigation bar. However, if we just say "row", the logo would be on the left side.

We want a little bit of space between the nav bar and the articles that follow it. To achieve this, we'll add a margin to the right side of the nav bar using percentages. This will keep everything within the same percentage convention.

Now, let's create three article sections with the "layout-three" class. We'll select each individual article element and set its flex property to one. However, we want some space between these articles. To achieve this, we'll add a margin of zero 2% on both sides of each article.

Unfortunately, this adds an unnecessary 4% margin to each article, as the margins are added twice (once to the left and once to the right). To fix this, we can use CSS3 trickery by adding a "margin-zero" class only to the first child element and the last child element using the ":first-child" and ":last-child" pseudo-classes.

By doing so, we'll remove the 2% margin from these specific elements, resulting in an equal distribution of space between the articles. This is a simple yet effective way to maintain the desired layout while also avoiding unnecessary styling.

**Responsive Design**

To make our layout responsive, we can add a media query that targets screens with a maximum width of 768 pixels. This will ensure that our layout adapts to smaller screen sizes.

We'll select all the main elements (aside, header, and articles) and set their display property to "block", which will prevent them from flexing. We'll also set the width to 100% and add a margin of zero 0.2% on the bottom. This will ensure that our layout stacks evenly and has some space between the elements.

However, this media query is not specific enough, as it targets all elements without distinguishing between different elements. To fix this, we'll need to write more specific styles within the media query using the ":first-child", ":last-child", ":nth-child" pseudo-classes, or other selectors that target the desired elements.

By doing so, we can ensure that our layout adapts correctly to smaller screen sizes without affecting the overall design. This is a crucial aspect of responsive web design, as it allows us to create layouts that work seamlessly across different devices and screen sizes.

**Conclusion**

Flexbox is a powerful CSS property that offers many benefits in terms of layout and styling. By understanding how to use flexbox, we can create complex layouts with ease and achieve the desired results. However, it's essential to remember that flexbox requires specific selectors and styling to work correctly.

In this article, we've explored three different header layouts using flexbox and learned how to add space between elements while maintaining an equal distribution of width. We've also discussed responsive design and how to adapt our layout to smaller screen sizes using media queries. By following these tips and techniques, you can master flexbox and create stunning modern layouts that work seamlessly across different devices and screen sizes.

**Additional Resources**

For a more in-depth guide on flexbox, I recommend checking out Chris Coyier's comprehensive article on the subject. [link to article]

"WEBVTTKind: captionsLanguage: enhello everybody welcome back to css3 in 30 days today is day number 22 we're gonna be playing around with some flexbox now back in day 9 we used CSS to create some modern layouts essentially what we're gonna do today is create those exact same modern layouts but instead of using floats and clears and margins and math we're going to be using flexbox and I'm going to show you how incredibly easy it is to create layouts with flexbox now bear in mind flexbox is a relatively new technology and not fully supported totally across the board but it's pretty darn good and you can use your discretion on where you want to use it of course can I use com is a great website to see which properties and values those combinations which of those are more widely supported so you can use your own discretion and you can always use fallbacks as well other thing I want to let you know is flexbox is a large area of study it's not just a quick little property or a quick little style there's actually a lot to it and I don't want to cover the massive amount of Theory involved in flexbox I'm gonna give you a really great resource in fact it's actually my favorite coding blog is CSS - tricks by Chris Koya and he has got the complete guide to flexbox and i've referred to this on numerous occasions when making my own flexbox layouts and websites so and as you could see it's last updated on November 12th which at the time of this recording was only about 15 days ago so he's always updating this and I love love this article that he's put to put together this guide it gives you the background on flexbox and the basics and terminology and all the properties and everything that you would ever need to know about flexbox it's really great and a great practice so part of my homework for this lesson would be - whether you want to do it before or after we make some layouts is head over to CSS - tricks comm slash snippets slash you know what I'm just going to put the link up on the screen here and you know just Google CSS tricks a flexbox as well that will get you there I'll put it up on the screen whatever you need to do to get there so check that out credit to Chris coiour for that so let's get back to it what is flex box flex box is essentially relatively new technology since 2009 and onward there's been multiple iterations of flex box but basically it's an easy way to create layouts so that you don't have to use floats and clears and and all that sort of stuff it makes creating layouts and sidebars and organization of content incredibly easy incredibly streamlined naturally responsive of course you can modify it and customize it in whatever way you wish and when you see how easy it is to create some simple and modern layouts you're gonna wonder why you didn't use flexbox before now before you just jump on the flex box training remember you need to do your homework and your due diligence to make sure you're not creating a production-ready client site that's only based on certain flex box properties that may not be cross browser compatible so do your homework let's jump in and show you what we got so day number 22 flex box layouts the same layout organization as the day number nine for modern layouts and down in the final result you can see the layout so we got header article a side footer basic layout content and sidebar number two got the logo and the cut in the navigation and a header with two sidebars an article in the middle flexbox layout number three essentially the same header here but the logos on the right we got three equally sized articles in a three column grid and within a main content and then a footer so that's really it and let's jump in to our code editor see what we got day number twenty two flex box layouts go ahead and download that come back to this and let's get started in here we got some basic markup we've got the sandbox is what we're gonna be playing around with and each layout is within a section tag with the class of layout one two and three respectively we have headers a main content with articles and asides footers it's very semantic straightforward simple html5 and of course final about CSS is there for your reference to help you out if you have any issues of course keep in mind that every class for the final result is prepended with fine underscore whereas we're just going to be using the classes called layout one two and three and the reason why I do that is so that those styles don't conflict so that the final homework the final result doesn't conflict with the sandbox so let's jump in now keep in mind this isn't gonna be a theory lesson so if you've never heard of fly flexbox before certain piece of parts of this might be a little over your head so giving you a fair warning right now I'll do my best to explain certain things but I do recommend you read that Chris coiour guide on flexbox should take you about 15 20 minutes or so just so you can understand what's going on when we start playing around some properties you've maybe never heard of before layout one main we're selecting the main tag within layout one we're gonna tell it display flex so instead of like inline or block we're gonna say flex and that's gonna tell everything within the main content in that main tag - to be aware that this is a flex item this flex container and the Flex Direction is going to allow us to tell tell the browser how to display the the direction of the content so in bootstrap we'll use things like div with the class of row well in Flex box we just simply use flex direction and we can say row so we don't actually have to like create another tag in HTML to do essentially just this so we're gonna tell it that the main content container is actually gonna be a row it's going to contain a row and you can also do things like row reverse to reverse the the order of the elements so if you have one two three you can actually save over verse and it will actually go three two one so I might show you an example that after so that's it we have to do for that nothing's going to happen yet so we're gonna say layout 1 and then article so in this element we have an article and an aside now to make that article fit a certain amount 3/4 ish of the width and the sidebar be on the side with a smaller amount of width all we're gonna do is say flex and this is a shorthand property I believe it's flex grow shrink and basis kind of like when you write border and it has you know solid one pixel read as a shorthand for three different properties so I'm just gonna say flex one now what this says is any articles within the layout element the layout class have them all take up the exact same amount of space so you that's gonna make a lot of sense when we get to the layout number three when we've got three identically sized articles if I were to say flex one or say flex two the article will try to take up twice as much space as the other elements within the Flex container so but this one is just going to take up the same amount of space as every other article or element that is within that content so let me just show you if I just say flex one let's see what happens so you can see that it just automatically created to 50% width elements not because I said 50% but because I said flex one the article will take article will take up the same amount of space as the other elements within that container now if I say flex two it's not going to do anything because because the other element the aside doesn't actually have a flex property styled on top of it so if we just went down here and said layout one aside and then said flex one and then save that you can see now that the article is twice the size as these side now you might be wondering okay but those are really fixed sizes what if I don't want to just always be with two times the width or three times the width or what if I want to fine-tune that well you actually can do that quite easily so I'm going to remove a side here and just style the article I'm gonna say flex one as a basis and I'm gonna say 58 percent now this is essentially this value is going to tell it the width the maximum width and that's not technically maximum width but it's the space that you want it to take up so you can kind of override that one-to-one ratio and then refresh now it's taking 58% of the width of that container now what I find interesting is if I were to change this to 50% it's going to go to its regular 50% but if I were to go to 100% it's not going to actually fill it out 100% because flexbox knows that there's still a container there so it's not gonna push it down it still needs to fit within there so it's this is roughly I don't really know it looks like it's around 75% so I'm not really entirely sure of the reason why it does that but it's kind of smart so I'm gonna go back to my 58% with space there and now the problem is these are jammed up against one another so I want a little bit of space so all I'm gonna say here is just a margin right 2% and that will give it some space and it doesn't make the aside tag fall down or anything like that it just automatically distributes the width so that both of these elements can live happily ever after within its flex parent now if I were to say flex Direction row reverse it's going to reverse these as you can see now the aside is on the left and the articles on the right despite the way I've coded the markup which is really neat this would take a lot more to style in CSS and would be a there's a little bit of hackery going on there if if I was trying to do that and just floats and clears and so on and so forth so rower verse is a nice value for flex direction but I'm gonna put it back to here and that's it for the first layout that's all we had to do now if I had to do this in just floats and clears I'm hard to do math and I would have had things collapsing and it would have been a little bit stressful and confusing now that's not to diminish how much was going on here there's a lot going on with the shorthand property I encourage you to read about it and test it and play around with it but you could see how exciting this is when creating layouts so let's jump into layout number two and we're gonna say layout two header we're gonna say display Flex of course flex direction this is something that you're gonna often be writing these two things row and then within there we're gonna say layout - header and then nav so we're selecting something more specific we're gonna say flex one save that and let's see what happens so far so you can see now that they're both jammed up kind of it's what's happening is that flex box is only taking the calculating the Wits bathe based on the content within the container itself for the most part it's kind of like an inline block so to speak that's why we have to use additional properties to space them out and tell flexbox how much space we want distributed between the elements so I'm gonna go down here and say layout - header nav and I'm gonna say flex one oops flex and then one and so that changes it to take up the entire amount of its its space that's available for it as you can see it just did it filled out almost like 100% of its available space and I'm gonna say margin left to give it some space I'm gonna do 2% again and that'll give it space so just like that I've created that simple layout like that now I want to move down to the main element so layout to main so I'm selecting that main tag and I'm gonna say display flex flex direction of course and you guessed it row and now I'm gonna say layout to article so now I'm selecting the article within there now keep in mind there are also two asides on either side of the element I'm gonna say flex and one now if I just did that let's see what happens now everything here very interesting what's going on here let me just take the Flex one out of there and let's see what happens now that I told it to be a flex element the main container here the side on the left is this size the article on the middle is this size so a bit bigger quite a bit bigger and then the article on the right side the aside on the right side is quite a bit smaller because there's less content so all this is being intelligently calculated as best as it possibly can by flexbox to try and automatically size the elements based on it just being a flex element but I want to override that and tell it to be specific so I'm gonna say flex for the article I'm gonna say one I'll see what that does nothing good because based on the other two flex it starts making things wonky which is why we want to start adding some percentages here so I'm gonna say 56% and that's going to give it 56% of its available of the available space for it now the problem here is these asides are throwing off this element here I don't want it to be like this so let me just first give it some margin so I'm gonna say margin let's go zero and 2% on the left and right okay so the space on the bottom here I don't really want that so I'm not gonna write a shorthand I'm gonna say margin left 2% margin right 2% that should keep it there we go the other nice thing about flexbox is do you notice how these elements are maintaining the same height as the article how the aside despite this only having this much content is still this long which is as long as the article which is as long as the other aside and that's the other cool thing so if you wanted a background like on these elements that to maintain the same height as the the growing content it's very easily and automatically done without you having to do anything in flexbox so that's cool so let's move on down to fix those asides because I don't like how they look layout to a side side nav and the sidebar now if I just say flex one so they fit their available space let's see what that does so now things are looking weird because now I have these looking way too small but I can override that and say 20 percent so each of those are going to fit about the 20% of its available content just like that now they are identical widths with space in between the article and just like that I've coated up this beautiful three column multi width layout just using a couple a couple of selectors here so that's really cool now let's move down to layout number three now we're gonna say is we're gonna say layout three header that's gonna be display flex again of course and then flex direction rrrow reverse is what we're gonna do play around with it a little bit now let's say lay out three header and we're going to select that nav we're gonna tell it to be flex of one and let's see what that does and you can see that the logo is on the right because we said row reverse if I just said row that logos on the on the left side but I want on the right I don't change the mark up at all the order of the mark up I'm just using flexbox to tell it where to go I want a little bit of space however let's say margin right from that nav to percents keep everything within the same percentage convention okay and now let's play with those articles are going to say layout three and the class of articles which is the wrapper around the three articles there's a div with the class of articles and I'm gonna say display flex and then flex direction row then we're going to say layout three article we're selecting each individual article like this flex one save that and now each of these three articles have the exact same they take the exact same amount of space because they are the same element and they have a flex of one but I want some space between them so I'm going to say margin zero and two percent on the left and right now they all have margin zero two percent on the left and right problem is I don't want that on the first element on the left side and I don't want it on the last element on the right side it's a little bit of simple CSS trickery here css3 trickery rather layout 3 article first child and article last child simply gonna say margin zero I want no margin on those specific styles elements and there it is right there now it's equally distributed with some 2% margin in between I love it okay so now let's just do some simple responsive like a simple responsive fallback because right now everything's just going flex hence flexbox and will always retain that layout problem with that is that doesn't look good so all we're gonna do here is have some simple fall backs here let's say responsive fall back and we're gonna say media screen and max width 768 pixels pretty standard width for while phones are getting so large now that that's probably the tiniest iPhones portrait but really that is the landscape of iPhones and similar sized devices it's not based on the physical size of the device it's based on the the pixel size and the pixel ratio within that because we have Retina screens and everything and gets confusing when responsive media queries first came out and screens were very simple this it was quite easy but responsive media queries have started to get a little bit more complicated with the rise of high resolution screens anyway I digress let's make these things vertically stack when you get to 768 max width so we're simply just going to select all of the main the article let's put this all in one line article aside header and we also have logo we have side nav I'm just taking all the styles all the elements that we styled and sidebar and we also have articles woops that is all of the elements that we've used those are all the elements we've used and we're going to say display:block so no longer flex float:none width 100% margin zero zero two percent on the bottom so everything stacks and has some space that's it so let's see what happens when we go down to 768 or less no dice and the reason why is because these are not specific enough selectors so each of these need to have I could just say important important important but that's lazy I'm gonna have to write more specific styles within here so bear with me I'm gonna write a layout one two and three styles for every single one of these elements so I'm gonna fast forward this but you will do the same alright there it is Leia one main article side to header blah blah blah blah blah every selector that we did I'm just Rhys electing them there because I'm just gonna make them all do the same thing refresh now if I go to resize this to 768 or less BAM they all vertically stack just like that nice and simple fallback solution and that my friends is it for today's little sample of modern layouts with flexbox I hope you enjoyed it I was excited to share this one with you and as for that article make sure you check out Chris coiours complete guide to flexbox gonna put that link up here on the screen and go ahead and read through that play around with it right here within your sandbox and see what you can understand about flex bucks it's really amazing don't be afraid if you feel like it's new and and you don't really know if you can if you can learn anything new or if it's complicated trust me spend some time you'll figure it out and it will be worth it see you tomorrow and day number 23 bye nowhello everybody welcome back to css3 in 30 days today is day number 22 we're gonna be playing around with some flexbox now back in day 9 we used CSS to create some modern layouts essentially what we're gonna do today is create those exact same modern layouts but instead of using floats and clears and margins and math we're going to be using flexbox and I'm going to show you how incredibly easy it is to create layouts with flexbox now bear in mind flexbox is a relatively new technology and not fully supported totally across the board but it's pretty darn good and you can use your discretion on where you want to use it of course can I use com is a great website to see which properties and values those combinations which of those are more widely supported so you can use your own discretion and you can always use fallbacks as well other thing I want to let you know is flexbox is a large area of study it's not just a quick little property or a quick little style there's actually a lot to it and I don't want to cover the massive amount of Theory involved in flexbox I'm gonna give you a really great resource in fact it's actually my favorite coding blog is CSS - tricks by Chris Koya and he has got the complete guide to flexbox and i've referred to this on numerous occasions when making my own flexbox layouts and websites so and as you could see it's last updated on November 12th which at the time of this recording was only about 15 days ago so he's always updating this and I love love this article that he's put to put together this guide it gives you the background on flexbox and the basics and terminology and all the properties and everything that you would ever need to know about flexbox it's really great and a great practice so part of my homework for this lesson would be - whether you want to do it before or after we make some layouts is head over to CSS - tricks comm slash snippets slash you know what I'm just going to put the link up on the screen here and you know just Google CSS tricks a flexbox as well that will get you there I'll put it up on the screen whatever you need to do to get there so check that out credit to Chris coiour for that so let's get back to it what is flex box flex box is essentially relatively new technology since 2009 and onward there's been multiple iterations of flex box but basically it's an easy way to create layouts so that you don't have to use floats and clears and and all that sort of stuff it makes creating layouts and sidebars and organization of content incredibly easy incredibly streamlined naturally responsive of course you can modify it and customize it in whatever way you wish and when you see how easy it is to create some simple and modern layouts you're gonna wonder why you didn't use flexbox before now before you just jump on the flex box training remember you need to do your homework and your due diligence to make sure you're not creating a production-ready client site that's only based on certain flex box properties that may not be cross browser compatible so do your homework let's jump in and show you what we got so day number 22 flex box layouts the same layout organization as the day number nine for modern layouts and down in the final result you can see the layout so we got header article a side footer basic layout content and sidebar number two got the logo and the cut in the navigation and a header with two sidebars an article in the middle flexbox layout number three essentially the same header here but the logos on the right we got three equally sized articles in a three column grid and within a main content and then a footer so that's really it and let's jump in to our code editor see what we got day number twenty two flex box layouts go ahead and download that come back to this and let's get started in here we got some basic markup we've got the sandbox is what we're gonna be playing around with and each layout is within a section tag with the class of layout one two and three respectively we have headers a main content with articles and asides footers it's very semantic straightforward simple html5 and of course final about CSS is there for your reference to help you out if you have any issues of course keep in mind that every class for the final result is prepended with fine underscore whereas we're just going to be using the classes called layout one two and three and the reason why I do that is so that those styles don't conflict so that the final homework the final result doesn't conflict with the sandbox so let's jump in now keep in mind this isn't gonna be a theory lesson so if you've never heard of fly flexbox before certain piece of parts of this might be a little over your head so giving you a fair warning right now I'll do my best to explain certain things but I do recommend you read that Chris coiour guide on flexbox should take you about 15 20 minutes or so just so you can understand what's going on when we start playing around some properties you've maybe never heard of before layout one main we're selecting the main tag within layout one we're gonna tell it display flex so instead of like inline or block we're gonna say flex and that's gonna tell everything within the main content in that main tag - to be aware that this is a flex item this flex container and the Flex Direction is going to allow us to tell tell the browser how to display the the direction of the content so in bootstrap we'll use things like div with the class of row well in Flex box we just simply use flex direction and we can say row so we don't actually have to like create another tag in HTML to do essentially just this so we're gonna tell it that the main content container is actually gonna be a row it's going to contain a row and you can also do things like row reverse to reverse the the order of the elements so if you have one two three you can actually save over verse and it will actually go three two one so I might show you an example that after so that's it we have to do for that nothing's going to happen yet so we're gonna say layout 1 and then article so in this element we have an article and an aside now to make that article fit a certain amount 3/4 ish of the width and the sidebar be on the side with a smaller amount of width all we're gonna do is say flex and this is a shorthand property I believe it's flex grow shrink and basis kind of like when you write border and it has you know solid one pixel read as a shorthand for three different properties so I'm just gonna say flex one now what this says is any articles within the layout element the layout class have them all take up the exact same amount of space so you that's gonna make a lot of sense when we get to the layout number three when we've got three identically sized articles if I were to say flex one or say flex two the article will try to take up twice as much space as the other elements within the Flex container so but this one is just going to take up the same amount of space as every other article or element that is within that content so let me just show you if I just say flex one let's see what happens so you can see that it just automatically created to 50% width elements not because I said 50% but because I said flex one the article will take article will take up the same amount of space as the other elements within that container now if I say flex two it's not going to do anything because because the other element the aside doesn't actually have a flex property styled on top of it so if we just went down here and said layout one aside and then said flex one and then save that you can see now that the article is twice the size as these side now you might be wondering okay but those are really fixed sizes what if I don't want to just always be with two times the width or three times the width or what if I want to fine-tune that well you actually can do that quite easily so I'm going to remove a side here and just style the article I'm gonna say flex one as a basis and I'm gonna say 58 percent now this is essentially this value is going to tell it the width the maximum width and that's not technically maximum width but it's the space that you want it to take up so you can kind of override that one-to-one ratio and then refresh now it's taking 58% of the width of that container now what I find interesting is if I were to change this to 50% it's going to go to its regular 50% but if I were to go to 100% it's not going to actually fill it out 100% because flexbox knows that there's still a container there so it's not gonna push it down it still needs to fit within there so it's this is roughly I don't really know it looks like it's around 75% so I'm not really entirely sure of the reason why it does that but it's kind of smart so I'm gonna go back to my 58% with space there and now the problem is these are jammed up against one another so I want a little bit of space so all I'm gonna say here is just a margin right 2% and that will give it some space and it doesn't make the aside tag fall down or anything like that it just automatically distributes the width so that both of these elements can live happily ever after within its flex parent now if I were to say flex Direction row reverse it's going to reverse these as you can see now the aside is on the left and the articles on the right despite the way I've coded the markup which is really neat this would take a lot more to style in CSS and would be a there's a little bit of hackery going on there if if I was trying to do that and just floats and clears and so on and so forth so rower verse is a nice value for flex direction but I'm gonna put it back to here and that's it for the first layout that's all we had to do now if I had to do this in just floats and clears I'm hard to do math and I would have had things collapsing and it would have been a little bit stressful and confusing now that's not to diminish how much was going on here there's a lot going on with the shorthand property I encourage you to read about it and test it and play around with it but you could see how exciting this is when creating layouts so let's jump into layout number two and we're gonna say layout two header we're gonna say display Flex of course flex direction this is something that you're gonna often be writing these two things row and then within there we're gonna say layout - header and then nav so we're selecting something more specific we're gonna say flex one save that and let's see what happens so far so you can see now that they're both jammed up kind of it's what's happening is that flex box is only taking the calculating the Wits bathe based on the content within the container itself for the most part it's kind of like an inline block so to speak that's why we have to use additional properties to space them out and tell flexbox how much space we want distributed between the elements so I'm gonna go down here and say layout - header nav and I'm gonna say flex one oops flex and then one and so that changes it to take up the entire amount of its its space that's available for it as you can see it just did it filled out almost like 100% of its available space and I'm gonna say margin left to give it some space I'm gonna do 2% again and that'll give it space so just like that I've created that simple layout like that now I want to move down to the main element so layout to main so I'm selecting that main tag and I'm gonna say display flex flex direction of course and you guessed it row and now I'm gonna say layout to article so now I'm selecting the article within there now keep in mind there are also two asides on either side of the element I'm gonna say flex and one now if I just did that let's see what happens now everything here very interesting what's going on here let me just take the Flex one out of there and let's see what happens now that I told it to be a flex element the main container here the side on the left is this size the article on the middle is this size so a bit bigger quite a bit bigger and then the article on the right side the aside on the right side is quite a bit smaller because there's less content so all this is being intelligently calculated as best as it possibly can by flexbox to try and automatically size the elements based on it just being a flex element but I want to override that and tell it to be specific so I'm gonna say flex for the article I'm gonna say one I'll see what that does nothing good because based on the other two flex it starts making things wonky which is why we want to start adding some percentages here so I'm gonna say 56% and that's going to give it 56% of its available of the available space for it now the problem here is these asides are throwing off this element here I don't want it to be like this so let me just first give it some margin so I'm gonna say margin let's go zero and 2% on the left and right okay so the space on the bottom here I don't really want that so I'm not gonna write a shorthand I'm gonna say margin left 2% margin right 2% that should keep it there we go the other nice thing about flexbox is do you notice how these elements are maintaining the same height as the article how the aside despite this only having this much content is still this long which is as long as the article which is as long as the other aside and that's the other cool thing so if you wanted a background like on these elements that to maintain the same height as the the growing content it's very easily and automatically done without you having to do anything in flexbox so that's cool so let's move on down to fix those asides because I don't like how they look layout to a side side nav and the sidebar now if I just say flex one so they fit their available space let's see what that does so now things are looking weird because now I have these looking way too small but I can override that and say 20 percent so each of those are going to fit about the 20% of its available content just like that now they are identical widths with space in between the article and just like that I've coated up this beautiful three column multi width layout just using a couple a couple of selectors here so that's really cool now let's move down to layout number three now we're gonna say is we're gonna say layout three header that's gonna be display flex again of course and then flex direction rrrow reverse is what we're gonna do play around with it a little bit now let's say lay out three header and we're going to select that nav we're gonna tell it to be flex of one and let's see what that does and you can see that the logo is on the right because we said row reverse if I just said row that logos on the on the left side but I want on the right I don't change the mark up at all the order of the mark up I'm just using flexbox to tell it where to go I want a little bit of space however let's say margin right from that nav to percents keep everything within the same percentage convention okay and now let's play with those articles are going to say layout three and the class of articles which is the wrapper around the three articles there's a div with the class of articles and I'm gonna say display flex and then flex direction row then we're going to say layout three article we're selecting each individual article like this flex one save that and now each of these three articles have the exact same they take the exact same amount of space because they are the same element and they have a flex of one but I want some space between them so I'm going to say margin zero and two percent on the left and right now they all have margin zero two percent on the left and right problem is I don't want that on the first element on the left side and I don't want it on the last element on the right side it's a little bit of simple CSS trickery here css3 trickery rather layout 3 article first child and article last child simply gonna say margin zero I want no margin on those specific styles elements and there it is right there now it's equally distributed with some 2% margin in between I love it okay so now let's just do some simple responsive like a simple responsive fallback because right now everything's just going flex hence flexbox and will always retain that layout problem with that is that doesn't look good so all we're gonna do here is have some simple fall backs here let's say responsive fall back and we're gonna say media screen and max width 768 pixels pretty standard width for while phones are getting so large now that that's probably the tiniest iPhones portrait but really that is the landscape of iPhones and similar sized devices it's not based on the physical size of the device it's based on the the pixel size and the pixel ratio within that because we have Retina screens and everything and gets confusing when responsive media queries first came out and screens were very simple this it was quite easy but responsive media queries have started to get a little bit more complicated with the rise of high resolution screens anyway I digress let's make these things vertically stack when you get to 768 max width so we're simply just going to select all of the main the article let's put this all in one line article aside header and we also have logo we have side nav I'm just taking all the styles all the elements that we styled and sidebar and we also have articles woops that is all of the elements that we've used those are all the elements we've used and we're going to say display:block so no longer flex float:none width 100% margin zero zero two percent on the bottom so everything stacks and has some space that's it so let's see what happens when we go down to 768 or less no dice and the reason why is because these are not specific enough selectors so each of these need to have I could just say important important important but that's lazy I'm gonna have to write more specific styles within here so bear with me I'm gonna write a layout one two and three styles for every single one of these elements so I'm gonna fast forward this but you will do the same alright there it is Leia one main article side to header blah blah blah blah blah every selector that we did I'm just Rhys electing them there because I'm just gonna make them all do the same thing refresh now if I go to resize this to 768 or less BAM they all vertically stack just like that nice and simple fallback solution and that my friends is it for today's little sample of modern layouts with flexbox I hope you enjoyed it I was excited to share this one with you and as for that article make sure you check out Chris coiours complete guide to flexbox gonna put that link up here on the screen and go ahead and read through that play around with it right here within your sandbox and see what you can understand about flex bucks it's really amazing don't be afraid if you feel like it's new and and you don't really know if you can if you can learn anything new or if it's complicated trust me spend some time you'll figure it out and it will be worth it see you tomorrow and day number 23 bye now\n"