Flexbox Tutorial (CSS): Real Layout Examples

hey kitty learn some CSS how rude hello everyone in this video we are going to learn what flexbox is which problems flexbox solves and most importantly we are going to work through five or six real-world examples of how to actually use flexbox let's begin with the simplest possible example so here we see a form with two rows or two fields and let's imagine that we want to adjust things so that the actual input elements aren't so narrow let's imagine we want the input elements to use all of the available remaining horizontal space so to achieve that your first instinct might be to use CSS and assign a width value to the input elements but that is an exercise in futility there isn't a width value in the entire universe that will do the trick here because the label for each row is a different width right so because the name label is narrower than the favorite color label that means that the input field for the first row would need to be a bit wider than this input in order to fill out the remaining space in a row so we're in a bit of a pickle but this is where flexbox can save the day because with flexbox we don't need to assign width values to anything so let's take a look at the HTML that makes up this form here it is so each row is wrapped in a container div that has a class of form row and then within each container div we see a label and an input pair now if we want to begin using flexbox our first step is to adjust the CSS of our container elements so in this case the divs with a class of form row so over in my CSS file here is a rule that's targeting those container divs currently I'm just giving this class a bit of padding but if we want to use flexbox we just tell the container to be display flex now with this line in place it opens the door to new ways of sizing the children elements that live within this container so if we want the input element to flex or grow and fill up the available remaining space in a row we can simply say flex one now I will explain how this syntax works and what it actually means in just a moment but for now if we save this and refresh we see that that did the trick all right now in order to better understand this syntax that we used here we are actually going to jump in to a new example all right so it just added this new section to the page it's just a few headlines paragraphs and dibs so this is the first div this is the second div and this is the third div so this is what I'm starting out with but in another tab let me show you the finished product that we are going to transform this into so it's a three column layout right we have our main column we have sidebar 1 and sidebar 2 and we are going to use flexbox to achieve this layout let me jump back to our work in progress tab and let's begin by taking a look at the HTML that creates this section so it has an overall container or wrapper div that has a class of column layout and then nested within that div we see a div for main column and div for sidebar one and a div for sidebar two now if we want to use flexbox the first step is to target the container or parent element with our CSS in this case that's the overall div that has a class of column layout so I'm going to jump over to my CSS and here is a rule that's targeting that column layout class so let's just begin by telling it to be display flex and without even writing any other code just with this line in place on the container element that will make our three divs sit side by side.now currently our main column is a bit wider than each of the sidebars and in case you're wondering why the web browser did that by default it's simply because the main column has more content or more text in it it has more content so the browser gives it more space to breathe but just for a quick exercise let's imagine that we want our three divs or three columns to all be perfectly equal in width right so let's imagine we want three equal width columns so to make that happen in our CSS here are the rules for the main column and the sidebars so all we would do if we want them to all be equal width we could just say flex one and then I'm just going to copy and paste this into these two rules and if I save we see that the three columns are now perfectly equal in width so this can give us a bit of insight into what this flex one really means we can think of this one value as our baseline right so if we want an element to be the same size as its siblings we say Flex one all right now let's give ourselves another example task to understand this syntax even better so let's imagine that we want our main column to be twice as wide as either of the sidebars so in our CSS we would tell the main column instead of having a flex of one we would say flex two so if I save that the main column is now twice as wide as the sidebar and what if we wanted our main column instead to be three times as wide as the sidebars obviously instead of flex two we would say flex three because three is three times larger than one so one is always our baseline it's the default value if we want space to be divided up evenly amongst the children elements and then we can use larger or smaller numbers in relation to one so if we say three here and refresh the main column is now exactly three times wider than either of the sidebars now some of you might be yelling at the screen right now and wondering why in the first example with our form fields why did a value of flex one make the input elements use all of the space right so you might be thinking if a value of 1 is the baseline it makes space evenly distributed and if there are two elements in each row here why didn't flex 1 make the input only take up half of the available width well the key to the first example is that we didn't tell the label elements to flex at all right we didn't give these elements a flex value now if we did give the label elements of flex value so if I go into my CSS scroll back up here's the rule it targets the label elements if we did give that a value of flex 1 and I save then yes the space is evenly distributed and we see half and half but the beauty of flexbox is that we don't have to tell all children elements to flex and by not giving the label element a flex value it can just remain its natural auto size in the input we'll say it looks like I'm the only child element playing the Flex game so I'll go ahead and take up all of the available space all right now let's get back to our three column layout example so you will remember that in my other tab that shows the finished product of what we want to build in that example the main column is in the middle or in other words sidebar one is the first column now if I jump back over to our work in progress tab if we want the sidebar one column to come first our initial instinct might be to jump over to our HTML and cut and paste and reorder the column divs but with flexbox we don't need to do that because for search engine optimization reasons maybe we want the main column to come first in our HTML code now luckily flexbox makes it very easy to control the ordering of our content so I'm going to leave my HTML alone and simply hop in to our CSS and if we want sidebar one to come first we can just say order one and then we want our main column to come next so for main column we can say order two and we want our sidebar two to be last so we can say order three so if we save and refresh that did the trick alright now next you might be wondering how we can add margins in between our columns well to answer that we are actually going to jump in to a new example alright so if I scroll down the page you can see that I just added this new section that has three features so this is what I'm starting out with but if I jump over to my other tab we can see the finished product of what we are going to transform this into so pretty basic stuff right we want a three column layout for the blue green and purple boxes we want the three columns to be equal width but this time we want to add margins in between the columns we can achieve this layout with flexbox very easily so I'm going to jump back to my work in progress tab and let's get started by taking a look at the HTML for this section so we have an overall container or parent element with a class of call-outs container and then nested within that div we have the three call-out divs and they each have a class of call-out so by this point you know the drill if we want to use flexbox we will give the parent or container element a CSS value of display flex so let's jump over to our CSS here's the rule that selects the parent or container element so display flex all right and then here's the rule that's selecting the three children elements so if we want them to all be equal width we can just say Flex one all right now we will add margins in between these columns like I promised in just a moment but first now that our columns have background colors like this it brings our attention to one of Flex boxes greatest strengths and that is equal height columns so notice that the blue box has more content than the green or purple boxes and yet the green and purple boxes have the same exact height as the blue box now if you've ever tried to create a column layout with floats you know that equal height columns like this can be true he to setup but with flexbox we get equal height columns by default now this is really nice but let's imagine for some reason you didn't want equal height columns so for example if you wanted the green box to shrink-wrap to its actual height and the purple box as well what you could do is go into your CSS and on the rule that targets your container or parent element you can add a new property that says align items and give it a value of flex - start so now notice that the green and purple boxes are using their natural height now notice that all three columns are starting at the top but if we change this to flex and now the three columns will align so the bottom edge is even and if we wanted the three columns to be centered vertically you could just change this to align items Center okay so those are a few options that flex box gives us by default it's set to stretch and that's what gives us the built-in equal height columns by default but because stretch is the default value we don't even need to include this line if that's what we want okay with that tangent out of the way now let's finally add the margins in between our columns now when we want to add margins it might be our first instinct to jump over to our CSS find the rule for the children elements or the columns and just say margin right 40 pixels okay and that does indeed create margins in between the columns but notice that that leaves us with an awkward gap to the right of the final column to get around this we could target the final column so we could say call out : last child and then just say margin right zero and when i refresh we see that that works quite nicely but for the time being I'm actually going to remove that and the margin right property as well so we're back to not having any margins because I want to show you an alternative way to add margins I want to show you a way that feels more Lexx box ish now remember earlier in the video when I said that the nice thing about flex box is that we don't have to assign width values well we don't have to but that doesn't mean that we can't assign width values in Flex box so check this out back in our CSS within the rule that targets our children or column items let's actually get rid of this flex one line and instead what if we manually give each column a width of 30% right so if there are three columns three times 30 is 90% so our columns will take up 90% of the available width and the remaining 10% can be distributed in between the columns as margins now just a general CSS tip whenever you assign both a width and a padding value to an element we usually want to also include box sizing border box so that our math stays as simple as possible so if I save this and refresh we see that our three columns are only taking up about 90% of the available width and what we want to do now is evenly distribute this remaining 10% in between the columns as margins flex box makes that really easy so we just target the parent or container element and we say justify content and by default this has a value of flex start and that will align content to the left so if we change this to flex and that would align the content to the right so now the gaps on the left you could also say justify content center but in this case the value we are looking for is named space - between perfect so that evenly distributes the remaining space in between the items and it gives us nice margins now if we jump back to our CSS here's another quick tip while we technically can use the width property here for the columns it's not really the official flexbox ish way of doing things so instead of the width property if we want to be proper here and keep things fully flexbox based we would say flex basis 30% this is the flex box way of specifying a particular size so if I save this we see that our layout still works the same so this three column layout works well for larger desktop or laptop screens but what about smaller tablets or smartphones so you'll notice that as my screen gets smaller and smaller the three column layout looks worse and worse right so this is unacceptable so on a screen that's this small we don't want multiple columns right so we want the blue box to use the full available width and then we want the green box to stack underneath it and use the full width and the purple box stacks underneath that alright so how would we use media queries and breakpoints to adjust our flexbox layout well the good news is that it's really simple so if you've ever used floats to create responsive layouts you know that it can be a pain to micromanage the float property the width property the margin properties for different screen sizes but because we didn't use the width value we used Flex basis and we didn't actually specify any horizontal margins nor did we have to float our columns really all we need to do to make this responsive is set things up so small screens don't receive the display flex and justify content lines on the parent element so check it out here's what I would do I would just cut these two lines the flex box related lines being applied to the parent or container element I'll cut those to my clipboard okay let's save that so now notice this is the layout that we want for small screens but on larger screens we don't want this we want our three columns to be back in place so in our CSS let's create a new media query so the @ symbol media let's say screens that are at least 900 pixels or larger all right now within this media query we will target the parent or container class so that was call-outs container and then we can just paste back back in our clipboard right so only screens that are this wide or larger should receive the flex box based properties so let's save this we're back in business and if someone comes to our site on a small screen they receive a nice single column layout all right so I just added this new section to the bottom of the page and in this example I want you to think of a situation where you have several different items so I have five but you might have 10 or 20 or 100 so maybe think of a photo gallery or some type of grid of items and in this situation we don't want our items to be flexible in size so in this case we want our items to have a very locked in size so I've given each of these boxes a very precise traditional width value of 150 pixels and a traditional height value of exactly 100 pixels so really all I'm using flexbox for is to evenly distribute the remaining space in between each of the items now this works well when there's more than enough space to fit all of the items on a single line but watch what happens as I shrink my browser window so notice the red boxes are staying the same size which is good it's just the space in between the red items that is decreasing which is what we want but you'll notice that flexbox is very stubborn it's stubborn about keeping all of the items on a single row so even when my screen gets too small to comfortably fit all of the items on a row flexbox says oh I'm not budging and even when my screen becomes this narrow and the items are nowhere near as wide as they should be remember I told them that they need to be 150 pixels wide flexbox is just throwing a tantrum and it's not letting the items wrap down to a second or third line so that there's enough space for them to keep their intended size so the question becomes how can we tell flexbox that it's okay to drop down and have multiple rows of items well all we need to do in our CSS within the rule that targets your parent or container element we just use a property named flex - wrap and by default it has a value of no rap and that's what's causing the stubborn behavior but if we just set this to flex rap rap and go ahead and save we see that flex box will gracefully drop down to multiple rows only when it needs to so on smaller screens we see there are multiple rows but on larger screens when it's possible flex box will still place everything on a single row all right I just added this new section to the bottom of the page and our goal for this example is to perfectly Center this text within this dark grey box so we want to Center it both vertically and horizontally so let's take a look at our HTML the dark grey box just has a class of banner and nested within it is another div that has a class of center me and that's what contains the text if we take a look at our CSS the container div that has a dark grey background has a set width of 700 pixels and a set height of 400 pixels now the dip that actually contains the content that we want to Center we are not going to give it a specific width and height value its width and height are dynamically determined by just how many letters of text there are in the paragraph and the font size that it's using now since the dawn of time it's been a bit tricky to Center content with CSS when the content you're trying to Center has an unknown width and height now without flexbox centering this horizontally would be simple enough we would just tell the parent element to use text-align:center but centering it vertically that's always been tricky right so one popular way is to set it to position absolute 50% from the top and then use transform translate why to pull it back up half of its own height okay so there are all kinds of different creative ways of centering content but none of them are super easy or super intuitive but flexbox kind of changes that so watch how simple it is to Center this content we just tell the parents or container element to use flexbox so display flex and then for the child element that we want to send we just use margin so you might know the traditional method of centering a block-level element horizontally by saying margin:0 auto right so this strategy has been around since the dawn of time it doesn't add any vertical margin but setting the horizontal margins to auto will Center it well by combining this with flexbox this margin strategy gets a huge boost so check this out this traditional line of code would Center something horizontally but if we just say margin Auto so this will use auto margin in all four directions top right bottom and left as long as the parent element is set to display Flex watch the magic that this line of code will create I know it may seem like I'm excited over nothing but trust me if you've tried to vertically Center content in the past you'll probably share my joy over how simple this is so thank you flexbox all right I just added this new section to the bottom of the page and this will be our final example in the video so if you've made it this far pat yourself on the back okay so this is what I'm starting with but let me jump over to my other tab to show you the finished product of what we are going to transform this into so what are we looking at here what's the goal here well basically we have a two column layout right so here's one column and here's the second column and the effect that I'm trying to demonstrate here that we're going to work on is this column is the main column right so it contains the content that is defining how tall this entire block is and then in our second column let's imagine that we want to divide it up vertically in half so no matter how much or how little content lives in the left-hand column whether this overall block becomes taller or shorter depending on this content we always want this blue box and green box to share the available height even Li now again this may not seem like that neat of an example but trust me if you've ever used floats to try to create column layouts you know that something like this is trickier to setup than it might seem but with flexbox it's not that bad so let's jump back to our work in progress tab let's not worry about the vertical split right away first let's just set up the two columns so let's begin by looking at our HTML so we have a parent or container element with a class of equal height container nested inside that is the first column so it's a div with a class of first and then here we see the second column it has a class of second and then nested in that this is the blue box and this is the green box all right so let's begin by creating just the simple two column layout so over in our CSS this is the rule for our parent or container element so we will tell it to be display flex all right here's the rule for our first column so we can just say flex one remember one is the baseline value when we want to evenly distribute the space so we will also tell the second column to have a flex value of one okay so that gives us the two column layout so column one column two we didn't use any new code or techniques to achieve this so far and now we just want to make this blue box and the green box evenly share all of this remaining available height in this column so to achieve that we're going to nest a flex inside of a flex so to speak so within our CSS this is the rule for the second column the column on the right hand side and nested within that remember there's the blue box in the green box so if we want these two children elements to use the full available space of its parent we will just tell that parent element to use display flex now if I save this in refresh you'll notice that the blue and green boxes are now very narrow and their positions side-by-side this makes sense right because throughout this entire video we've been using flexbox to share available horizontal space now the reason the blue and green box are so narrow is because they only contain one letter right so that's all the space they need but if we wanted the blue and green box to evenly share all of the available width we know what to do we've already done that many times throughout this video so we would just tell the blue box to have a flex value of 1 and we would tell the green box to have a flex value of 1 okay but we don't want the green and blue box to share the horizontal space we want each of them to be full width and we want them to share the vertical space now by default flex box lets you share horizontal space but we can adjust that so remember when we told the second column div to use display flex because it has the blue and green children well that means that this second div is a parent or container div and in Flex box there's a property that we can add to container elements named flex direction now by default its value is set to row and this is why throughout the entire video so far flex box has been divvying up horizontal space right row space but if we set our flexbox container or parent element to Flex direction column now flex box will divvy up and share the available vertical space perfect and that's actually going to bring this video on flex box to a close we've only scratched the surface of what's possible with Flex box but I think this video should give you enough concepts to go and experiment with if you're interested in reviewing the code I used for any of the examples there's a link to that in the description if you're wondering about browser support and flex box I have good news as of this recording about 97% of all web traffic will be using browsers that support flex box now if you want more detailed information about that statistic and if you want to learn more about browser vendor prefixes and how that works with Flex box I will include a link with more info on that in the description anyways thanks for hanging in there until the end I hope you feel like you learn something and stay tuned for a new web development video next Tuesday thanks bye if you haven't already be sure to check out my brand-new get a web developer job mastering the modern workflow course as always there's a link to it in the description

Channel: LearnWebCode

Views: 901,613

Rating: 4.9678817 out of 5

Keywords: flexbox, tutorial, css

Id: k32voqQhODc

Length: 28min 45sec (1725 seconds)

Published: Tue Oct 11 2016