What is Flex Box and How to Use It

Flex Box

Hello and welcome back.

In this lesson, I’m going to explain to you how the Flex works for folks with a very simple example.

And for that example, I have added active element with a class of container and that div has three child

if containers inside with a class of box Fun Box 2 and box 3 and we can see them all here as well.

I have added some basic properties to them which is the padding and the background color.

Now in order to make the parent element, a flexbox all we need to do is add a line of code which is

display flex so we target the parent container div which is with the class of container and then inside

I add the display property and set it to flex.

Now as I’ve added this display property or flex to this container div all the chain elements are now

going to line up on the same line.

So if I refresh now and we can see that without even having to use any float property or setting the

display property of each individual element to inline-block we are able to bring all of them on the

same line.

And that’s happening because of another property which is flex-direction and that’s by default set to

set to roll which means horizontal.

So if I refresh now it looks the same.

If I change it to a column and refresh once again then they become stacked like this in the form of a column

so let me change it back to the row and refresh once again.

So here we can see that we don’t have to provide any word.

We don’t have to provide any height or we don’t even have to use any float or display inline property.

In order to bring them on the same line and another important thing to note here is that they are responsive

as well.

So if I increase the size of the window or reduce the size of the window they respond to the screen


Now, of course at certain screen sizes, we may not really want these columns to shrink any more.

So for that what we can do is we can simply use a media query and in that media query we can set the

flags that action to the column but for now we are going to be keeping it like this and I can just get rid

of this line because it’s by default set to row.

Flex Box

So if I refresh nothing changes this line works fine alone.

Another thing that we see over here is that these three containers don’t really have the same weight.

The second one which has a larger content does have a larger size as well as we can see overshare.

Now if you want to give each of the child element the same weight in that case we can simply use another

properties flex.

And remember that each property that I’m adding now is going to be a secondary property.

The first property is display flex.

If we don’t add this line then nothing’s gonna work because all these properties are specific to the

Flexbox and we have created the Flexbox only by adding this line display flex nowhere I’m not gonna

be adding it at a parent level because we are trying to give a certain word for each individual child

an element so here in this case I’m going to target each child element.

I already have them over here but one property of background color.

Let’s make some space over there for each one of them and then for the first one I’m going to set the

flex one and then for the second one.

Also, I’m going to use the same value and for the third one as well I’m using the same value we generally

use it when we are not providing any word for each of the tile elements.

And what we are doing with this is we are setting a ratio one is two one is to one for each of the tiles


So now when we have said one is two 1 then they are all going to be having the same word.

So if I save it and then I refresh and we can see that all of them have the same word even when this

div and this div do have a lesser content size they still have the same right over here.

Now we can play around with these ratios as well but it’s important to add the flex one to each of the

title elements or you can add another property but all that has to be the same.

Even if I make it flex to flex 2 and flex 2 then also the size is going to remain the same as we can

see over here because they all have the same ratio I change them back to 1 1 and 1 and now for the second

one let’s say I want to increase it to 2.

Now this one is gonna have double the size double the weight.

I would say if I refresh Now then here we can see that now the ratio is 1 1 and 2 and if I change this

flex to 1 here and increase it over here and refresh once again and here we can see that this one is

now twice the weight of the other two.

So this is quite important when we are trying to set a ratio for the size of them and it’s gonna stay

the same even if we increase or reduce the size of the window as we can see overshare another useful

feature of the Flexbox is that we can also change the order without even having to change the HDMI


So here for instance, if I give this one order of let’s say 1 again I’m going to use the same order

value for all the treaties so that I give them a basic order like this.

And if I refresh now they are all the same but if I give the second one order of let’s say three

and if I refresh now and we can see that the second box has now become the third child and if I made

this one order of let’s said this is already at the second place right now if I make it an order of

1 and I set the order for the first one second and if I refresh now then we can see that the first one

the first div has now got the second order.

The second date has now got the third one and the third one has now caught the first order so we can

also, change their orders as well using this order property let me just comment that out for now let

I just comment each and everything out including the flex

so we are now back to our div containers as we can see are we sure that the content of the second div

are ending over here which stretches all the way to the same height that the other two div have.

So the Flexbox by default it shows that all the child elements do have the same height.

Even if the content size is different.

So if you want the size to be as much as the size of the content then what we can do over here is we

can again target the parent div container and we can use the property called line items and we have

various different options so we share.

So if we set it to flex-start this time it’s going to be starting from the top and will be as much

as the size of the content in height.

So if I refresh now I can see that the second one whose content is ending only up to here has now a

lower height and by default there a line on the top.

So flexed out align them on the top vertically and if I make it flex and then they will be aligned at

the bottom and if I refresh now it is now aligned at the bottom over here.

And if I make it center and refresh then it has now come to the center and the default property is stretch

and this one effect is the size of the cone the size of the container as much as the other containers.

If I refresh and here we can see that now this is a very basic example just to get started and it’s

kind of easy right.

We just have to use the display property or flex over here on the parent container and we can control

which direction will they be either on the row side or on the column side and then we can also align

the items and we can also change their route and the order of the elements in the next lesson we are

going to learn about a few more properties of the Flexbox.

Leave a Reply

Your email address will not be published. Required fields are marked *