-: Let's now learn the basics of the flex property
which is the property that we use
in order to actually size flex items.
And remember how I showed you
in the flex box property overview
how the flex property is actually a short end
for flex grow,
flex shrink,
and flex spaces.
And so let's not talk
about each one of these three one by one.
And to start, actually, let me write that down here
because this is really important to keep in mind.
So removing this, let me just write that here.
And also the default value.
So the default for flex grow is 0.
For flex shrink, it is 1.
And for flex bases it's auto.
So let's create a comment here, comment all of this out.
Then here I will write defaults.
And so like this, we can keep this here handy to check
out this information in case we need it.
And let's actually now start with flex bases.
So when we want to size flex items and in particular
with a width, then we usually do not use the width property
but instead we use flex bases.
So let's say we want these elements to have a width
of 100 pixels.
Then as I said, we use flex bases and set that to our width.
So let's see.
And what happened here is that now some
of these elements do actually have a width of 100 pixels
but when the content is larger than 100 pixels
then the element actually extends to fit that content.
So let's inspect that here, here with the box model.
And actually even this element is not 100 pixels wide.
So let's remove the gap that we have here to
give ourselves some more space now.
Okay? And so that looks a lot better.
So this one is now 100 pixels, this one is 2.
So is this and this, but then amazing is 120 pixels
and languages is even bigger at almost 150 pixels.
So what this means is that flex spaces is not really rigid.
So it's more like a recommendation that we make
to the browser, but the browser will then based
on the content, figure out the optimal length.
Alright? And let's see what happens
if we actually make this like really big
like let's say 200 pixels, give it a safe
and to see this effect a bit better.
Let's actually turn off this last element here.
All right?
And so you see
that these three elements are the same size, I think.
So HTML is 140, 140, 140
and in fact all of them are 140 big.
And so that's nowhere near 200 pixels, right?
And the reason for that is that by default
flex box is allowed to shrink elements
so that they fit the container.
And so that's what the flex shrink here set
to one actually means.
So again, if there is not enough space
in a container to fit the items
with the size that we describe here using flex spaces
then flex box is allowed to shrink these items
by default because flex shrink is set to 1.
However, if we want to change that
which sometimes we might want
then we can simply status to 0.
And so now you see that they are indeed 200 pixels wide
but then of course the content no longer fits the container.
Alright? So setting flex shrink to zero is not
always advisable, but in some situations it's necessary
and we will actually come across one of those
in our big omni food project later in the course.
Okay? So essentially what Flex Shrink does is to determine
whether flex box is allowed to shrink element if necessary
or not now, right?
And finally, there's also basically the opposite of that
which is flex grow and which determines whether elements are
allowed to grow as large as they can or not.
So let's try that.
So let's say flex grow set to one, and in this case
it actually doesn't make much sense to have the flex spaces
but let's just see what happens in this situation.
Well, no, nothing changed.
So let's actually turn this one here off.
All right.
And now you see that all of them have exactly the same size
and in total they filled up the entire flex container.
And so that's exactly what flex grow set to one is doing.
Okay? So if we turn that off right here, then each
of the elements would simply be back to occupying the width
that they need to fit the content.
But again, if we set flex grow here to 1, then
all this remaining space right here is basically
evenly divided by all the remaining elements
-: Because all these elements now have flex, grow set to one.
So in this situation right here, alright
but what happens if actually only one
of these five year would've flex, grow, set to 1?
Well, let's turn this off permanently
and then let's try for example here
in the first element to set flex grow to 1.
So again, first we had flex grow set
to one on all of the elements, right?
So that's why we used here, dL selector
which are all of these elements
but now we are setting it only on the very first one.
So what do you think is going to happen?
Well now only this element here was allowed to fill
up all the remaining space.
And so these four are still with the size of the content
and then the remaining space was filled up by this element.
All right, let's turn it back off here
and back on here so we can see another thing.
So setting flex grow to 1
on all of these elements here makes it
so that they have the same size
and it wouldn't even have to be 1.
What matters is that they are the same number.
So if all of them would be 5
then they would still have the same size, okay?
But now if one of them was 2
so let's again try this one here.
Well then this one here would get double
of the remaining space then these other ones.
So let's see that.
And so indeed
this now is a bit bigger than these other ones, right?
So this one has 197 pixels while this one has 108.
So having this value here
double the flex grow of the other ones, doesn't mean
that this one here, we'll get double the size, okay?
What it does mean is that it gets double
of the available empty space than these other four ones.
For example, imagine that the empty space was 600 pixels
then this would get 100 when 100 and 100 and 100
and this one would get 200.
And if we set it to something even bigger
then it would get an even bigger portion
of the remaining space, okay?
But actually usually what we do is to simply set flex grow
to 1 on all of the flex items
because that something very usual that we want.
So basically having all the elements expanding
in order to fill the empty space.
And of course there can be a gap in between.
Let's just use a smaller one
so that we still have some space over.
All right, And now finally
let's talk about the flex property itself
which remember is a short termed for these three.
Now the flex property is actually pretty smart.
So for example, we can simply set it
to one like this and then it'll automatically figure
out that this means that flex grow should be one.
So we don't need this.
And usually we never do it like this.
We always write just flex one
and we then end up with the same result.
So as a best practice, we should
in fact never use one of these three here individually
but always use the flex property.
Okay? So this one here is equivalent to using just this.
But before, for example
when we had this situation right here, remember
so this where the content doesn't even fit
but if we really wanted to do this
then we should actually still use the flex property.
So the first value is flex grow, which is 0
and then we would set that
to 0 because that is the default.
Then the second value is flex shrink
which remember here we want it set to zero
so we would set that to 0.
And then the last one is flex bases.
So this one we want at 200.
And so that's it.
We can then just turn off these two.
And again, the result is exactly the same.
Okay, so always use the shorthand property
and not one of these three here individually.
Okay? Now this one we don't want
let's just leave this one here as we finish up this lecture.
Now I know that this is a lot to take
in and I'm sure that it all sounds pretty confusing
at this point, especially this flex property.
It actually took me quite some time to
understand this one myself.
And here we are really just scratching the surface
and so I don't really expect you to fully
understand what's going on
but it was still important to introduce you to this property
at this point so that we can then use it in our big project.
And by then it will of course become a lot clearer.