CSS Flexbox Tutorial | Learn To Create Layouts Using CSS | Learn HTML And CSS | Flexbox Tutorial

today you're gonna learn about something called flexbox which is a new way for us to create layouts inside our websites now for the past many years we've been using something called float inside CSS in order to take elements inside a website and place them next to each other now float was now really intended to be something that we're supposed to be used that way but because it worked we've been using it for so many years now so luckily today we have a couple of new methods we can actually use in order to create layouts inside websites one being CSS grid and another one being flex box now there's a difference between CSS grid and flexbox one being the CSS grid has a couple more features when it comes to responsive design and flex bars is more available inside the different browsers that we can actually go and check this out inside this website here that's called can I use come I can go and say CSS grid and as you can see there is some process that doesn't quite support CSS grid yet if I were to type in Flex box then you can see we have a lot more green inside this diagram here meaning that we can use it inside more browsers than we can with CSS grid now this of course a difference in using CSS grid and flexbox other than the responsiveness that you might get out of it from CSS grid one being that CSS grid seems to be more focused on the entire layout of the entire document whereas flexbox is more about rearranging the sub items inside sections of a website okay so if we were to go back inside my document here you can actually see that right now we have a stylesheet that has some default styling inside of it that simply gets rid of margins and padding's inside the website so just get rid of sort of these annoying margins that we have inside the browser's as a default now we also have a class called container where I set a width to 100% meaning the full width of the browser and a height to 500 pixels and then the background color so we could actually see it inside the website inside my index page I have a section inside my body tag and again you might say that I'm using too many tip boxes in this example here again I'm just using the dip boxes here to show you how we can actually use flexbox so don't worry too much about the fact that I could have set up the HTML tags in a better way it just so I can better show this example here okay now I have a section tag that I gave the class container which is going to be the one I've styled and inside the section I have a couple of dip box well I have quite a few dip boxes that all have a class set to item and inside each dip box I have a paragraph that has some placeholder text inside of it now inside the browser for were to take a look at it you can see that we have the text up here which is quite small because I haven't styled it and we have the big grey background of this container that is the section inside my code now what I would like to do is I would like to take my elements and in the same way as we used to do with float I would like to put them next to each other instead and inside some kind of container so we can have maybe something that simulates a gallery or some links inside a front page or something and we can do that using flexbox so if I were to go inside what takes document here again and go inside my stylesheet I'm gonna go ahead and create some styling for the container now if we want to make the container section here into a flex box then we're going to go ahead and give it a display set to flex which then tells it that we're going to have some items inside this container that we want to rearrange in a certain way another thing we need to add when it comes to a flex box is we need to tell it if it should wrap the content onto multiple lines so if we were to have a bunch of text inside this website here that goes you know in all the different boxes that goes horizontally if there's no more room horizontally then it should jump down to the next line and this is something that float actually does as a default but inside flexbox you do actually need to tell to wrap the next line which again you might see well why should we just do that as default but in some cases it might be nice to actually be able to choose if you want to have this effect going inside the website so what we're gonna do here is we're gonna go and say we have a flex - and then you can see we get some options inside my editor here the one we're looking for is one called wrap now as a default it's going to be set to no wrap meaning that is not gonna jump to next line we can also choose wrap if you want to we can also choose wrap reverb which means that it's going to do a reverse rap where if there's no more space inside the horizontal line then instead of jumping below to next line it's gonna jump above instead now I'm just gonna go and choose rap because this is what we want as a default then the next one we want to create here is something called flex - direction and as a default this one is going to be set to row which means that we're just gonna go ahead and go from left to right in one row which is also what we have typically inside CSS when we use float so if we want to get the same effect as just using float then we're going to use row if you wanted to go from the right side to left side then we can't use row reverse if you wanted to go from top to bottom you can choose column and if you wanted to go opposite from bottom to top you can choose column rivers so there's quite a few options here I'm just going to stick with row now we set a couple of different parameters inside the container here and what we could actually do because at least in my case I think I'm going to be using these two every time I'm going to be using flex we can actually go ahead and write one line of code that will actually do both of these inside one line which makes a lot faster so just to show you guys if we were to go down to the next line here and say flex - flow then we can actually go ahead and say first of all we want to have it in a row and then after what you wanted to wrap so we have both the DS parameters inside one line so we can actually go and do that instead if we want to so I'm just gonna delete the other two so now let's actually go ahead and take a look at what it does inside the website here so were to go back and refresh you can see that all the lines of text even though it can be a bit difficult because there's no spacing between them are going in one line all the way across and now because there's no more room on the right side over here it jumps down to the next line another thing you're also going to notice is that it does actually spread out with the height in order to adjust the content to have even space inside the container here and this is also something we can change later on if you want to so I'm gonna go ahead and get to that in a few minutes so the next thing we want to do is inside our style sheet here we can go ahead and set something called justify content which means that we can actually decide how much space should be in between horizontally between the items we have inside the container so were to go inside the container class here go below we can say justify contents and here we can set it to a bunch of things we can set to sensory flex ends like starch space around space between which might not make a lot of sense now so let me actually go ahead and show it if I were to choose Center and save it refresh the browser you can see that all these elements inside our container are actually going to get centered inside the website because we have an even amount of space on the right side and the left side and as you can see the bottom text that couldn't fit on the first line also get centered inside the website so we can actually choose how we want to position the elements horizontally inside the website but again as you can see using sensor does not create space in between the items here so if I were to go back inside my code I can go into something else besides sensor if it were to say space around save it go back inside my browser you can then see we get space around the content inside our elements here so now we do actually have a bit of spacing what you will notice though is that we do also have some spacing on the left and the right side so we have an even amount of spacing on the left and right side of each item meaning that the items that are furthest to the left we're gonna have half the spacing as in between the items and the one on the right side is also gonna have half the spacing so if you want to fix this we can actually go back inside our CSS code and instead of saying space around we can actually go ahead and say space between so were to go inside my website refresh you can now see that we don't have any space on the edges of each item but we do have in between the items which is something that might be a little bit more realistic to what you want to do inside your website the last two we also have here is something called flex ends and flex start so were to say flex ends refresh the browser what you'll notice is that all the constant gets pushed to the right side of the browser and flex start is what we have in here as a default when we don't set this parameter inside the CSS code which is just going to make it do the same thing as here but from the the start over here okay so this is what we had before we started changing anything using justify content now I did notice that this is one parameter that didn't pop up inside my text editor here so I'm just gonna go into it manually which is one called space - evenly if I go ahead and save this one go inside the browser you can actually see that we have space evenly not just in between the elements but also around on the edges here of the the outside elements okay so just so you know we also have these and as you can see the bottom content here actually looks quite nice when we do it in this way so just know that there's also that option even though my text editor here doesn't say you can use it now I'm just gonna go and change the back to space between because I think this is the better one to just use here in this example today just gonna refresh and there we go now when it comes to the container here there's two more things I want to talk about one is called a line - items and the other one is a line - content now aligned as items decides how the individual items are going to be positioned inside the line that is inside of where as aligned as content it's going to take all the rows that we have inside our website and position them vertically inside the browser now as you can see we have a couple of different options here for were to just choose one like flex start this is acts as a default one where if I were to go back inside the browser you can see that nothing happens if watch a chance just want to flex and go back and refresh you'll notice that all the content goes to the bottom of the the line that it's actually inside of so we next split up the content into two lines because we have content going down to the next line and as you can see it all goes down to the bottom of that specific line if I were to go back inside the code again and to something called center then again the content gets centered inside the horizontal lines now for the next example which is the one called stretch I'm just gonna go ahead and right-click and show you guys how it actually looks like if we were to inspect the items inside the browser here because we were to right-click you'll actually notice that the dip box which is the item that were actually messing around with right now it's only the amount of height that the content is inside of the container so because the text is only this amount of height here the item is also going to be the same size as the content now if I were to go back inside my code and right stretch then refresh the browser you'll notice that we have something similar to the default styling but if it were to right-click on the element and inspect it and then choose the dip box you'll actually notice that the item has a height that goes all the way down to the bottom of the horizontal line that's inside of and again we have three lines of constant now because we have an inspector over here to sort of pushes the content together so we of course have three lines now so don't get confused by that but just know that the item is going to take up the entire height of the line that is inside of when we use stretch now we also have something called base line which essentially goes in and see okay do we have any items that has more content vertically going downwards than the other items and then it's gonna go ahead and take all the items and send to them inside the horizontal line but it's also gonna go ahead and take that one item that had more space going vertically and sent to the content to match up with the rest of the content inside that line in this example here we can't really show it because I don't have more space in some items than others but that's what it can do now I'm just gonna go and choose something default like Flex start which is the default one and we're gonna go and talk about the last one which is a line - content now here we can go into something similar to the previous one we can sensitive content let's actually go ahead and again the flick start is gonna be the default one that's gotten Center it refresh the browser and what you'll notice that instead of taking up the entire space of the container all the items are going to get pushed together and center it inside the browser because now we're not talking about the individual items instead we're changing the styling of the entire row inside the container okay so once you go back inside the code and choose something other than center if we were to choose something like space around go back inside the browser refresh you'll notice that we have the same amount of space on the top and bottom of each item inside that row going all the way down to the other rows as well if it were to go back inside the code again and instead of choosing space around we can go ahead and say space between and again you're starting to see some similarities here between this specific styling and some of the wants to use previously so space between again it's not going to leave any space on the top and bottom of these items here so you'll notice that a lot of these stylings here are very similar to when we used justify content which was the one that decided or essentially how these items were going to be placed and then a line content is going to go and choose how they're going to be positioned vertically instead okay so now we talked a bit about how we could style the container in order to position the items inside the container but we can also do some styling to the individual items that we have inside the container so for watch you go down to the next line and create a class called item which is the same class I have applied to all the items inside my index page as you can see we have a bunch of dip boxes with text inside of it and all of these dip boxes has a class called item so were to go back inside my stylesheet the first one we're gonna talk about is one called order which is going to decide the order of how we want to show the items inside the browser so if we were to go ahead and give all the items a order as one of course they're all going to be in the default order as we have to be inside the index page because they have the same number but if I were to go ahead and create a second class here and call it item two and set the order to two I could then go inside my index page and take one of the items that is maybe the second last one we have down here I'm going to change the text so we can actually see which one it is to here or something I'm going to change the class to item to save it go inside my browser and then what you'll see is that we get the item at the bottom here instead so because who ordered all the other elements as order number one they're going to be shown first inside the browser and then because this specific item had order number two then it's going to come after all the other elements we have inside our HTML page so as you can see it's going to be shown last inside the website okay now the next one I want to show you something called flex grow shrink and bases and this is one I know you will be using when you create flexbox because this one essentially decides how much space each of these items are gonna take up when it comes to the width so we're basically setting the width of each item here so what I'm going to do here is I'm just gonna take the same example as previously with the order actually I'm gonna go ahead and change one thing which is I'm going to replace the here text with the previous text that I have so all of them had the same text inside of them like so so what I'm gonna do now is I'm gonna go back inside my stylesheet and I'm just gonna go and replace order because we don't really need in this example here so I'm just gonna go and write Flex - grow and I'm gonna go and set this one to one then I'm gonna do the same thing to add them to down here so I'm gonna save Flex - grow and set this one to two now I'm also gonna go ahead and give these a background color because we need to actually see what is going on here so what's a background color is going to be red on all the default ones and then item two is going to have a background color set to green just so we can see what's actually going on here so were to refresh and what you're going to notice here is that we have two one item that has a background color set to green that has more space available to it on the right side of it then all the other boxes and this is because right now if we were to take the the top two examples here we have a certain amount of space available horizontally based on the width of the content inside the items so we essentially have this amount of spacing Plus this amount of spacing over here available total in the horizontal line up here and then the space is going to be divided evenly between these two items here now down here at the bottom because we've set the green one to grow twice as much then the amount of space available you can actually see that we have twice as much space inside the green item then we have next to the red item so it's going to take up more space than the other items because it has Gro set to two now we do also have one called flex - shrink which does the exact opposite of grow it's going to go ahead and add more spacing to all the other elements instead of this specific item that has shrink inside of it so does the exact opposite of grow now we also have one called basis and this is to want to really want to focus on because basis is going to tell us how much space each of these items are gonna take up as a default so if we were to say we have something called flexed as basis and I want to set it to let's say 30 percent because now we can actually start using pixels or percent or whatever measurement you might want to use and if we were to do this and also go ahead and copy paste this below here so now we still have item number two which instead are gonna take up 60% then if I were to go back inside my browser refresh what are you going to notice here is that all these items are going to take up 30% of the width the inside of horizontally and this one item is gonna take up 60% of the width so the one called flex spaces is the one we really want to focus on if we want to give these items specific width as you can see we do actually have to take something down to next line which is what we want to have inside a lot of website design examples because it just looks a lot better if we have text going down to multiple lines if we can't fit them inside the container and I just want to mention here as well that the base is styling is just a default styling is going to have for the width of these items if we were to shrink the browser and there's no more space available then if we also have a shrink or grow set inside our styling here it's going to go ahead and take these and start adding these as well so we can use grow shrink and basis all together in order to create a unique layout that switches around the size of the content depending on the width of the browser okay so another way we could actually write this if you don't want to write both shrink row and bases in three different lines is we can actually go ahead and write just flex and then say we want to grow cero we want to shrink one and we want to set the width to maybe 100 pixels this will be the same thing as using gross shrink and bases altogether inside one line okay so this is how we can use flexbox in order to move around the content and align them horizontally instead of using floats and this is a much better solution than using float because it allows for better customization that we used to have access to so I hope you guys enjoyed this lesson in the next episode we're gonna go and create a gallery together using flexbox so you can actually see how we're gonna use flexbox inside a real website so if you guys enjoyed I'll see you guys next time I'd like to say thank you to all the people supporting me on patreon advance to the next benefit such as lesson materials then go ahead and visit the link to DC on screen here and I'll see you guys next time [Music]

Channel: Dani Krossing

Views: 159,073

Keywords: Create Layouts Using CSS Flexbox, learn to use flexbox in css, how to use flexbox, css flexbox tutorial, flexbox tutorial, css flexbox, html tutorial, what is flexbox, css grid, css grid tutorial, How to Create Website Layouts Using CSS Grid, how to create content using flexbox, tutorial, how to align content using css flexbox, css tutorial, flexbox vs css grid, flexbox grid, flexbox, html, how to create website layouts using flexbox, css, how to align content using flexbox, layout

Id: 0e02dl66PYo

Length: 20min 35sec (1235 seconds)

Published: Wed Jan 17 2018