In the last section we spoke a little bit more about Justified content with fluxbox and what it does
to some elements within a container.
We spoke about flex and center space between and then space around as well.
So in the section where we're going to figure out how to actually apply these to our particular case
you know styling our header it's going to go the next slide here.
So back on track or focusing on the head.
We have our profile image on the left which you know we still have to create these things so we all
get to that and then we've also got some stacked content on the right hand side.
You know the two lines of text.
So the interesting dynamic here is that we want to line up the two lines of text so the stack on top
of each other but both lines of text need to be next to the image.
So as a solution I'm going to suggest we take the following approach.
We'll wrap both the image and the text the two text tags with two separate views.
So one of you to wrap the image and then one view to wrap the two text tags inside of here.
Then we can use the justified content of flex start to get both these items to push up to the left hand
side of the container here.
Just one quick issue though.
One quick issue.
Everything we've been discussing about justify content has mentioned that we use it for positioning
elements in the vertical or up and down direction.
So how are we going to use justify Cancian right here to the lineup items on the left and right direction
like I just suggested and that's basically my lead into one of the last confusing fluxbox items we need
to discuss the idea of flex direction.
So first I want to very quickly remind you that back in when the previous sections inside of our card
section we added on a property flex direction of row right.
So we've kind of already done the wire for this and now we're just kind of going back in discussing
exactly why we did that.
OK.
So Flex direction property.
So here's what flex direction does the justified content rule can be used to apply to either vertical
or horizontal layout.
So either direction the direction that it will apply to is determined by the flex direction rule with
re-act native The Flex direction rule defaults to column.
So by default all of the justified content rules we place all over the place applied to the vertical
positioning of items if we wanted to make it apply to the horizontal layout of items however we can
change flex direction to row.
Instead when we change it to row it then turns flex direction to spacing items in the horizontal direction.
So this is exactly how we're going to solve our layout issue.
So here's the plan.
We're going to create two separate views for the header like we previously discussed just a minute ago.
One is going to wrap the image and the second one is going to wrap the two text tags.
Then on the card section which we already created we will give it the properties flex direction of row
and justify content.
Flex start so flex direction row is going to say hey all of the items inside.
Card section should lay themselves out going left to right instead of top down or top to bottom excuse
me and then justify content of flex star will say will mean push those items all the way up to the start
edge of the container which will be the left hand side in this case.
So again we have already gone ahead and added these two properties to our card section.
So that is completely done everything should work as we expect because we added these two properties
one last thing we also need to make sure that we know how to lay out our two lines of text vertically
within the view.
So that's one more little challenge.
We got to deal.
So we're going to also introduce the idea of a tax container so that text containers are going to be
just the view tag that we said we would use to wrap the two text tags.
Then on the text container will say that should have a flex direction of column so it should layout
its items top to bottom and it should have a justified content of space around.
And remember that space round does it says layout equal spacing between all of the elements within the
container.
So we have two text tags in here.
We will take some equal amount of whitespace and allocated between the top the middle and the bottom
of those two text tags.
So that's why we're going to use justify content of space around on that view container section.
All right.
So we've now spent a lot of time talking about fluxbox and how we're going to lay out this better.
Again Fluxbox is really the one rule or the one great tool we have for doing it with Riak native.
So it's very important that you have at least some reasonable idea of how flex blocks flex fluxbox layout
works and that's why I wanted to have a little bit of an expanded lecture on it.
So let's take all these rules all of these strategies that we've now looked at and apply them to our
head or in the next section