1
00:00:01,060 --> 00:00:04,690
In this video we're gonna start working on a couple examples to make sure that we understand exactly

2
00:00:04,690 --> 00:00:06,750
how this layout system works.

3
00:00:06,790 --> 00:00:09,670
The first application we're gonna work on is this layout right here.

4
00:00:09,700 --> 00:00:11,740
So I want to show three different elements.

5
00:00:11,740 --> 00:00:13,420
It should span from left to right.

6
00:00:13,630 --> 00:00:17,590
And you'll notice that green element right there should essentially be on kind of like the next line

7
00:00:17,590 --> 00:00:19,160
down.

8
00:00:19,170 --> 00:00:22,180
Now there are many different ways to achieve a layout like this.

9
00:00:22,200 --> 00:00:25,490
I can probably think of three or four or five off the top of my head.

10
00:00:25,520 --> 00:00:29,650
There is definitely not necessarily a correct answer to do this.

11
00:00:29,790 --> 00:00:31,460
Go ahead and give this a shot.

12
00:00:31,590 --> 00:00:36,990
Try to put that layout together inside of our box screen file so you can replace these text elements

13
00:00:36,990 --> 00:00:41,670
with some view elements instead and then update the appropriate styles inside of here.

14
00:00:41,700 --> 00:00:45,410
Note that you might have to set the height and with properties of those view elements.

15
00:00:45,510 --> 00:00:49,980
Otherwise by default they have a height and width of zero so they won't actually display on the screen

16
00:00:50,910 --> 00:00:51,810
as a little extra.

17
00:00:51,960 --> 00:00:57,300
Try to get that green element into position using at least two different techniques so maybe once using

18
00:00:57,300 --> 00:01:03,750
the Flex box system maybe a second time give it a go using maybe margin or padding or whatever else

19
00:01:03,750 --> 00:01:06,290
you think is appropriate to go and give it a shot.

20
00:01:06,300 --> 00:01:10,830
As usual you don't have to do this exercise because we're going to go over a solution in the next video

21
00:01:11,210 --> 00:01:13,340
so quick pause and I'll see you in just a minute.