Everything you need to know about flex box. Make awesome websites
Tags: html, css, beginners, webdev
Published: 2022-01-01 17:38:20

No matter you are a beginner or pro. If you want to make extraordinary Web sites. If you want make amazing UI/UX, then you must read this advance CSS series article. In this article, we’ll talk about CSS flex box. Flex box is important in CSS and with this we can make any sort of web site easily. If you follow this CSS series believe me you’ll be able to make amazing websites as I do. In today’s article, you will learn about flex box, and its use cases, and some of its properties. So let's quickly jump into it.

#Video Explanation
You can also watch the video explanation 😊
{% youtube RXRGbPQHy9w %}

#Who I am ?

Before we start, if you don't know me. Well, I am Kunaal from India manage Modern Web YouTube channel. I make content on web development to master your web dev skills, I made tutorials on [Fullstack Ecom website](https://www.youtube.com/playlist?list=PLqm86YkewF6S45smPYeNv01aFFKWZSgYD),[Personal Portfolios](https://www.youtube.com/playlist?list=PLqm86YkewF6QS_knm-9-dc4tTKgbQI-zZ), [Fullstack Blogging website](https://www.youtube.com/playlist?list=PLqm86YkewF6RU_k6jymVX7EavJ1w9i4VW), [Amazing Headers Animations](https://www.youtube.com/playlist?list=PLqm86YkewF6TEYXEoyVUdDmmIEJ1TzORZ) and much more. If that excites you, you can visit my [channel](https://www.youtube.com/channel/UCoygqHsdILWZFlfI5RMC-dw/).

Let's start now.

#What is Flex box & Why we need it.

Well before we see how we can use flex box. I guess its important that we see why we need it. In my perspective this is the best way to learn.

![CSS Flex Box](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/48a95zt8s9mhn7jhliac.png)
 
You can see the above illustration, in that you can clearly see even though my H1 element is covering the blue part only, but still it has full width and covering the whole space the red part. And because of that the `p` element is coming below the `h1`. Well this is happening because, in HTML almost every elements are considered as a HTML block. And because of it they have full width. 

But what if, I want to make the elements side by side. Well I said all the elements are like a block, so can't we make them side by side. Well for exactly this purpose, we have `flex box` in CSS.

![CSS Flex Box](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ucth5lyb6ukfc4zx1771.png)
 
#How to use flex box ?

So once we know when we need to use flex box. Then we can see how to use it. So in CSS, we access or use flex box using `display: flex`.

Well, if you ever used `display` property in CSS. You know we give it directly to the element. What do I mean with that ?

ummm! I mean for instance, If I want to hide any element let say `h1` element. Then I will use `display:none`.

```CSS
h1{
   display: none;
}
```
The above code will hide the the `h1` element. So can we use `flex` like this. 

![CSS Flex Box](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iag0u2woab9i5lbyzpd9.png)
 
Well, even though we use `flex box` using `display` property. We don't give this directly to the element. We give this to the nearest parent element. You can see in above illustration, both `h1` and `p` elements, have a common **nearest** parent element which is `body` element. So we will give `display:  flex` to body element. I hope you understand because it is very important, most people forget this all the time that they should add `display: flex` to the nearest parent.

Now, let's see some if its properties cause without the properties, It'll not be fun to use flex box.

#Justify Content

![CSS Flex box](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ms234kd6wif4ueuc5iq.png)
 
Justify content property is used to align the children in `horizontal` axis. You can refer to the above image.

Let's see some of its value. And of course we give this to nearest parent element.

![Frame 3 (1)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/neg8xsb0ogu5ocr9dh1z.png)

#Align Items

![CSS Flex Box](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/njyzj106wpaic4khck2a.png)
 
Well, on side justify content place children in X axis, so `align-items` place the children in Y axis. You can refer the above image.

Some of it's properties.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eg7094aql8asnsxa5783.png)

#Flex Wrap

![CSS Flex Box](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8dowxq56i21nuk0m4nj4.png)

The main reason of using `flex` is responsiveness, so how can achieve that. Well `flex-wrap` basically wraps or break the flow of flex box. making the website responsive.

![Frame 2 (7)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vhm0q8lcmuc26f0h1cy2.png) 

#Flex Direction

![CSS flex Box](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rkvz2rfsst737n2zgl28.png)

Now, `flex-direction` its very simple, its just change the flow of flex box. 

![Frame 1 (2)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cyzjpgc2m3ha9m2464tu.png) 

#Some other properties.

Up until now, all the properties we saw, we give them to nearest parent. But we have some more properties which we give directly to the children or specific element.

![CSS Flex Box](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/356z1ouoozaxe8xnquqe.png)
 
The above properties not use more often, that's why I am not telling you, but if you want you can check them in my other article [here](https://dev.to/kunaal438/display-flex-complete-guide-on-css-flex-box-2021-5bi2).

#Wrap up

So, that's it. That was all about CSS Flex box. If you liked the article and found it helpful, make sure sure to follow me and you can also show your appreciation by simply subscribing my youtube channel. I make awesome web dev content though 😉

<a href="https://www.youtube.com/c/modern_web?sub_confirmation=1"><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jeitpawvax07cx7r9yoa.png"></a>

So, As I decided to make advance CSS series, then I will do it on my style. And according to me its not enough that I'll tell you how to use it. You also have to practice it. For that, I made 3 designs for you that you can make using flex box for practice. 

[Design 1](https://drive.google.com/file/d/1hyTfvacx0vMgMw-1HQ7pqR1xbRyn9chf/view?usp=sharing), [Design 2](https://drive.google.com/file/d/1pq95M4STxs2FvkYIJEhpLQCtb6g28uCV/view?usp=sharing), [Design 3](https://drive.google.com/file/d/1U8YchJTx0Yjx_8OdGrbikNAfhg8eIYNf/view?usp=sharing)

Well, make sure you code the above designs, it will motivate me to continue this CSS series. And make sure to submit it to me by tagging me on my instagram `@modern_web_channel`

If you stuck anywhere, or have any doubt feel free to ask me. 

Thanks for reading 😊

#Articles you may find Useful

1. [Best CSS Effect](https://dev.to/kunaal438/css-the-best-css-effects-of-all-time-most-underrated-web-ux-2chj)
2. [Infinte CSS loader](https://dev.to/kunaal438/quick-css-make-infinity-loading-animation-for-your-next-website-187k)
3. [Disney+ Clone](https://dev.to/kunaal438/how-to-create-disney-plus-clone-for-beginner-in-2021-html-css-js-m3p)
4. [Youtube API - Youtube Clone](https://dev.to/kunaal438/create-working-youtube-clone-with-search-box-youtube-api-2a6e)
5. [TMDB - Netflix Clone](https://dev.to/kunaal438/how-to-create-netflix-clone-netflix-clone-with-hmtl-css-js-989)