Why To Use Flex box and How To Use Flex box

Hello and welcome back once again.

In the previous lesson, we learned about the basic properties of the Flexbox when we haven’t really

provided any individual to each of the child elements.

We just learned about how setting the display property of flex can let us bring the elements on the

same line and can also let us change the proportions of the vote of each of them.

We also learned about the older property and we can change the order of the div elements and us also

learned about the align property to control the height of each of the elements.

Now to this point, there wasn’t any individual word given to the child elements so here in this lesson

I’m going to explain to some more properties in flax box that generally come into picture when we have

a certain word was given to each of the individual child elements.

So here I have added just a set of another few div elements.

It’s a replica of the same and here.

I have given the second div a class of container 2.

We can see over here in each of the boxes has now a class of container box one container box 2 and container

box 3.

So here if I go over to each of the tile elements I am targeting all the child elements inside the container

too and then I said a certain word of let’s say 30 percent, not 30 percent plus 30 percent plus 30 percent

since we have 3D of child elements that are going to add up to 90 percent.

So if I refresh now then sure we can see that each of them has now a rate of 30 percent and there is

some space over the right.

If we see that more clearly let’s reduce it to 25 percent.

And if I refresh now then we can see that now all the elements and only tail here and we still have

some space towards the right.

Now here in this case let’s say we want to add some margin between each of the tile elements.

All we have to do is add inside the parent container where we have provided a display property or flex.

We can set justified content.

And this is another property for justifying all the content Horizonte.

Just like we have a line item for the vertical alignment like we can set it to a flex-start for top

line and the height of each element would be as much as the content size and we can set flex and to

align them at the bottom or center to align them at the center but all that vertically using that justified

the content we can align them horizontally.

This is usually visible when we have a certain word given to each of the child elements just like we

did so justified content.

And I if I said it to let’s say flex-start and this is also the default one.

If I refresh they are going to be from the start that is from the left.

If I make it flex end and refresh they have now come to the end.

To the right and if I make it center and refresh then they have come to the center.

Now coming back to the question of how we can add margins to them and equal margins and within this justified

the content we get an option called space between.

So when we use the space between than what it does is it adds some space which is like the margin between

each of the elements.

So if I refresh now then we can see some space and it always makes sure that that the extreme

left and the extreme right element is always in line with the top and the bottom elements and we can

see that it’s purely in line and now there’s another option called space around.

And yet, in this case, there will not just be the margin between the elements but also around the elements

on the left side as well we are going to see some margins.

And if I refresh Now then here we can see that it always and shows that there is an uneven distribution

of the space or the margin around the elements or between the elements.

So we can make use of it to do so now.

Here we see that we have set a certain rate of 25 percent which is kind of less than the size of the

window.

But if I increase the size to let’s say maybe 40 percent.

Now in this case, if I added fresh then this is the size right.

Let’s just remove the space around justified content for now and refreshments again.

Then this is the size of a share.

But 40 percent plus 40 percent and 40 percent sums up to 120 percent.

Then why is that?

These three elements are still coming on the same line.

This is something wrong.

If I increase the size to 60 percent of each life and refreshed then we see that at a certain

point it has stopped increasing the weight of the elements so that the old come on the same line and

that is happening because there is another property which is called a flex lap and that is by default

set to no wrap.

So it’s not wrapping around it’s bringing them on the same flight so we can modify that to fit

them to bring the next one coming on the next line because the problem here is that at 13 different

screen sizes the column which reduces to accommodate the content so in this case what we can

do is we can again go to our parent container and then here inside we can set

flex-wrap property to wrap.

And now if I refresh then we can see that the next two items have come on the next line because 40 percent

is way too much for fitting the two elements and we also have provided some padding which kind of increases

the overall size of the box.

So if I let’s say make it we know that from the early lessons as well that when we are adding some

padding and some weight then we can also set the box-sizing to broader box so that the padding size

and the border size is always included within the weight.

So this weight of 60 percent and let’s reduce it to 40 percent.

So this weight of 40 percent is going to include these 10 pixels on left and right and border pixels

as well.

