In this video we're going to take a look at one more property around flex box.
It's back inside in my view style right here.
I'm going to clean up the Flex direction like so.
So now we're back to the default flex direction of column and I can once again see my children laying
themselves out vertically.
OK so the last property we're going to take a look at is justified content.
This is going to change how our children are laid out vertically inside the parent.
Very similar to a line items.
The direction in which justified content works is going to change based upon that flex direction property.
So if we have a flex direction of column on the parent which is the default justified content will work
vertically which is the opposite of a line items.
If we then set it flex direction of row instead justify content is going to work horizontally justified.
Content can control if it's in the vertical direction.
How these children play themselves out.
The default value is flex start which means all of our children are going to kind of shut themselves
up to the very top of the parent container and that's what we can see right here we can change justify
content to center to push those items down or we can do a flex end to shove them down all the way to
the bottom we can also do a space between to get some space in between each child evenly distributed
or we can use space around which is very similar but is also going to add in some space above the top
and below the bottom elements as well.
So let's try setting this justified content property and just take a look at how it works back inside
my editor I'm going to find the view style once again I'm going to add in a justified content of center
go back to box demo and sure enough they show up in the center we can then do a space between and we'll
see some space between or space around and there we go so justified content pretty darn similar to a
line items it just works in the opposite direction.
Let's now try changing our Flex direction to row which is now going to make light justify content operate
in the horizontal direction instead.
So if I now say this we'll see a space around in the horizontal direction we could also do a center
which will center them horizontally or we can even do a flex start which again is the default and everything
gets shoved back up to the leading edge of the parent view.
OK.
So that's the three very basic properties that we're going to add specifically on a parent element so
justify content a line items and flex direction are all always going to be placed on some parent element
and that's going to customize how the children inside of it are displayed.
Now there are a couple of other properties related to the Flex box system but they're going to be placed
on the child element instead.
So let's take another quick pause and take a look at some of those child properties in the next video
as well.