In this video we're going to get a handle on some of the basics around a flex Box model.
So once again we're going to use the Flex box system any time we want to position some number of common
sibling elements inside of one common parent.
So in other words we're kind of talking about this situation right here where we've got some maybe view
element that has three different texts inside of it.
We would use the Flex box system to control how these three text elements are laid out inside of this
view.
So we might have some view represented by this big white box and text one two three inside of it.
It's going to flip back over to my code editor.
We're going to adjust our component and add in a couple more text elements so we can then start to style
using the Flex box system gets SO BACK OVER HERE I'M GOING TO FIND MY TEXT element and I'm going to
duplicate it twice like so I'm then going to change the text inside of it to child number one child
number two and child number three.
Like so I'll then go back down to my styles object right here and I'm going to kind of lighten up on
some of the box object model properties inside of here.
So in particular I'm going to drop off that margin I'm going to change the border with to about just
three and we'll leave it there for right now.
So I'll save this.
And now I should see something like this appear.
OK.
So we talk about the flex box system.
We're essentially talking about how these child children get laid out inside this single view.
You'll notice that right away we very clearly have some default settings here for how these children
get laid out.
It's the first thing once you understand is a couple of different properties that are tied to the Flex
box system and what their default values are.
All right.
So the first property we're going to look at is something called a line items the line items property
is a property that we set on the parent element.
So in this case our view depending upon the value of a line items our children are going to be laid
out slightly differently specifically in the horizontal direction.
That's something I want you to know right.
Right away as I'm saying that this is going to affect how our children get laid out horizontally.
But there is another rule that we're going to take a look at that's going to significantly impact how
a line items works.
We'll discuss that in just a moment.
The default setting for a line items is stretch.
That means that by default every element with react native that is placed inside of some other element
is going to attempt to stretch and take up as much horizontal space as it possibly can.
And you can see that very easily inside of our simulator right now.
I've got Child 1 2 and 3.
And based upon the presence of that really long border right there it's very clear that this child 1
2 and 3 are attempting to stretch and fill up as much horizontal space as possible we can provide some
other values for a line items on the parent element such as Let's start if we provide a flex start on
the parent then our children 1 2 and 3 are going to kind of condense down to the left hand side as close
as they possibly can while still allowing for some amount of space where the text inside them.
So let's try that out really quickly on my parent element of view style right here or I should say the
style that's being applied to the parent element.
I'll add in and a line items of flex dash start once I save that I'll now see those three pieces of
text all the way to the left hand side.
Notice how they just have enough width to show the amount of content inside them.
We can take a test with these other properties as well so a line items of center is going to center
everything horizontally and flex and is going to shove everything to the right hand side.
There are one or two other values of a line items but honestly I don't really expect you have to use
them that often.
So I'm just kind of showing you a list of the different values of a line items that you probably are
going to need to use on a regular basis let's try and a line items of center really quick well change
out to center and there we go and we can do the same thing for Lex and as well.
And that's going to move everything to the right hand side.
OK.
So not that bad.
Once again the line item is property were always going to add on the parent element.
It's going to control how our children are laid out horizontally.
But there is an exception to that.
Like I said we're gonna discuss that in just a moment.
And once again the default value of a line items is stretch which means all the children inside of some
common parent are going to stretch themselves out horizontally as much as they possibly can.
All right.
So now we understand this first property of a line items.
Let's take a look at our next property in the next video.