So if I refresh now then we can see that these two boxes that come on the same line and the next one

has come on the next line because there’s not enough space for that.

But if I increase the size let me increase the size of the window instead then, of course, this third

in weight.

So we can mention them in pixels as well or we can use various media queries instead of

using the word property we can use another property called flag spaces it means the same overshare.

If I refresh it’s the same thing.

But it’s a flexbox way of providing the weight so when we are giving a word for each of the Flexbox

we can refer to them as flex spaces and this is how we have it.

And then I can combine it with the justified content property and this one will add some space around

and if I may be said space between and refresh then they will be like this on the extreme sides

so let’s just remove the word for now and refresh

change the flag step as well.

Now another property we have is flex CO and likewise flex-shrink.

So generally happens is when we are reducing or increasing the size of the window then the items they

either increase in size or reduce in size and to you that I let’s say the Flex shitting property to

this first child element and then I said the value as let’s say zero.

So the value of zero means this element will not shrink in size no matter how much bigger or smaller

the size of the screen.

So if I refresh now then I can see that the first container doesn’t shrink in size and the other two

have now shifted towards the right.

If I increase the size of the window and this is how they look on our big screen and if I reduce the

size and this is how they look and likewise, I can provide the Flex string to each of them as well and

I refresh once again then we can still see that all of them have now stopped shrinking at a certain

rate.

If I make it let’s say 1 for the second one and if I refresh now then here we can see that the second

one shrinks in size with the third one and the first one does not shrink in size.

So just like the shrink, we have the growth low property flex growth.

So if I said for the first one.

The Flex growth CDO and refresh and we can see that the first one doesn’t go.

It remains of the same size.

And then the second one.

Also, I can say to the Flex grow as let’s say 1 and then for the third one I want to set the Flex to grow

as again CDO

so this was pretty much about the flexbox using the Flex walks we can align the elements horizontally

or we can align them modestly or we can also set their height according to the sizes.

And before we finish I would also like to show you another very nice use of the Flexbox.

So let’s say here we have a def container let’s add a div container once more and then inside this container

let’s say we have a heading of just a text let’s say div or let’s say simply heading

and I give this one class of let’s say container three

and if I go to the style sheet and then I target dot container three and then inside I want to set a

a certain weight of let’s say 100 pixels and height of hundred pixels and if I refresh Now then here we

have the heading.

So let’s add some background color as well.

Of let’s say tomato.

And if I refresh now then this is how we have it.

And the challenge that we face normally when we have certain thing let’s increase the size a little

a bit more let’s make it 200 by 200 pixels and refresh.

Now the biggest challenge that we face normally when we have some text inside is to center that both horizontally

and vertically to center that horizontally we know that we can simply use a Texas line property and

set it to center.

But to align vertically we can make use of the Flexbox here.

So all we have to do is we have to set the display property or flex for this one.

And if I refresh.

Now, this is all we have to head over here.

And the reason why it comes down because the heading H2 by default has some margins.

And when we said the property is flex it also helps us in preventing the margin collapse which generally

happens when we are using floats or when we are simply using heading inside a div container it generally

happens so the floor to flex folks always make sure that all the elements are inside and it doesn’t

really collapsed the height of the parent element and nowhere all we have to do is we have to simply

use a line item property.

And here we can set it to center and we know that this will center the elements vertically and then

hereafter that we can simply use to justify-content which we use for aligning the elements horizontally.

And here also I can use the property center value as the center and if I refresh now and we have brought

it at the center of the element.

If we had gone the traditional way we may have faced a lot of challenges to do so and depending

upon the different kinds of elements we may sometimes have to use the position option and set it to absolute.

We can also use translate properties for that.

But this one is more useful as this will always make sure that it is at the center of the element no

matter how big or small the size is.

So this was about the flexbox.

Again it’s an optional property that we can use overshare if we want to simplify our coding but

if we are already more comfortable using the basic ways the traditional ways then you can do that as

well.

It’s just another option that was given just to make it easier for us to code and to create layouts

like that but in the next lesson I’m going to try to use flexbox for creating a custom layout so see

you in the next lesson.

Leave a Reply

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