1 00:00:00,920 --> 00:00:04,620 In this video I want to show you a little trick that we're going to use somewhat frequently. 2 00:00:04,660 --> 00:00:08,590 Anytime we want some element to completely fill up its parent container. 3 00:00:08,590 --> 00:00:14,810 So let's imagine in this example do we want child to to expand and fill up the entire height and width 4 00:00:15,080 --> 00:00:21,230 of the parent view element like so to do so we would first set the position absolute property that would 5 00:00:21,230 --> 00:00:26,210 make sure that it is completely ignored its sibling elements of child's 1 and 3. 6 00:00:26,210 --> 00:00:31,070 So essentially in this case depending upon the value of flex box or a line items and justify content 7 00:00:31,340 --> 00:00:33,640 it might just kind of condense down to be like so. 8 00:00:33,650 --> 00:00:35,880 And of course child 3 would screwed up. 9 00:00:35,900 --> 00:00:37,070 Now here's the trick. 10 00:00:37,070 --> 00:00:41,610 We could also set a top bottom left in right value of zero. 11 00:00:41,750 --> 00:00:48,770 That's going to mean that we want zero distance from this element to the top left right and bottom edges 12 00:00:48,830 --> 00:00:55,120 of the parent container that's going to cause child to right here to expand and fill up its parent so 13 00:00:55,120 --> 00:00:59,080 that's how we're going to get some child element to expand completely and fill up the parent container 14 00:00:59,110 --> 00:01:00,610 no matter what. 15 00:01:00,610 --> 00:01:04,830 Let's try writing out these styles INSIDE OF CHILD TO OKAY. 16 00:01:04,850 --> 00:01:11,540 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 17 00:01:11,540 --> 00:01:21,800 I'll replace it with a position absolute and we'll do a top of zero a right of zero autumn of zero and 18 00:01:21,860 --> 00:01:23,870 left of zero as well. 19 00:01:24,030 --> 00:01:29,210 So now we can save this and we're going to go back and see now Child 2 has completely expanded and filled 20 00:01:29,210 --> 00:01:30,290 up the parent. 21 00:01:30,290 --> 00:01:37,310 We can see that by the existence of the red border along the entire perimeter of the parent it's somewhat 22 00:01:37,310 --> 00:01:39,780 common for us staff to write out all these rules right here. 23 00:01:39,830 --> 00:01:44,990 So common fact that React Native put together a little shortcut to help us achieve the exact same thing. 24 00:01:45,050 --> 00:01:49,970 So if we wanted to do the exact same thing as what you see right there we could delete those five different 25 00:01:49,970 --> 00:02:01,370 rules and replace it with dot dot dot style sheet dot bill or see me absolute Bill object like so absolute 26 00:02:01,380 --> 00:02:06,170 fill object is essentially a hardcoded object that has that set of five properties that we just wrote 27 00:02:06,170 --> 00:02:12,110 out three essentially taking those five properties out of that object and a dot dot dot means just copy 28 00:02:12,110 --> 00:02:15,590 paste those five different properties into this object. 29 00:02:15,590 --> 00:02:19,650 So this is exactly the same as what we just had written out a moment ago. 30 00:02:19,720 --> 00:02:26,340 So now we can save this go back to our box demo and we'll see the same thing appear so very frequently 31 00:02:26,360 --> 00:02:30,510 any time that you want to get some child element to fill up the parent you're going to see this little 32 00:02:30,510 --> 00:02:32,370 shortcut right here. 33 00:02:32,550 --> 00:02:32,740 Okay. 34 00:02:32,760 --> 00:02:34,000 So it looks good. 35 00:02:34,080 --> 00:02:38,570 So we now understand some really specific stuff around these three different systems. 36 00:02:38,610 --> 00:02:42,360 So one more quick pause when we come back the next video we're going to combine these three different 37 00:02:42,360 --> 00:02:45,150 systems together and understand how they work in tandem.