Hello everyone and welcome back to our bootstrap course and this lecture we're going to be looking at
more values that we can said using the Flex box bootstrap class.
Now there are many different values and properties that you can set using flex not just flex row and
not just align items justify content et cetera but there are many that you can use.
So we're gonna be looking at just a few.
In this lecture and I definitely challenge and encourage you to look up more as you need them you will
find the best ones that you need for your specific project.
But it's good to have a general overview of how they're used in general so that way you can be able
to use whichever ones you want as you need them.
So let's go ahead and start with an example I've just deleted all the code from the previous lecture
because it was an example and you can find it all in the source code as well.
OK.
We're going to start off a building a class and it's going to be display flex and we'll go ahead and
close off this div as well.
Let's go ahead and give it a background color and give it a background of secondary and in here we're
going to put in items.
So I'm going to put in first one item we can call it item 1.
And as you can see it will immediately take up all of the text and all of the space of the div rather
I'm going to give it some padding.
So this way it is more from the edge here and as well I'm going to give it a color so we can see how
much with it has.
So we do it background primary and there we go.
The background is great.
And the first item will take up just the default pixel size for each item.
Let's go ahead and copy this to make a few more just like this and three item two we're gonna give this
background color dark.
Okay.
So now we have a few items and we can also give them the text white property.
Notice how when we use set the text white on the entire containing div it changes the text color of
all the items inside as well so that you don't have to do them all individually.
Okay.
So now we have these items.
Let's go ahead and look at some more values that we can put onto them what we can do is put on what
is known as growing and shrinking.
Let's go ahead and test this out.
So we're going to give the grow property on to item one here.
Now this is another bootstrap class called flex grow one.
There's also flex grow 0 which is the default.
And then there's flex grow one.
So you'll notice as soon as I put flex grow one on to item one there is no more grey color here because
the items now take up all the space but you'll notice that item 1 is slightly bigger than Item 2 and
item 3.
So what is happening here.
Well by putting flex grow one it means that this item will take up all of the possible space of the
div except for however much item two an item three need.
So item two an item three will take up their minimum required space and item one will take up the rest
of the space if we did not have flex grow one if we had flex grow zero then this would be the default
which is that they all take up an even amount of space and there's even this little bit of space left
over.
Okay great.
So if you put flex grow one that is what it looks like on item one and you can see as I stretched out
the screen item to an item three do not change in size but item one grows as the name goes.
It grows to become bigger as the div size gets bigger the div is still its entire width here and item
one takes up as much as it can.
Similarly to grow there is also shrink.
So if we put shrink on to the item one instead of grow I can see they are the same size.
However if they are needed to be more space for the other values then the item one would shrink to allow
space for the other ones.
So what we want to do is set the width of the other two to be a bit bigger.
And this should force the other one to shrink.
Yes.
There you go.
Now you can see the div size is still the same it's a hundred percent of the width.
Minus this padding on the side but item to an item three are bigger than item one because we hard set
their widths to 100 using Bootstrap here.
This is the bootstrap class with 100 which lets you set the width.
Similarly you can do each 100 to set the height and because these need 100 pixels.
Now as you can see item one will shrink to make space for the other two items okay or 100 percent here.
Okay great.
So now you know about growing and shrinking and these two are valuable because you may not content to
grow and shrink for responsiblity on a smaller screen vs. the larger screen.
You may want to keep one item small while the other two should grow or shrink depending on the requirements.
The other value went to look at.
In this lecture is going to be Phil.
Phil is similar to grow and shrink in that it will set the size of content responsibly.
So rather than hard setting the size of item one we set it to be dependent on the width of other content.
Let's look at how we can use flex.
Phil something got to do is remove the Flex shrink value for simplicity's sake and so we can understand
and wants to go into a movie with 100 value.
So we don't confuse any of the classes.
So now we're just back to our basic flex div.
And notice I didn't even make it a flex row but these are automatically put in two rows as the default
for the Flex box property.
Okay.
So I have my three items here and now go to add flex filled to them.
So I'm going to put flex fill just like that.
Now you'll notice item 1 is filling up the remaining content loops.
So this is similar to flex grow because it is growing but it is growing specifically to fill the rest
of the content rather than in comparison to the other ones.
Let's put flex Phil onto item 2 as well.
And now you'll see these two will grow and item three you can put flex fill.
And now all three will grow.
Whereas if we put something like flex row one and flex grow one and flex grow one on two all three.
They would also grow as well.
And if we removed flex grow one from the third item the two will grow.
Then item three would stay the same size.
So as you can see that is similar to having the Flex grow property as well but this will force their
width to be equal to their content while taking up all the available horizontal space.
So now you know about flex grow and flex shrink as well as flex fill.
And these are all different ways of sizing your values using flex box.
Thank you all for watching and I challenge you to try to play around with different divs not only rows
but also columns so you can make a flex column and then see how the growing and shrinking would affect
that.
Remember when you're working with columns you'll then have to set the height of the column.
Otherwise the items will take up 100 percent of the height of the column.
And so you won't see any differences because the items are this tall.
So they have nowhere to move inside.
Okay.
Thank you all for watching.
Thank you for making it this far.
And we will see you in the next lecture.