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 😊
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,Personal Portfolios, Fullstack Blogging website, Amazing Headers Animations and much more. If that excites you, you can visit my channel.
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.
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.
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.
h1{
display: none;
}
The above code will hide the the h1 element. So can we use flex like this.
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
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.
Align Items
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.
Flex Wrap
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.
Flex Direction
Now, flex-direction its very simple, its just change the flow of flex box.
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.
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.
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 😉
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.
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 😊
Top comments (2)
Great article. However flexboxes are not limited to that, there are lots of other great properties to manage the size of each element with
flexor other properties likeflex-grow,flex-shrinkorflex-basis...Yes, that's why I linked my another article covering these properties in the blog