In this video I want to show you a little trick that we're going to use somewhat frequently.
Anytime we want some element to completely fill up its parent container.
So let's imagine in this example do we want child to to expand and fill up the entire height and width
of the parent view element like so to do so we would first set the position absolute property that would
make sure that it is completely ignored its sibling elements of child's 1 and 3.
So essentially in this case depending upon the value of flex box or a line items and justify content
it might just kind of condense down to be like so.
And of course child 3 would screwed up.
Now here's the trick.
We could also set a top bottom left in right value of zero.
That's going to mean that we want zero distance from this element to the top left right and bottom edges
of the parent container that's going to cause child to right here to expand and fill up its parent so
that's how we're going to get some child element to expand completely and fill up the parent container
no matter what.
Let's try writing out these styles INSIDE OF CHILD TO OKAY.
SO BACK OVER HERE I'M GOING TO FIND MY TEXT TO style and on here I'm going to delete left up 10 and
I'll replace it with a position absolute and we'll do a top of zero a right of zero autumn of zero and
left of zero as well.
So now we can save this and we're going to go back and see now Child 2 has completely expanded and filled
up the parent.
We can see that by the existence of the red border along the entire perimeter of the parent it's somewhat
common for us staff to write out all these rules right here.
So common fact that React Native put together a little shortcut to help us achieve the exact same thing.
So if we wanted to do the exact same thing as what you see right there we could delete those five different
rules and replace it with dot dot dot style sheet dot bill or see me absolute Bill object like so absolute
fill object is essentially a hardcoded object that has that set of five properties that we just wrote
out three essentially taking those five properties out of that object and a dot dot dot means just copy
paste those five different properties into this object.
So this is exactly the same as what we just had written out a moment ago.
So now we can save this go back to our box demo and we'll see the same thing appear so very frequently
any time that you want to get some child element to fill up the parent you're going to see this little
shortcut right here.
Okay.
So it looks good.
So we now understand some really specific stuff around these three different systems.
So one more quick pause when we come back the next video we're going to combine these three different
systems together and understand how they work in tandem.