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
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
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.
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
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.