hey there in this lecture we're going to

take a deep dive into the flex property

which we talked about in a previous

lesson so now i have a very simple

version of our navbar this time it only

contains two items the home item and the

logout item and they both have a flex of

one that means that they'll take up half

the space each and they'll grow and

shrink with the size of the container

however as i mentioned earlier

flex is actually a shorthand property

for three other properties

they're called flex

row

flex

shrink

flex

asus

and setting flex equal to

one

and when we set the flex value we're

actually setting all three of these

and even just writing one is actually

also kind of a shorthand because what

we're actually saying here is one

one

zero

the first number is the grow value the

second is the shrink value and the third

is the basis value

so this

is also the same as setting

one

one

zero so it's kind of three levels here

you can write it the hard way doing like

this

or the

slightly easier way doing it like this

or the absolutely easiest way doing it

like this

okay this might seem confusing so let's

actually go through these properties

here one by one i'll remove this one

and also comment out the flex

grow and flex shrink

now

copy that over here

now what we're going to do is set the

flex bases on both of the items we'll

set it to

200 pixels

and

edit that on both

now we have a container with two items

which each are set to 200 pixels at

least they'll be 200 pixels if the

container is more than 400 pixels wide

so flex basis is a way of setting the

base width of the element so they'll now

stay at 200 pixels regardless of how

much extra space there is in the

container if there's less than 400

pixels they'll actually start to shrink

but that's something we're going to look

at a little bit later so let's not get

ahead of ourselves there let's move on

to the flex grow

if we

cut this out here and

paste it in there

and do the

same thing

here

now you can see

they actually grow with the width of the

container so flex grow basically decides

how much of the extra space should be

distributed to the various items if we

set them to

zero

on both of these

this extra space will not be distributed

to either home or log out since they

both have a flex grow of zero however if

for example log out gets a flex grow of

one

it'll take up all of the remaining space

and home will get nothing of the

remaining space but as you saw if the

home also has value one it too will grow

with the size of the container and now

as these values are identical both have

one the flexbox layout will distribute

the extra space evenly across the two

items so these two numbers also work in

relation to each other if we set log out

to two you'll see that the log out

grows twice as quick as the home

this will be a bit more apparent if we

use a larger number for example five now

when it grows you can see that the log

out is clearly glowing faster than the

home item and actually it's growing five

times faster

so just to reiterate on that if we set

both of these to

zero then we have the extra space on the

side and the wider we make the container

the more extra space we have however if

we give the logout next grove one it

will take up all of the available space

and grow into it

we make only the home have a flex grove

one it will take up all the available

space grow into it

and if both of them are set to one they

will distribute the extra space evenly

across each other okay so now let's move

on to flex shrink let's set these like

scroll values back to zero and copy the

shrink down here and down here so as you

remember even though

we've set the bases here to 200 pixels

the flex container will force them to be

less than 200 pixels if the container is

less than 400 pixels like now now there

may be 150 150 pixels each or something

like that and that is because flex

shrink is set to 1 meaning that they

will both shrink at an equal rate

and this is actually the default value

for flex shrink

so while the grow is by default set to

zero the flex ring is by default set to

one meaning that if i remove this one

and this one

will still have the same behavior they

both shrink at an equal rate let's get

them back again okay now let's change

the flex shrink to zero for the home

item what will happen now is that when

we reach the 400 pixel threshold and the

items will have to start shrinking the

log out will do all the shrinking while

the home

stays at 200 pixels

so the logout is doing all the drinking

since it has flex shrink set to one

while home

does none of the shrinking since it has

flex shrink set to zero

now let's change the

flex shrink on this one to something

greater than one and see what happens

then let's add five for example rabbits

now is that when we reach the threshold

the home item is shrinking much quicker

than the logout item it's actually

shrinking five times faster than the

logout item so these numbers work in

relation to each other

meaning that you have to look at both

the numbers this one and this one to

understand how one of the numbers play

out on the page

because now log out has a flex string of

one and as you can see it shrinks really

slowly because one is a small number in

relation to five however if we take this

back again and

set the flex ring of home to zero

then suddenly logout does all the

shrinking because one in relation to

zero is infinitely more okay so let's

rewrite

these two here to the behavior we want

we want flex grow actually to be at one

and we want flick string to be at one

and

do the same thing here

and have

the flex spaces stay at 200 so now they

grow and shrink at the same rate and

they have and they are 200 pixels by

default so now we can get back to the

shorthand again

we're going to do flex

and

1 1

200 pixels

this is the exact same thing as this

meaning we can remove this

and also copy it over to this logout

icon

okay so finally i want to give you the

task for this lecture

what i want you to do now is that once

this container here crosses the

threshold of 400 pixels i want you to

make the logout item grow

10 times as fast as the home item

so go ahead and do that and when you

come back to the screencast i'll show

you the solution

ok hopefully you paused the screencast

and did the assignment it's really easy

actually if you want the logout to grow

ten times as fast as the home item you

simply set the flex grow which is the

first one of the three

to ten

and now

as you can see the log out grows really

fast and home grows really slowly

however when they start shrinking they

both shrink at an equal rate

meaning when they're less than 200

pixels

they both

shrink and grow actually

at the

same rate but once they cross the 200

pixel threshold about here the log out

takes over

okay so that was it and i'll see you in

the next lecture

