1
00:00:01,100 --> 00:00:04,300
All right my friends in this video we're going to try to go over a solution.

2
00:00:04,300 --> 00:00:08,740
So the first thing I need to do is replace the three text elements we have inside of our box screen

3
00:00:08,950 --> 00:00:15,070
with three views instead I'm going to make sure I also create three new style objects to be associated

4
00:00:15,070 --> 00:00:17,100
with these three views.

5
00:00:17,130 --> 00:00:22,750
OK so back inside my box screen I'm going to remove the three text elements I'll replace them with three

6
00:00:22,750 --> 00:00:23,800
views instead.

7
00:00:23,800 --> 00:00:25,820
So there's one two and three.

8
00:00:26,160 --> 00:00:31,660
I'll then give each of these a style property and I'll create a new object inside my styles object for

9
00:00:31,660 --> 00:00:32,810
each one.

10
00:00:32,830 --> 00:00:41,540
The first one I'll assign styles dot view one style and then I'll duplicate that for the other two and

11
00:00:41,600 --> 00:00:47,890
update them to view to style and view 3 style just to stay consistent here.

12
00:00:47,900 --> 00:00:54,590
I might also change the parent view from having a name of the use style to like parent style as well

13
00:00:54,820 --> 00:01:00,860
so that I just don't get confused between that parent style and these three that I have inside of here.

14
00:01:00,880 --> 00:01:04,860
So now we can go and create the relevant styles inside of our style sheet.

15
00:01:04,880 --> 00:01:11,380
First off I'll update my view style right here and change it to parent style after that.

16
00:01:11,390 --> 00:01:17,810
I'm going to delete the three existing ones so text 1 Text 2 And text 3 style and I'll replace them

17
00:01:17,810 --> 00:01:21,230
with the one view too and view 3 style instead.

18
00:01:21,470 --> 00:01:31,910
So view one style you two style and view three style then for each one.

19
00:01:31,920 --> 00:01:40,790
I'm going to assign a hardcoded height and width so I'll do a height of 50 and a with a 50 and I'll

20
00:01:40,790 --> 00:01:46,950
just copy that down for the other two then to make sure that these three views are very easily visible.

21
00:01:46,960 --> 00:01:49,770
I'm going to us also assign them a background color.

22
00:01:50,000 --> 00:01:56,240
So the first one I'll give a background color and I'll give it a color of red green and then purple

23
00:01:57,110 --> 00:02:01,250
will do red and we'll do green

24
00:02:04,050 --> 00:02:06,820
and then purple OK.

25
00:02:06,830 --> 00:02:09,780
So let's save this right here and see how we're doing.

26
00:02:09,920 --> 00:02:11,290
Back on my mobile device.

27
00:02:11,300 --> 00:02:11,570
Yep.

28
00:02:11,570 --> 00:02:13,900
Red green blue looks pretty good.

29
00:02:13,900 --> 00:02:18,170
It's now to make sure that we actually get the layout that we want with all of our elements spanning

30
00:02:18,170 --> 00:02:19,250
from left to right.

31
00:02:19,280 --> 00:02:23,240
We're going to first change the Flex direction property on the parent element.

32
00:02:23,240 --> 00:02:26,290
So in this case it's the parent style object right here.

33
00:02:26,360 --> 00:02:32,540
So I want to add in a flex direction of ROE that's going to get all three of my child elements to lay

34
00:02:32,540 --> 00:02:34,780
themselves out horizontally.

35
00:02:34,790 --> 00:02:39,680
Next up I want to make sure that I kind of space or get some amount of space between each of these different

36
00:02:39,680 --> 00:02:43,850
elements to do so we could use the justified content property.

37
00:02:43,850 --> 00:02:49,100
Quick reminder what justified content does it's going to add in some amount of spacing on the primary

38
00:02:49,100 --> 00:02:52,910
axes or essentially the axes designated by flex direction.

39
00:02:52,910 --> 00:02:57,860
So we could do a justified content space between and that'll give us some equal amount of space between

40
00:02:57,890 --> 00:03:05,640
each element so once again on the parent I'll do a justified content of space between

