In the last section we added some styling to our view tag.
Remember the purpose of the tag was just to position the text element correctly on the screen.
The text can't really position itself.
We also set a background color on The View tag.
And so now it's time to really make use of the view tag to position the album's text right and center
middle here positioning elements in re-act native is a tricky little subject.
And I normally wouldn't bring styling up so early in of course except for the fact that you know styling
is really at the core of reac need.
And for me personally one of the hardest challenges or most difficult aspects of Riak native.
And so that's why we're tackling this nice and early.
So by doing or to use positioning inside of reac native We use a technique called Flex box.
Now the term flex box is a reference to how we will position elements it's kind of a CSSA positioning
technology.
If you've worked with flex flex box in normal CSSA before on standard web apps it mostly works the same
way here.
There's a couple of very small differences that I'll point out over time.
So let me give you a plain text definition of flex box.
Fluxbox is a system of positioning elements within the container.
In our case we have a containing element of view and the child element of the text we can use fluxbox
to tell a re-act native how we want to position the text tag within the overall view tag.
So let's check out a couple of couple of diagrams to get a little bit better idea of how this works.
So why do people want to first make it really clear everything and reac native gets positioned to the
top left of its parent just as you would expect with normal age T.M..
So if we do not finagle with that view or that text any point in time it's going to look exactly like
this.
The text albums is going to appear at the top left hand side of the overall view container.
So it's kind of don't know orangy look and color right here is supposed to be the view container.
And so if we look at the simulator right now.
Yeah that's definitely the case that's appearing at the top left of the view so there are two properties
that we need to be aware of to get our text to be centered in the very middle of the view.
The first is justified content and the second is a line items.
These are two property names that we'll use inside of our styling object to get the text tag to move
to the center of the view tag.
So let's examine both these properties.
First we're going to start off with the justify content property that justified content property is
used to position elements in the vertical direction.
So to move something from the very top left you say downwards.
Now I say let me let me throw out one small caveat here.
Usually the justified content property is used to position elements in the vertical direction.
There is one case where it behaves a little bit differently.
That's all I want to say right now and I'm only saying that because if you're familiar with flex blocks
you probably grit your teeth and say Stephen that's not the only thing justify content does.
But again forget that let's just focus on in context right now what justified content does.
So we can give justify content a couple of different values to change where it places our content.
If we give it the string flex dash and it will push our text down to the very bottom.
Likewise we can give it Center as a string and it will push the element to the very center middle but
still all the way to the left hand side justify content right now is not moving our element from the
left to the right.
Finally the last one is really relevant right now.
There's a couple of others that we'll cover later on in the course is justified content flex dash start
and that behaves much the same as the default which is to not provide a justified content property at
all in which case it will just appear on the very very top.
So you won't find us using flex start too often because that's generally the default behavior anyways.
So there's a couple of other items as well.
Like I mentioned that we'll figure out later on as we move through the course.
So this is justified content again has to move elements up and down the second property that we want
to be aware of is the A line items property with a line items.
We position elements in the horizontal direction.
So we're talking about moving the text from left to right.
We have much the same properties as with justified content we can say start and we'll start at the very
left and we can use center to center it and we can use end to push it all the way to the far right hand
side.
So again whereas justify content is about manipulating items in the up and down direction a line item
is about manipulating it in the left and right.
So the idea here is that we can combine justified content and the line items to exactly Center an item
in a container.
Again that's not all there is to flex box but it is all we need to know for right now.
So let's take what we've learned in this section and apply it to our head or component in the next section.