Learn CSS Flexbox in 2 Hours – Tutorial for Beginners

Key Takeaways

CSS Flexbox will help you create flexible and efficient one-dimensional layouts for your websites. Learn all about CSS Flexbox in this comprehensive video course from Indra. Flexbox transforms an ordinary container into a flexible box where you can precisely control its children known as flex items. Flexbox operates along a single line governed by the main axis row column and the perpendicular crossaxis. This powerful model simplifies complex alignments, allowing items to grow to fill space or shrink to prevent overflow. By mastering just a handful of properties like display, flex, justify content, and align items, you can create truly dynamic and responsive components easily. Hello and welcome to the CSS flexbox course. My name is Indra and I will be your instructor for this course. In this course, we will be learning all about the CSS flexbox. So now let's answer the most important question. What exactly is CSS flexbox? So the CSS flexbox is short for flexible box layout. Okay, it's a CSS layout model that simplifies creating complex layouts. It provides a flexible way to align elements and distribute the space within a container element. Okay, we will learn all about these things in this video. The flexbox layout model is birectional. This means you can either arrange your elements in rows, columns or both. Okay. So now what are the benefits of using the CSS flexbox? Before flexbox, it was hard to create complex layouts and responsive web pages. You needed a combination of the CSS floats and position properties. Also, you will occasionally need the margins like the margin auto properties as well so that you can create some sort of a complex layout inside of CSS. And this required many workarounds and hacks basically. But with CSS flexbox, you can now do the following with less difficulty and fewer lines of code. Align and center elements using properties like justify content and align items. Okay. Develop responsive layouts without writing a lots of media queries. Reorder elements without changing the HTML structure which we will definitely see. Create same height columns without extra HTML elements or background images. Okay. So these are all of the benefits of using the CSS flexbox. In short, by using CSS flexbox, we can create complex layouts inside of our HTML page without writing a ton of CSS or without using some sort of hack or workarounds. CSS flexbox makes us easy to create the complex layouts inside of HTML. Okay. All right. So what I'll do next I will show some of the examples where the CSS flexbox is being used. So if I go to the browser as you can see I will zoom in a little bit. Okay. So this is the GitHub website. If you are signed in you will never see this page. But if you are not signed in you will see this marketing page of GitHub. So as you can see here this navigation bar it is using the CSS flexbox and in the later part of this course we will build our own simple navigation bar as well by using the CSS flexbox. So to build navigation bars the CSS flexbox is heavily used and this is one of the common pattern which you will find. Okay. So this navigation bar is using the CSS flexbox. As you can see, we have two groups of content here like these elements here on the left and here we have the search bar and then we have the sign in and the sign up button on the right side. Okay. And here we have the logo as well. So these are the flex elements and the navigation bar is the flex container. Okay. If we just go a little bit more, as you can see, there are a bunch of things. We have these images as well, we have all of the content. As you can see here on the right, we have some image and on the left we have some content. Most probably it is using the CSS flexbox as well. Okay, let's move forward. As you can see once again, we have some image on the right and on the left we have some sort of content. Most probably this is also using the CSS flexbox. Okay, once again we have three different columns and so on. We have two different columns here. So these all of the things which we have currently it is very easy to create this sort of layout by using the CSS flexbox. Okay, once again we have another website. I'll just zoom in a little bit. It is the data do website. Okay. Once again, as you can see, this website also uses the CSS flexbox quite heavily. First of all, we have these two buttons. As you can see, they are side by side and they are inside of a flex container and these two buttons are the flex items. Once again, we have some of the images as well and this is using the CSS flexbox. Like before this video, I have inspected that. Okay. And then we have this layout as well. And once again we have some images on the right. We have some content on the left. We have some content on the right. We have some image on the left. And so on and so forth. These sort of layout as you can see these are some complex layouts but by using the CSS flexbox we can create these sort of layouts quite easily. Okay. I hope that you have understood like what exactly is CSS flexbox and what are the benefits of using the CSS flexbox. Okay. Before moving forward in the course, I would like to share with you some resources which will be very very helpful to learn about the CSS flexbox. First of all, we have this blog post by free code camp by this author whose name is Benjamin Simma. Okay, I might have pronounced his name incorrectly. So, sorry for that. But this blog post is quite helpful and this is one of the best resource which I have found to learn about the CSS flexbox. Okay. So, this is called the CSS flexbox handbook. complete guide with practical examples. So you can search it online and also the link of this blog post will be available inside of the description below. Next, one of the most useful websites for the web developers is Mosilla developer network. So this is one of the closest thing which you will find as the documentation of the CSS, HTML and JavaScript basically right. So I will be referring to this resources quite a lot throughout this course. So first of all we have this blog post and then we have the Mosilla developer network. Okay. Okay. So let's now set up our local development environment. Okay. So in this course we need a code editor and my choice for the code editor is Visual Studio Code or VS Code. Okay. You can download the VS code editor from code.visisualstudio.com. And here we have the download button. If you are using Windows, you can just click on that. If you are using Mac OS, then this download button will show like download for Mac OS or something like that. Okay. And then we need a browser. My choice will be the Google Chrome browser. Okay. So here is the Google Chrome browser. you can just download the Google Chrome browser. Okay. So this is the local development environment which we have. Okay. So now let's set up the initial project to learn about the CSS flexbox. So in my desktop I have a folder called YouTube and inside of that I'll create another folder called CSS flexbox. Okay. And then I will just drag and drop inside of the VS code icon. All right. So I have opened the folder. So CSS flexbox. So otherwise if you are not able to open the CSS flexbox folder inside of VS code, you can just go to file and then click on open folder. This will open the file explorer. Okay. And then you can just select this particular folder and then click on select folder. All right. So here what I'll do I'll create the index.h HTML file. Okay. And then I will just get rid of that. Then I will do the exclamation mark and hit enter. Tab. Tab. And then I will just change the title to CSS flexbox. Okay. And inside of the body, I will open up the H1 tag and then do something like CSS textbox. Okay. Now, after that, I will create another file called tiles dot CSS. Okay. And inside of the HTML file, what I'll do, I'll just go ahead here and do link and dot /styles.css. Okay. So to follow along inside of the VS code, you want to have one extension which is called live server. Okay. So I'll just search for that. So this is the extension. You can just install the extension. There will be a install button. I have already installed the extension. That is why I am having the uninstall button here. But you will have something like this. Okay. So you can just click on the install button and it will be installed. Then after that you have to go to the HTML file. basically this file and here inside of that you can see the go live button or you can just right click and scroll down a little bit and click on this open with live server okay so what will happen after that whenever we will make some changes inside of our code it will automatically reload the browser okay I'll click on that and there we go so I have opened this particular HTML file file inside of the browser. Okay. So, what I'll do, I'll just close up some of the browser tabs and go to my code editor right now and I will add some basic styles. So I'll do margin of zero, padding of zero, box sizing, not box line, box sizing of border box, and font family to something like this one. Okay, you can use anything. All right. And for the H1, I can just do text align to center and font size to something like uh 4m something like that. Okay. And after that what I'll do is basically I will just go ahead and move the browser here on my second desktop and I'll close the file explorer. Okay, I'll just close that and there we go. So now we have this particular CSS flexbox written out here. Okay. And this is the browser window which we will be using throughout the course. Okay. So there we go. So this is the basic setup of our course. Okay. All right. Before writing some code about the CSS flexbox, we have to learn about some terminology. Okay. And these terms we will be using throughout our course. Okay. So how flexbox works right? So we have some items and these items are inside of a container and in order to turn that container a flex container we have to set the display property to flex or inline flex. Okay. Once we have done that, this container is now a flex container. And all of the items which we have currently right now are called the flex items. I might call them boxes or something like that. But the items which are inside of a flex container are called the flex items. And once we set the display property to flex, we will have access to many other CSS properties which we can use such as align items, align content, justify content and so on. Okay. So what I'll do, I'll just go to the code editor right now and I will set up some code. First of all, I'll create a div of container. Okay. inside of the div I will create another div. Okay, so dotbox with the class name of box and time six. Okay. All right. And inside of that I'll do one then two then three then four then five then six and each of the boxes will have some unique classes as well. So I'll do one then two then three then four then five and six. Okay. All right. And here inside of the CSS what I'll do? So here inside of the CSS I will write some styles for the container and for each of the boxes. So container and for the border I'll do 5 pixel solid and black. Okay. And I'll set a height of 1,600 pixels, width of 1,600 pixels. And for the time being, what I'll do, I will just comment out the height. This height, we will need it later. Okay. All right. And hit save. I think this is enough for now. And for the boxes, what I'll do, I'll just go ahead and do a height of 200 pixels, width of 200 pixels, and what I'll do, I'll set a border radius of something like 6 pixel. Okay? And for each of the boxes, as you can see, we have this 1 2 3 4 5 6. Okay. So, let's go ahead and for each of the unique boxes, I will have a unique background color. Okay. So, dot one background color. Let's do blue violet for two. Okay. Background color. Let's do brown. Okay. Part three. Background color. Let's do something like this one. Cadet blue for four. Background color. Let's do coral. Okay. for five background color. Let's do cornflour blue. Okay. And for six, let's do the background color of crimson. All right. We have some unique colors currently right now. Hit save and let's see how that looks. Okay, this is way too much zoomed in. Okay, so this is that this is 100%. Now I do not like how that is not centered and the text is quite small. Okay, so what I'll do I'll do margin. Let's do top and bottom two rim left and right auto. Okay. And for each of the boxes. Okay. I'll do a font. Uh-huh. Size and do something like form. Okay. And do a text align to center. All right. Now this thing looks better, right? Okay. So this is our initial setup for the code. Now in order to turn the container a flex container, what we have to do? We have to go here. Okay. Inside of this container, we have to set the display to flex and hit save. And now something different will happen. Okay, this happens. So all of the elements are lined up in one line. Okay. So this happens and also I have given the numbers right. So what is the direction of our content? It is going from left to right. And this will be important when we will be learning about the main and the crossaxis inside of the flexbox. Okay. So this is what happens. Now what I can do after this display flex I can set justify content to center it's save and if I do that then all of the elements are now currently centered and why I can do that because I have set the display property to flex. If I just comment this thing out and hit save now nothing happens right because we have display set to flex that is why this container is now a flex container and that is why the CSS property justify content is available to us and in case if you are wondering what are the other CSS properties which are available I can show it to you Okay, I have opened this page on MDN which is for CSS flexible box layout and inside of that if I just scroll down a little bit then we have many of the properties which are available such as align content, align items, align self, flex, flex basis, flex direction, flex flow, flex grow, flex shrink, flex wrap, justify content. So we have just seen a glimpse of the justify content but don't worry we will discuss the justify content and the other properties as well in detail in this course. Okay before moving forward we have to learn about a little bit more terminologies. So we have to learn about the concept of main axis and cross-axis inside of CSS flexbox. So what exactly is the main axis and how it is determined? So the main axis is determined by default by the direction of the content in which direction the content is flowing. So currently in our example if we go here inside of the CSS flexbox example so our content is flowing from left to right. That is why we are having this numbers 1 2 3 4 5 6. Okay. All right. So if that is the case then this is our main axis and the crossaxis will be the perpendicular to the main axis. So if the main axis is going from left to right then the crossaxis inside of the flexbox will go from top to bottom. Now you might be thinking okay so the main axis is the x-axis and the crossaxis is the y-axis. But you have to keep in mind it is not quite simple. So because we can change the main and the crossaxis and also we can change the direction of the main and the crossaxis as well. So currently the main axis is going from left to right. But by using the flex direction CSS property we can change the direction to right to left as well. So if I just do something like this, we can change it something like this as well. Okay. So we are currently not doing that yet. We will do that in the upcoming section. Okay. So this is how the main and the crossaxis is determined. Now I want to go to this blog post as well. As you can see this blog post inside of the pre-code camp has described the main and the crossaxis quite well. Okay, with some examples as well. But I will go to the MDN documentation as well. And inside of that as you can see it is saying like the main axis in flexbox is defined by the direction set by the flex direction CSS property. Okay. And there are four possible values for the flex direction which are row row reverse column and column reverse. And once again for the crossaxis it is saying the crossaxis in flexbox runs perpendicular to the main axis. Therefore, if your flex direction is either row or row reverse, then the crossaxis runs down the columns. Okay. So, basically it is saying like hey cross-axis is the axis which is perpendicular to the main axis and the main axis is determined by the direction of the content. Now, because we are using English then our content is flowing from left to right. But if you are using some sort of a language something like Hebrew which is written from right to left then the direction of the content is from right to left then the main axis will be from right to left. Okay. But we are not complicating the things that much currently. Right now we are using English and we will be using English throughout this course so that our calculation of the main and the crossaxis remains simple. Okay. So this is the main and the cross-axis. Next we will learn about the flex direction CSS property. Okay. Before learning about the flex direction CSS property, one thing which I like to discuss is the difference between the display flex and display inline flex. Okay. So what I will do here currently right now inside of this code inside of the HTML I'll create an anchor tag and this will go nowhere and it will say click me okay and I will just copy that after the container I will paste the anchored element okay and here inside of the CSS temporarily I will just add the anchor anchor element and pond size to two ram. Okay, hit save and go to the browser. So currently as you can see this is our anchor elements, right? And one thing to point out here is that our container is a block level element. It is not a inline element like the anchor elements, right? But we can change that behavior as well. So if we go here, currently we are setting the display to display flex. But if we set the display to inline flex, okay, hit save. And now our flex container has become an inline element. Okay, but apart from that there are no differences. So if we want to convert our container to an inline element but we also want to use the flex properties then we can set the display property to inline flex. Otherwise if we want to convert our container to just a block level element which it was by default because our container is a div right and div is a block level element. So in that case we will use the normal display to flex. Okay, I hope that makes sense and you have understood the differences between the flex and the inline flex. All right, now we will learn about the flex direction CSS property. By using the flex direction CSS property, we can control the direction of the main axis. Currently in this diagram, the main axis is going from left to right, which is by default it is doing right. But it can go from right to left. It can go from top to bottom or it can go from bottom to top. So let's go to the documentation on MDN or also inside of this blog post as well. So the flex direction property defines the direction for displaying the flex items. It is what sets the flex container main axis. This property can take any of these values like row, column, row, reverse or column reverse. Also, let's go to the MDN documentation and let's see what it is saying. The flex direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction normal or reversed. Okay. And here we have all of the values which the flex direction can take. Okay. So currently our application is looking something like this. Okay. So what I'll do I'll go to the code. Mhm. And I'll get rid of these anchor elements. It was just to show the differences between the flex and the inline flex. Okay. Hit save. And inside of this container, I'll just get rid of the justify content. Okay. And now if I just save and go to the browser as you can see this happens. So this is by default using the flex. Okay. And the container is the flex container. And as you can see by this numbering our content is going from left to right. Okay. Because we are using English. All right. Now what we can do we can set the flex direction and then we can set it to row and this is the default value by the way. Okay. Now as you can see nothing is changed. But now what we can do we can set the value of the flex direction to row reverse as well. So if we do that then as you can see all of the elements are now stacked in the right and please remember the direction of the content. Previously it was from left to right. Now the content is going from right to left. Why is that? Because the numbering is going from 1 2 3 4 5 6. It is going from right to left. Okay. So now what is happening our main axis? Okay. Let me just go to the Xcali draw once again. So currently our main axis is not this one. It was previously but our main axis is currently looking something like this. Okay. So I'll just do something like this. Okay. So this is our main axis. So the direction is right to left because we are using the flex direction to row reverse. Okay, now let's just go to the code. Then this flex direction can take another property which is column. Okay, hit save. Now everything is in one column. And what is the direction of our content? The direction of the content is from top to bottom because of this numbering basically. So 1 2 3 4 5 6. Okay. So what happened currently right now? So now our main axis I'll just Mhm. Okay. It was previously our main axis. Now what is happening? Our main axis is going from top to bottom. Okay. I hope that makes sense. And the crossaxis is left to right. Okay. And if we go to the code once again then we have another value which is column reverse. If we set that and go to the browser, as you can see now our content is going from bottom to top. Okay. So what is happening currently right now? Our main axis which is here which was previously going from top to bottom now it will be something like this. Okay. So now our main axis is this one. I hope that makes sense. So by using the flex direction CSS property, we can control the direction of the main axis. Okay, I hope that makes sense. And yes, by using the flex direction property, we can control the direction of the content as well by changing the main axis. So what I'll do, I'll just get rid of that and I will just set the flex direction to row which was by default. Okay. So here it is. Okay. Now we will be learning the flex wrap CSS property. Okay. So as you can see our container has a width of 1,600 pixel and the height which is commented out which is also 1,600 pixels. Okay. Now we have the display set to flex and the flex direction set to row. And here what I'll do I will increase the width of the individual boxes to 400 pixels. Okay. So we have six boxes. So 6 * 400 pixels that will be equals to 2400 pixels. So because we have set the flex direction to row that is why I can think of like hey all of the boxes will not fit inside of a single row right because it is overflowing. Right? We have this width set to 1,600 pixels and all of the width combined with all of the boxes is 2400 pixels. Okay, so let's see what happens if I just save that and go to the browser and go here. As you can see, all of the boxes are fitting inside of a single row. And what exactly is happening here? So if I just open the dev tools and just inspect one of the boxes, as you can see the width of each of the elements, each of the boxes is 265 pixels instead of the 400 pixel which I have set inside of the code. So what exactly is happening? So what is happening here is that all of the items like the flex items are shrinking down in the same amount so that they can fit inside of the container in a single row. And when we will be learning about the flex shrink property then we will see more of this shrinking property in action. But currently right now just remember like hey if we are overflowing the content inside of a flex container then all of the flex item will shrink down and it will fit inside of a single row. But we can change this behavior. Okay. So if we want like hey all of the elements should have the 400 pixels of width and all of the extra elements should wrap inside of the second or the third line we can use the flex wrap to do so. So if I just go here inside of this blog post as you can see uh we have some explanation or we can go to the MDN and see the description of the flex wrap CSS property. The flex wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked. Okay. And here as you can see the default value of the flex wrap is no wrap. Then it can wrap or we have another value which is wrap reverse. We will see all of this in this video. So let's go to the browser and do wrap and set it to no wrap. Okay. and save. As you can see, nothing happens. And because this is the default behavior. But here if we set this value to wrap and hit save. Now as you can see all of the elements have the 400 pixels of width and the extra elements which was not fitting inside of this particular container is now wrapped onto a separate row. Okay, if we have more elements then it will wrap into separate rows as well. So I can show it to you if I just copy this one a bit bunch of times and hit save. As you can see we have multiple rows here. So I will not do that. I will just get rid of that. Okay. So as you can see now flex wrap is working. Okay. Then we can have here we have this wrap. So if we set the flex direction to column, we can have the wrapping inside of the column layout as well. So what I'll do, I'll just do no wrap for now for the flex wrap. And I will increase the height to 400 pixels. And now if I just save that and go here as you can see. Okay. All right. So I'll do flex direction to column. And also I will uncomment this height because if I do not uncomment this height what will happen the height of the container will grow to accommodate the all of the elements which are inside of the container. So I'll just have a fixed height and hit save. Now as you can see all of the elements have the height of 265 pixel instead of 400 pixels. It is doing the same thing because we have flex wrap set to no wrap. But if I just set the flex wrap to wrap. Okay. And hit save. Now as you can see we have a second column. Okay. We have a second column here. And also please remember what is the main axis? Main axis is going from top to bottom. So 1 2 3 4 5 6. And the crossaxis is going from left to right. And that is why this particular column is on the right side. Okay. So if I just set it to row once again and hit save. Now as you can see 1 2 3 and then we have 4 5 6. Okay. So the main axis is going from left to right and the crossaxis is going from top to bottom. Okay. I hope that makes sense. All right. And in case if you are wondering about this space which is in between the columns and the rows and also here as well we will see how to control the space in the upcoming sections. Okay. All right. So this is how we can have the flex wrap. Now we can do something like row reverse as well. So let's see what happens. So if I do set the flex direction to row reverse and the flex wrap is set to wrap then this will happen. So our main axis will go from right to left. Okay. And the crossaxis is also top to bottom. So main axis is going from right to left and the crossaxis is top to bottom. That is why the new row which is happening here it is at the bottom. Okay. Now we can just go here and just uh do something like row. Now we can do something like column as well for the flex direction. So currently the main axis is going from top to bottom and the cross axis is going from left to right. That is why the new column is at the right side. Okay. Now what we can do? We can do something like column reverse as well. If we do that then as you can see the main axis is going from bottom to top currently right now and the crossaxis is left to right. Okay. And that is why this column is currently on the right side. So I will get back to the row layout currently row and we will discuss the third value which the flex wrap can take which is wrap reverse. Okay. So if I just do something like this as you can see. So we are having the flex direction set to row and the flex wrap set to wrap. Okay. And that is why what is happening the new row which is forming here because all of the elements cannot fit inside of a single row. It is on the bottom. So the new row is at the bottom. So now if we do something like wrap reverse hit save. Now what happens is that this is the first row 1 2 3 and the new row is at the top of the previous row. Basically the first row. Okay. So this is how we can change the direction of the newly created row or the column. So I know this is a little bit confusing but if we just do something like row reverse then this will happen. So what is happening here? So we are setting the flex direction to row reverse. That is why the main axis direction is right to left. Okay. So 1 2 3 4 5 6 and we have set the flex wrap to wrap reverse. That is why the newly created row because of the flex is now on top of the previous row or the first row. Okay. So we can do something like this or we can do the row reverse and then we can do something like column. So if I set the flex direction to column and the flex wrap to wrap this will happen. So the main axis direction is from top to bottom and the crossaxis direction is left to right. Okay, that is why the newly created column which is here, it is on the right side. Okay, now if we do something like wrap reverse, then what will happen? Can you guess? So the newly created column will be at the left side and this is the old column or the previous column, right? And if this is not confusing enough, we can do something like column reverse and hit save. And now the main axis direction is from bottom to top and the crossaxis direction is from right to left. All right. So this is the flex wrap CSS property. So before moving forward, what I'll do? I'll set this flex direction to row and the flex wrap to just wrap. Okay. All right. So now let's learn about the flex flow CSS property. So let's go to the MDN documentation. So the flex flow CSS shorthand property specifies the direction of a flex container as well as its wrapping behavior. So as you can see we have learned about the flex direction and the flex wrap CSS property right. So it is the shorthand property for these two. As you can see inside of the constituent properties we have the flex direction and then we have the flex wrap. Okay. So the flex flow property can take one single value row row reverse column and column reverse. If we set these values then it will indicate the flex direction property then it can have no wrap wrap or wrap reverse. So if we set these values then it will indicate the flex wrap properties right and then it can have two different values as well. The first value indicates the flex direction and the second value indicates the flex wrap. Okay. All right. So what I can do here inside of the code, I can just comment this thing out. And I can do something like flex flow. Okay. And now the first value will indicate the flex direction. Okay. So what I can do? I can do something like row. Something like that. And if I do that and go to my code, as you can see the flex direction is being set to row. Okay. Then I can do column. Okay. Now the flex direction is set to column. Okay. I can do something like row reverse. So it is setting the flex direction to row reverse. And then I can do column reverse as well. And this is setting the flex direction to column reverse. Okay. then I can do something like wrap. Okay, if I do that then this will happen. The plex wrap will set to wrap. So now as you can see our content is being wrapped around inside of the flex container. Okay. And I can set something like no wrap. If I do that then wrapping is disabled. Right. And then we can do something like wrap reverse as well. If we do that then the flex wrap is set to wrap reverse. Okay. So now this flex flow can take two different values as well. So the first value will be for the plex direction and the second value will be for the flex wrap. Okay. So what I can do I can set the flex direction to row and flex wrap to wrap. Okay, just like these two lines. Okay, so basically we can do the same thing as these two lines are doing inside of a single line by using the flex flow CSS shorthand property. Okay. So, I'll just comment this thing out and hit save. And as you can see right now, our flex direction is row and flex wrap is set to wrap. I can set the flex direction to column. Okay. So then our flex direction is set to column and flex wrap is set to wrap. We can do something like wrap reverse as well. Okay. So this is what happens. So the first value for the flex flow is indicating the flex direction and the second value inside of the flex flow is indicating the flex wrap. Okay. So what I'll do I'll just get rid of that and I will just do something like column reverse and wrap. So if I do that then this will happen which is expected right? We have seen the main axis is going from bottom to top and the cross-axis is going from left to right. Okay. So what I'll do I'll just get rid of that and I will just set the flex direction to row and the flex wrap to wrap. Okay. All right. So this is the flex blow CSS shorthand property. All right. Now we will learn about the justify content CSS property. Before doing so, what I'll do? I'll just comment out the flex flow. I'll uncomment that and only comment out the flex wrap. And we have these ones. So let me just decrease the height and the width. Okay. So that is there and that is there. So we have 200 pixels of height and the width. Hit save and okay. All right. And for the height, I'll comment that thing out as well for now. So, as you can see, there we go. This is the default behavior which we want. Okay. The flex direction is set to row and we have the six elements with 200 pixels of width. Okay. All right. So now let's go to the justify content documentation and see the justify content CSS property defines how the browser distributes space between and around content items along the main axis of a flex container and the inline axis of a grid or multiol containers. We are not talking about grid right now. We are talking about flexbox. Okay. So this is important. So the justify content CSS property basically determines how the space will be distributed among the flex items in the main axis. Okay. So as you can see we have some of the space and by default the justify content has the value of flex start. Okay. So what I'll do I'll go here and inside of the container I will do justify content and do flex start and this is the default value as you can see nothing happens. Okay. And please remember the direction of our content. Okay. The direction is from left to right. 1 2 3 4 5 6. Okay. And all of the space is at the right side which is left over space. Right. Now we can do something like flex end as well. If I do that then as you can see all of the content is now pushed in the right side and all of the leftover space is now on the left side. Okay. Now you might be thinking like hey I can do something similar with the flex direction property as well. Okay. So if I just get rid of that. Okay. and do flex direction to row reverse then this will happen right all of the content is now at the right side but there is a distinct difference because as you can see the direction of the content is changed so currently one is at the right side so 1 2 3 4 5 6 but if we do the flex direction to something like row and we will uncomment the justify content to flex end then as you can see the direction of our content is preserved. Okay, it is not changed and all of the content is at the right side currently right now and all of the leftover space is at the left side. Okay, then we have some different values as well. So we can have the space between space around and space evenly. We will see all of this in action. So first of all let's see the space between. So justify content to space between hit save. Now as you can see all of these elements are now at the right edge and the left edge and all of the leftover space is now equally distributed between all of the flex elements. Okay. So this is what space between does. So it distributes all of the space between all of the elements and our first and the last element here is at the edge. There is no space between the border and our elements. Okay. All right. Then we can have something like space around. Okay. Hit save. Now as you can see what is happening. All of the space which we had previously is now distributed equally around the main axis of each of the flex items. So on the left side of the first item we have some space. On the right side of the first item we have some space. On the left side of the second item we have some space. On the right side of the second item we have some space and so on. Okay. As you can see at the last element we have some space on the left side and we have some space on the right side. Then we have the just by content to space evenly. So if we do that it is similar to space around but there is the difference. So as you can see there is some space between the border and this particular first element but all of the space here now are equal. So this space between the border and the first element is equal to the space between the first element and the second element and so on. And also there is the equal amount of space between the last element and the border as well. Okay. So this is the space evenly. Okay. Then all of the things which we have seen we can do inside of the flex direction to column as well. So if I do column and I will just uncomment the height and do something like flex start to start with. So this is what it looks. Okay. So all of the elements are now at the top edge and it is going from top to bottom. Okay. Then what we can do? We can do flex end as well. Okay. If we do that now this will happen all of the elements are now at the bottom right. There is no space at the bottom and all of the free space is at the top. Why is that? Because the main axis is going from top to bottom. Okay. Then we can do justify content to space around or space between first. Okay. Space between. Then we have no space between the border and the first element and the border and the last element. But all of the space is now distributed equally between all of the elements. Okay. Then we can do space around. Okay, if we do that then on the top of the first element we have some space on the bottom of the first element we have some space on the top of the second element we have some space at the bottom of the second element we have some space and so on and we have some space on the top of the last element and we have some space on the bottom of the last element okay then we can do something like space evenly then you know what will happen all of the space will become equal. So this space between the border and the first element is equal to the space between the first element and the second element and so on. Okay. All right. So this is how we use the justify content. Now what I'll do I will enable the wrap and I will do the flex direction to row. Okay. And I will make these elements of something like 500 pixels of width not the height. Okay. The height should be 200 pixel and the width should be 500 pixels. Okay. All right. If I do that then as you can see we have two different rows currently right now and we have the wrapping and for each of the rows we are having equal amount of space between all of the elements and the border. Why is that? Because we have justify content to space evenly. We can do something like flex start. Okay. And so on. All right. So one of the other values which justify content can have is the value of center. Okay. And this is very very helpful if we want to center the elements along the main axis of the flex container. Okay. If we do that now everything is at the center and the leftover space which we had previously is now distributed at the left and the right. Okay. So this is how justify content center works. And if we do flex direction to column, hit save. Now we have the justify content set to center. That is why we have some space at the top. We have some space at the bottom. And all of the content is now centered along the main axis. Okay. So in this way we can center the elements along the main axis. And we can do that quite easily as well. If I just comment out all of these elements and we will have only one element. So this element is now perfectly centered vertically. And if we just set the flex direction to row then this element will be perfectly centered horizontally. Okay. All right. So now what we can do as well we can turn on the flex wrap. So I can do something like flex wrap to wrap and I can set the width to something like 450 pixels. Okay, hit save. Now we have the justify content set to center and that is why it is happening. Right? So all of the elements are now wrapped. The elements are wrapped inside of a separate rows. Right? And each of the rows have justifi content set to center. Okay. That is why there is some space at the start of the second row and there is some space at the end of the second row. All right. Okay. So we can do something like flex start as well. If we do that this will happen. Okay. Then we can do flex end. Okay. So this will happen. So everything is now at the right side. We can do space space between. So each of the rows will follow the space between rule for the justify content. Okay. Then we can do space around. So each of the element will have equal amount of space around them right. So on the left and the right. Okay. And also we can do something like space evenly. Okay. If we do that this will happen. So equal amount of space between the border and the first element and the rest of the elements and at last here as well at the uh between the last element and the border. And same goes for the second row. Okay. Now we can do something like flex direction to column and we can set the height to 450 as well. Okay. All right. So if we do that then this will happen. So we have multiple columns and each of the columns will follow the justify content value as well. So currently it is set to space evenly. So what I can do? I can do flex start. Hit save. So this will happen. Okay. Then I can do flex end. So all of the elements are now at the bottom. Okay. For the first column and the second column. Then we can do space between. So for each of the columns there is no gap between the border and the first element here. For this one and for this one as well. And all of the space for each column is now equally distributed between all of the elements. Okay. Then we can do space between. We can do space evenly as well. Okay. So as you can see even amount of space between the border and the first element and between the first element and the second element and so on. Okay. And then we can do space around as well. Okay. So this will happen. So equal amount of space on the top and the bottom for each of the elements here. All right. So this is basically the justify content CSS property. All right. Now we will learn about the align items CSS property. So to do so, I'll do the justify content to center. And I will just get rid of this and set it to 200 pixels of height and 200 pixels of width. Hit save and go to the browser. Okay. So that is column currently right now. So set it to row and hit save. So now that is what it is. Okay. Now if we go to this blog post here it is described quite easily here. The align items property handles the alignment of flex items on the crossaxis of the flex container. It can take any of these values which we will see. Okay. And here in the MDN documentation what it is saying. So the CSS align items property sets the align self value on all direct children as a group. We will learn about the align self property in a bit. Okay. In flexbox it controls the alignment of the items on the crossaxis. Okay. And in grid layout it controls the alignment of the items on the block axis within their grid areas. So we are currently learning about flexbox. So we have to worry about this particular line like it controls the alignment of the items on the crossaxis. Okay. All right. So what I'll do I'll go here and what I'll do I'll just comment out the height for these elements. Okay. For the boxes. So what do you think happens? This is a little bit tricky one because this will happen because the by default align items property value is set to stretch. So I can show it to you as well. So if I go here and do align items and set to stretch. Okay, hit it. Now this is what happens. But if we set the height manually then the flex box respects the height. Okay. So now it is 200 pixels. Okay. Then we can have the flex start as well. If we do that then what will happen? So what exactly is our main axis? Our main axis is going from left to right. What is our crossaxis? Our crossaxis is going from top to bottom. So flex start will align all of the items on the top. Okay. Then we can do something like flex end as well. If we do that then all of the elements will align to the end of the crossaxis. Okay. All right. Then what I'll do? I'll do something like stretch which is the default value. And I will do the flex direction. I will set it to column. Okay. Hit save. And I will just get rid of the width. So what do you think happens? So this will happen because by default the align items value is set to stretch. Okay. So this happens. So we can do something like flex start as well. If we do that and if we just make this width available. So this will happen. So our main axis is now going from top to bottom. Our crossaxis from left to right. Then we can do flex end as well. Okay. If we do that then this will happen. Okay. All right. Then we have the most important thing which is called center. Okay. We can have it to the center as well. If we do that then all of the elements will be centered. And if we just do something like flex direction to row as well the row will be centered. Okay. So in this way by using the justify content and align items we can center an element inside of a flex container. Okay. Also I can show it to you if I just comment out all of the elements here. So now this particular element is centered perfectly horizontally and vertically. And this is regardless of the size because if I just make the width uh something like 2,000 pixels then this element is also centered. So it is independent of the width and the height of the container. Okay. So I'll just add it to 1,600 pixels. Okay. So we can do that. And also we can set the flex direction to column as well. Okay, if we do that. So, okay, there is only one element. So, I'll just uncomment these things. Mhm. All right. And we have the flex wrap set to wrap. Right. So if I just decrease the width to or the height basically to something like 800 pixels something like that then this will happen and if we do something like align items to flex start. Mhm. Then this will happen. So why it is happening? So we are having the flex wrap set to wrap. That is why our content is wrapping into another column and we have set the align items to flex start. So what is our main axis? Our main axis is going from top to bottom. What is our crossaxis? Our crossaxis is going from left to right. So this particular column is at the start of the container and this particular column is at the start at the middle. Right? So this particular column is starting from the middle. So that is what is happening. Okay. Then we can do something like flex end as well. So if we do that this will happen. So this particular column will end at the middle. So what you can think of like our container is divided into two different parts. You can think of like that. And each of the part is now independently controlled by the justify content and the align items properties. Okay. So all right. So this is line items CSS property. All right. So now we will learn about the align content CSS property. Okay. So to do so what I'll do I'll set the align items to center and we have to turn on the flex wrap in order to work with the align content CSS property. Okay. And also I'll do flex direction to row. Okay. Now I will set the height of the container to 800 pixels and the width of the container to 800 pixels as well. Okay. All right. So now this happens right. So everything is centered right now. So now here we are having two different rows. Okay. So how we can control the space between and around these rows? We can control the space between and around these rows by using the align content CSS property. Okay. So if I go to the blog post here by free codec cam. So when you have a flex container with wrap. Okay. As I have mentioned or more than one flex line you may need to align the lines to distribute the space as you want. Right? That is when you use align content. And here on the MDN it is saying the CSS align content property sets the distribution of the space between and around content items along the flexboxes crossaxis or a grid or block level elements block axis. Now in order to use the align content CSS property, we have to turn on the flex wrap which we did right we are setting the flex wrap to wrap and we have two different rows currently right now. So now what I can do I can go here and do align content and we can do something like flex start. If we do that now what happens is all of the space