Original subtitles

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 Flexbox property

overview, how the flex property is actually a shorthand

for flex grow, flex shrink and flex basis.

And so let's now 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 a zero,

for flex shrink, it is one.

And for flex basis, 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 basis.

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

So let's say we want these elements to have

a width of 100 pixels.

Then as I said,

we use flex basis 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.

Okay. And so that looks a lot better.

So this one is now a hundred pixels.

This one is two. And 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 basis 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.

All right?

And let's see what happens if we actually

make this like, really big, like let's say 200 pixels,

give it a save, 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, Flexbox 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 described here

using flex basis,

then Flexbox is allowed to shrink these items by default

because flex shrink is set to one.

However, if we want to change that,

which sometimes we might want,

then we can simply set this to zero.

And so now you see that they are indeed 200 pixels wide.

But then of course the content no longer fits the container.

All right?

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

OmniFood project later in the course.

Okay.

So essentially what flex shrink does is to determine whether

Flexbox is allowed to shrink element if necessary or not.

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

But let's just see what happens in this situation.

Well, now 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 turned 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 one,

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.

All right.

But what happens if actually only one of these five here

would have flex grow set to one?

Well, let's turn this off permanently.

And then let's try for example,

here in the first element

to set flex grow to one.

So again, first we had flex grow set to one

on all of the elements, right?

So that's why we used here the .el 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 one other thing.

So, setting flex grow to one on all of these elements here

makes it so that they have the same size.

And it wouldn't even have to be one.

What matters is that they are the same number.

So if all of them would be five,

then they would still have the same size.

Okay? But now if one of them was two.

So let's again, try this one here.

Well, then this one here would get double of the remaining

space than 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 will 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, and 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 one on all of the flex items,

because that's 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 still 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 shorthand 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 will

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

And then we would set that to zero,

because that is the default.

Then the second value is flex shrink, which remember,

here we want it to set to zero.

So we would set that to zero.

And then the last one is flex basis.

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.