All right my friends in this video we're going to try to go over a solution.
So the first thing I need to do is replace the three text elements we have inside of our box screen
with three views instead I'm going to make sure I also create three new style objects to be associated
with these three views.
OK so back inside my box screen I'm going to remove the three text elements I'll replace them with three
views instead.
So there's one two and three.
I'll then give each of these a style property and I'll create a new object inside my styles object for
each one.
The first one I'll assign styles dot view one style and then I'll duplicate that for the other two and
update them to view to style and view 3 style just to stay consistent here.
I might also change the parent view from having a name of the use style to like parent style as well
so that I just don't get confused between that parent style and these three that I have inside of here.
So now we can go and create the relevant styles inside of our style sheet.
First off I'll update my view style right here and change it to parent style after that.
I'm going to delete the three existing ones so text 1 Text 2 And text 3 style and I'll replace them
with the one view too and view 3 style instead.
So view one style you two style and view three style then for each one.
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
just copy that down for the other two then to make sure that these three views are very easily visible.
I'm going to us also assign them a background color.
So the first one I'll give a background color and I'll give it a color of red green and then purple
will do red and we'll do green
and then purple OK.
So let's save this right here and see how we're doing.
Back on my mobile device.
Yep.
Red green blue looks pretty good.
It's now to make sure that we actually get the layout that we want with all of our elements spanning
from left to right.
We're going to first change the Flex direction property on the parent element.
So in this case it's the parent style object right here.
So I want to add in a flex direction of ROE that's going to get all three of my child elements to lay
themselves out horizontally.
Next up I want to make sure that I kind of space or get some amount of space between each of these different
elements to do so we could use the justified content property.
Quick reminder what justified content does it's going to add in some amount of spacing on the primary
axes or essentially the axes designated by flex direction.
So we could do a justified content space between and that'll give us some equal amount of space between
each element so once again on the parent I'll do a justified content of space between
and yep that's looking pretty good.
It's not the last thing you have to do is get that green box to just move down a little bit.
Now this is where there are several different ways to accomplish this.
So if you are going to do something different than what I am about to show that's totally fine.
The first way that we might achieve this is just to add in a little bit of margin top on that green
element Nuttall push it down on the screen a little bit so on my view to style right here which is controlling
my green box I could add in a margin top of 50 so if I now save that.
Yep definitely moved it down the appropriate amount the next way we could accomplish this would be to
shrink the height of the parent view.
So here's the parent style right here.
Rather than having a height of two hundred we could instead have a height of just one hundred which
is essentially the height of two stacked boxes.
So now we can go back to our YouTube style and rather than setting a margin top we could instead set
a vertical or see me in a line self of flex end and that's going to get this one single element to push
itself all the way down towards the bottom rather than doing margin top.
On view to style I could replace it with a line self of flex and like so yeah that definitely looks
good as well.
Now one more way we could do this.
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
that we could do this very easily would be to find a view to style I'll delete a line self instead I'll
set a top property which is gonna shift that element 50 units down so that definitely works as well.
And there's one other thing we could do here and this is where life starts to get a little bit complicated
but I just want to show you how many different ways we could achieve this given layout so optionally
I could find the view that showing that green box right there and wrap it with a another view element
like so and then I'll give this one a style of styles dot about view to parent then back down here inside
my style object after view to style I'll define my view to parent
I'll give it a fixed height of 100 units and then I'll tell it to justify content lacks and so in this
scenario re sensually adding in an additional view right here and it's going to be about that taller
so and then it's one single child we are using a justified content flex end to get that green box shifted
all the way down to the very bottom of that parent view so we should end up with essentially the same
thing before I save this I'm also going to delete the top property off of YouTube style otherwise that
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
saving this and yep.
Turns out that works as well.
So as you can see there are many different ways to shift elements around on the screen so hopefully
you had some success with this exercise.
So let's take a quick pause right here.