1
00:00:00,860 --> 00:00:04,540
In this video we're going to take a look at one more property around flex box.

2
00:00:04,580 --> 00:00:06,200
It's back inside in my view style right here.

3
00:00:06,230 --> 00:00:09,470
I'm going to clean up the Flex direction like so.

4
00:00:09,470 --> 00:00:13,970
So now we're back to the default flex direction of column and I can once again see my children laying

5
00:00:13,970 --> 00:00:15,950
themselves out vertically.

6
00:00:15,980 --> 00:00:19,710
OK so the last property we're going to take a look at is justified content.

7
00:00:19,790 --> 00:00:23,780
This is going to change how our children are laid out vertically inside the parent.

8
00:00:23,900 --> 00:00:25,480
Very similar to a line items.

9
00:00:25,580 --> 00:00:31,690
The direction in which justified content works is going to change based upon that flex direction property.

10
00:00:31,730 --> 00:00:36,950
So if we have a flex direction of column on the parent which is the default justified content will work

11
00:00:37,010 --> 00:00:40,230
vertically which is the opposite of a line items.

12
00:00:40,490 --> 00:00:46,840
If we then set it flex direction of row instead justify content is going to work horizontally justified.

13
00:00:46,840 --> 00:00:49,900
Content can control if it's in the vertical direction.

14
00:00:50,020 --> 00:00:51,990
How these children play themselves out.

15
00:00:52,210 --> 00:00:56,140
The default value is flex start which means all of our children are going to kind of shut themselves

16
00:00:56,140 --> 00:01:03,240
up to the very top of the parent container and that's what we can see right here we can change justify

17
00:01:03,250 --> 00:01:08,620
content to center to push those items down or we can do a flex end to shove them down all the way to

18
00:01:08,620 --> 00:01:15,610
the bottom we can also do a space between to get some space in between each child evenly distributed

19
00:01:16,110 --> 00:01:20,860
or we can use space around which is very similar but is also going to add in some space above the top

20
00:01:20,950 --> 00:01:23,490
and below the bottom elements as well.

21
00:01:23,680 --> 00:01:29,000
So let's try setting this justified content property and just take a look at how it works back inside

22
00:01:29,000 --> 00:01:35,180
my editor I'm going to find the view style once again I'm going to add in a justified content of center

23
00:01:36,840 --> 00:01:44,060
go back to box demo and sure enough they show up in the center we can then do a space between and we'll

24
00:01:44,060 --> 00:01:51,810
see some space between or space around and there we go so justified content pretty darn similar to a

25
00:01:51,810 --> 00:01:54,410
line items it just works in the opposite direction.

26
00:01:54,730 --> 00:02:02,500
Let's now try changing our Flex direction to row which is now going to make light justify content operate

27
00:02:02,530 --> 00:02:04,950
in the horizontal direction instead.

28
00:02:05,050 --> 00:02:14,150
So if I now say this we'll see a space around in the horizontal direction we could also do a center

29
00:02:15,120 --> 00:02:23,320
which will center them horizontally or we can even do a flex start which again is the default and everything

30
00:02:23,320 --> 00:02:26,740
gets shoved back up to the leading edge of the parent view.

31
00:02:26,740 --> 00:02:26,950
OK.

32
00:02:26,980 --> 00:02:33,070
So that's the three very basic properties that we're going to add specifically on a parent element so

33
00:02:33,070 --> 00:02:38,830
justify content a line items and flex direction are all always going to be placed on some parent element

34
00:02:39,210 --> 00:02:44,010
and that's going to customize how the children inside of it are displayed.

35
00:02:44,030 --> 00:02:48,470
Now there are a couple of other properties related to the Flex box system but they're going to be placed

36
00:02:48,530 --> 00:02:50,780
on the child element instead.

37
00:02:50,810 --> 00:02:54,740
So let's take another quick pause and take a look at some of those child properties in the next video

38
00:02:54,740 --> 00:02:55,130
as well.