Now that we've seen an example of a line items let's move on to our next flex box property.
This is going to be another property that we're going to add onto a parent element and it's going to
customize how all the children are laid out inside there.
The next property we're going to discuss is flex direction by default flex direction is column on every
single element Lex direction is going to control whether children are laid out vertically or horizontally.
So once again by default it's always going to be column which means all of our children are laid out
from top to bottom.
We can change it to a flex direction of row which will make all of our children lay themselves out horizontally
instead.
Now in the last video when we were discussing a line items I said that the behavior of a line items
would change ever so slightly depending upon some other property value.
And that is actually flex direction.
So by default if we have a flex direction of column as we do right there that's going to make our line
items property function horizontally.
So essentially whenever flex direction is column a line items is going to lay stuff out in the horizontal
direction.
But if we change flex direction to row instead then the direction in which a line items functions is
going to change as well and it's going to instead start to control how elements are laid out vertically.
So let's start playing around with Flex direction just a little bit and understand how it's going to
change a line items all right.
So back inside my editor I'm going to find where we set that line items property.
I'm going to delete that one and we're going to change it to flex direction so once again the default
value is column.
So if we ever put in a flex direction of column well things are going to look just a okay or pretty
much as they usually do.
So it's actually kind of uncommon that we're ever going to have to set flex direction of column.
Instead it's much more likely that we'll do a flex direction of row.
So that's going to override the default behavior.
So we can now save this and now we'll see all of our children laid out horizontally instead.
In this case we're not really seeing any kind of a line items action here because the view element that's
wrapping them is kind of shrinking down just to encapsulate these three different children.
But we could set a hardcoded height on this view style right here.
And if we did well then see a line items in action.
All right.
So going to add into the view style a height of 200
and there we go.
So what you're seeing right here is the default behavior or the default value of a line items.
Remember the default is stretch.
That means that our children by default are going to stretch and take up as much space as they possibly
can before when we were making use of the default behavior.
We had a default value flex direction of column which means our children tried to span as much horizontal
space as possible but because we changed flex direction to row that changed the default direction or
the way in which a line items is working.
So now it's trying to stretch items vertically as opposed to horizontally which is why we're seeing
this.
We can now start to make use of that a line items property again so we can set in a line items of like
center.
And that's going to try to make all of our children lay themselves out at the very center of that parent
view.
Let's try saving that.
And there we go.
We can also do a like start number that's going to make all of our children kind of smushed up against
the front edge and we can do a flex end which will move them down to the very bottom instead.
All right so that's flex direction.
Again we basically just use it to get elements to light themselves out horizontally versus vertically
and it changes the way in which aligned items work.
There's one other property around flex box I want you to understand.
So let's take a look at that last property in the next video.