Unless sexual and put together our card section component it's purpose was to wrap a single section 2
of our card giving it enough margin and space seem to look nice. 3
Now that we've got all the infrastructure we need we can focus on building up each part of the card 4
inside of album detail. 5
So the header with the Album Info the section with the image and the buy now button at the bottom. 6
First we're going to start off with the header for each card. 7
This right here is a diagram of what that header on each card should look like. 8
Now I gotta tell ya a lot of the challenge and re-act native is figuring out just how to style all of 9
our different components. 10
I found styling for web to be a lot easier. 11
Personally just my own personal thought. 12
Whereas with re-act native You have to spend a little bit more time planning out how you construct each 13
component and so that's exactly what we're going to do right now. 14
We're going to plan exactly how we rebuild this. 15
We will build this header so underneath the header is the GSX that will probably more or less end up 16
using. 17
This is kind of a bare minimum of what we want on the left hand side we're going to have the artist's 18
image or there kind of their little headshot and we haven't spoken too much about the image tag with 19
re-act native but you don't take my word for it. 20
Basically there is a tag that we can use to show images so you know we'll figure that part out. 21
And then beneath it we'll have one text tagged for the album name and then another one for the artist's 22
name as well. 23
So this means that we have kind of a little bit of a layout issue here. 24
We need to figure out how to tell the image tag to show itself on the left and then the text tags to 25
show itself to the right. 26
But also those need to line up. 27
So this is our big first layout challenge that we've come into. 28
So we're going to spend a little bit of time to figure out the best way to get this lay out right here 29
to solve our layout issues with re-act the best tool that we have. 30
And perhaps the only one I should say is the flex box layout mechanism. 31
We spent a little bit of time previously discussing fluxbox but it was all in the context of figuring 32
out how to get some content to center or line up a single item in a container. 33
Fluxbox is also used to layout multiple items within the container as well which is exactly what we 34
need to do here. 35
We're going to spend a little bit more time figuring out fluxbox and then immediately apply that knowledge 36
to our Hetter. 37
So here's kind of our default head right now. 38
We just threw in the image tagged and then the two text tags we wouldn't have seen some content like 39
this. 40
Now the text tags wouldn't have the actual border to them. 41
I just put the border on there to make it clear that hey you know this is one of the text tags. 42
So it's reactive. 43
If we absolutely ignore styling and just tossed tags into a container they're all going to be placed 44
on the upper left hand side of the container and then line up vertically. 45
That's how it works by default. 46
Now we spoke about using Fluxbox in the context of working with a single item Previously we were talking 47
about the actual Hetter component. 48
This appear. 49
But now we need to figure out how flex box works with multiple items as well. 50
So all the properties we had previously previously discussed are still relevant. 51
So we can still use justify content with flex and to move all these items to the bottom or center to 52
center you know wherever we might want to do. 53
Let's check out how some of these different properties would affect this header. 54
So here's our flex and equivalent you know if we said on the View container or on a containing item 55
if we gave it justify content flex and everything gets shoved down to the bottom. 56
Likewise if we gave it center everything is centered up so largely behaves the same way as when we have 57
a single item. 58
But the difference is that you know we have multiple items within this container. 59
They all get kind of centered up. 60
Now the next two are where things start to get a little bit more interesting and only relevant when 61
we have multiple items within a container. 62
The first one is to fight content space between so its space between the container will take its list 63
of internal items and it will maximize and equalize the amount of space between each item. 64
So weve got the first time at the very top of the container and then the last item at the very bottom 65
of the container and then all the space in between the intermediate items is equalized so they are completely 66
equal in between their lastly space around space around as much like space between. 67
But it also allocates item to the very the head of the very first item and after the very last item 68
as well. 69
So in theory each of these white spaces in here one two three and four should be completely equal whenever 70
we're using space around. 71
So as we've just seen there's a lot of different rules available for justify content and we'll certainly 72
be using them or a couple of them over time. 73
But right now let's focus exactly on how to apply them to styling this header. 74
Let's take a quick break and then come back and figure out how we will use justify content properties 75
to syle that herself. 76
So let's take a quick break and then figure that out.