41
00:03:08,620 --> 00:03:10,350
and yep that's looking pretty good.

42
00:03:10,450 --> 00:03:15,210
It's not the last thing you have to do is get that green box to just move down a little bit.

43
00:03:15,220 --> 00:03:18,290
Now this is where there are several different ways to accomplish this.

44
00:03:18,310 --> 00:03:23,430
So if you are going to do something different than what I am about to show that's totally fine.

45
00:03:23,530 --> 00:03:28,000
The first way that we might achieve this is just to add in a little bit of margin top on that green

46
00:03:28,060 --> 00:03:34,370
element Nuttall push it down on the screen a little bit so on my view to style right here which is controlling

47
00:03:34,370 --> 00:03:41,140
my green box I could add in a margin top of 50 so if I now save that.

48
00:03:41,140 --> 00:03:46,330
Yep definitely moved it down the appropriate amount the next way we could accomplish this would be to

49
00:03:46,390 --> 00:03:49,270
shrink the height of the parent view.

50
00:03:49,330 --> 00:03:51,040
So here's the parent style right here.

51
00:03:51,040 --> 00:03:55,780
Rather than having a height of two hundred we could instead have a height of just one hundred which

52
00:03:55,780 --> 00:04:00,690
is essentially the height of two stacked boxes.

53
00:04:01,040 --> 00:04:06,830
So now we can go back to our YouTube style and rather than setting a margin top we could instead set

54
00:04:07,100 --> 00:04:13,550
a vertical or see me in a line self of flex end and that's going to get this one single element to push

55
00:04:13,550 --> 00:04:17,540
itself all the way down towards the bottom rather than doing margin top.

56
00:04:17,540 --> 00:04:27,180
On view to style I could replace it with a line self of flex and like so yeah that definitely looks

57
00:04:27,180 --> 00:04:28,200
good as well.

58
00:04:28,770 --> 00:04:30,140
Now one more way we could do this.

59
00:04:30,150 --> 00:04:35,980
I'm going to take off the parent style or I'm going to increase it back to a height of 200 so last way

60
00:04:35,980 --> 00:04:41,640
that we could do this very easily would be to find a view to style I'll delete a line self instead I'll

61
00:04:41,650 --> 00:04:48,680
set a top property which is gonna shift that element 50 units down so that definitely works as well.

62
00:04:50,250 --> 00:04:54,500
And there's one other thing we could do here and this is where life starts to get a little bit complicated

63
00:04:54,730 --> 00:04:59,840
but I just want to show you how many different ways we could achieve this given layout so optionally

64
00:05:00,290 --> 00:05:05,900
I could find the view that showing that green box right there and wrap it with a another view element

65
00:05:06,260 --> 00:05:16,780
like so and then I'll give this one a style of styles dot about view to parent then back down here inside

66
00:05:16,780 --> 00:05:21,250
my style object after view to style I'll define my view to parent

67
00:05:23,940 --> 00:05:33,770
I'll give it a fixed height of 100 units and then I'll tell it to justify content lacks and so in this

68
00:05:33,770 --> 00:05:40,120
scenario re sensually adding in an additional view right here and it's going to be about that taller

69
00:05:40,130 --> 00:05:46,370
so and then it's one single child we are using a justified content flex end to get that green box shifted

70
00:05:46,400 --> 00:05:50,990
all the way down to the very bottom of that parent view so we should end up with essentially the same

71
00:05:50,990 --> 00:05:56,720
thing before I save this I'm also going to delete the top property off of YouTube style otherwise that

72
00:05:56,720 --> 00:06:03,680
green box is going to be outside of this view to parent so I'll delete the top at 50 OK so let's try

73
00:06:03,680 --> 00:06:06,010
saving this and yep.

74
00:06:06,050 --> 00:06:07,480
Turns out that works as well.

75
00:06:07,540 --> 00:06:12,980
So as you can see there are many different ways to shift elements around on the screen so hopefully

76
00:06:12,980 --> 00:06:15,210
you had some success with this exercise.

77
00:06:15,230 --> 00:06:17,130
So let's take a quick pause right here.