We've now taken a look at a line items justify content and flex direction.
These are three properties that are always going to be assigned to some parent element.
Is going to change how the children inside that parent are displayed.
There are some other properties that were going to be making use of but these are always going to be
applied to a child and they are flex and align self there technically are one or two other properties
that you could be aware of but we don't very frequently use them on a lot of projects.
So we're gonna really just focus on the ones that we more frequently make use of the first property
we're going to take a look at is the Flex property the Flex property.
We're going to apply it directly to a child and it's going to change how much space that child tries
to take up inside of the parent element.
So we could add on say a value of flex 1 to specifically child 2.
This is going to make child to try to expand and take up as much direction or as much space in the current
flex direction axes.
So remember the default flex direction is column so a flex one on Child 2 means that child 2 is going
to take up as much vertical space as it possibly can.
Let's try going back over to our code editor and testing this out okay.
So back inside my style's object I'm going to rename textile right here and change it to text 1 style.
I'm going to duplicate that down twice
like so on the second one I'll change the name to text to and then on the third one I'll do text loops
text 3 like so and then going to apply each of these to the three text elements that we have.
The first one will be text 1 Style Text 2 And text 3.
I'm also going to change my view style right here.
I'm going to restore some the default functionality so I'm gonna do a removal of flex direction and
justified content.
OK so let's not try doing the same thing we saw on that diagram so I can apply a flex one to text to
style right here so I'll add on flex of one all right.
So that's going to cause child 2 to expand and take up as much vertical space as it possibly can.
Remember flex is going to operate in the same direction as the current value of flex direction.
So if we add in a two though our view style a flex direction of row that's going to mean that flex 1
is going to cause our second child to now try to take up as much space in the horizontal direction as
it can.
So when I save that I can now see child to taking up as much horizontal space as possible.
I'm going to remove flex direction like so and then we're back to the default behavior so multiple elements
inside of one parent can have that flex property assigned.
In this example right here I put on a flex of one two child two and child three which means that they're
both going to expand and take up as much space as possible inside the parent but kind of share the space
that is available.
We could do a flex one on all children that will make them all expand and share all available space
let's try both those really quickly.
So on text 2 right here.
I've got flex one on our text 3 style.
I'll add in a flex one as well save that and now we'll see.
CHILD 2 and child 3 have expanded but shared all the available space so we can also do a flex one two.
Text 1
and now all 3 You're gonna take up some equal amount of space same rules apply.
So if we add in a flex direction to our parent of Ro they'll now take up as much horizontal space as
possible but distribute that space among themselves.
Now the last thing you need to understand around this flex property is that we can have non property
or values that are something other than one and that's going to essentially try to proportion the available
space to each of these children.
So in this example right here we've got a child one with a flex for child 2 as flex 4 and child 3 as
flex to figure out how much space is going to be allocated.
We add up all those different flex values.
So in this case we would have four plus four plus two equals 10.
So essentially we can imagine that this entire parent gets split into 10 equal sections.
We then proportion some amount of space according to that flex value.
So in other words child 1 and 2 we get 40 percent of the available space and child 3 because as the
value of flex of two would get only 20 percent of the space that is available.
Let's try testing out this scenario as well back over here I'm going to remove the Flex direction on
the parent I'll then put a flex of 4 4 and 2 like so we can save that and now we'll see that we've got
essentially 40 percent 40 percent and then 20 percent to child 3.
Okay so that's pretty much it for the Flex value we're going to use it anytime that we want a child
to expand and fill up some available space.
And that's pretty much it.
Let's take a quick pause right here and there's just one less property we're going to take a look at
which is a line so.