1
00:00:00,430 --> 00:00:03,040
OK, next, property is justified content.

2
00:00:04,570 --> 00:00:08,710
And basically what this means is, as you know, we have a container and within our container we have

3
00:00:08,740 --> 00:00:14,860
items and within the items we have to access the main and across access and justify content defines

4
00:00:14,860 --> 00:00:17,150
the alignment along the main axis.

5
00:00:17,200 --> 00:00:25,090
It helps distribute extra free space left over when either all of the items on a line are inflexible

6
00:00:25,120 --> 00:00:28,870
or they are flexible but have reached the maximum size.

7
00:00:29,020 --> 00:00:34,490
It also saw some control over the alignment of the items when they overflow their line.

8
00:00:35,140 --> 00:00:40,600
So let's take a look at how this works and we're going to go back into our code and step in here.

9
00:00:40,600 --> 00:00:43,930
Comment of justify.

10
00:00:47,910 --> 00:00:48,550
Content.

11
00:00:50,700 --> 00:00:56,340
But before we get into justified content, let's first increase the size of our container to a height

12
00:00:56,340 --> 00:00:59,700
of, let's say, 350 pixels.

13
00:01:01,620 --> 00:01:10,170
And I also want to have just in front of the big source without stepping in height, so 350 pixels.

14
00:01:14,000 --> 00:01:18,380
And also flexing the set of flex rap to rap.

15
00:01:20,480 --> 00:01:20,990
OK,

16
00:01:24,050 --> 00:01:27,730
so by default, just the fat content is at Flagstad.

17
00:01:27,740 --> 00:01:35,060
So if I type no justify content and the first property is Flagstad and this is the default behavior

18
00:01:35,060 --> 00:01:36,070
of just the fat content.

19
00:01:36,320 --> 00:01:38,450
Now we can also type in start.

20
00:01:38,480 --> 00:01:40,090
So just start.

21
00:01:40,700 --> 00:01:47,570
And this will have exactly the same effects as she let me live like start and copied.

22
00:01:47,930 --> 00:01:50,330
And it's so.

23
00:01:50,330 --> 00:01:58,760
So you have both of the properties opposite to this will be CLECs end and with these items are packed

24
00:01:58,760 --> 00:02:00,830
towards the end of the flex direction.

25
00:02:00,860 --> 00:02:12,920
So if I were to justify content and flex and and hit save, I can say they are now to the end of the

26
00:02:12,920 --> 00:02:13,280
flex.

27
00:02:13,640 --> 00:02:17,300
Now the same thing goes for this with just typing in.

28
00:02:18,360 --> 00:02:18,900
And

29
00:02:22,070 --> 00:02:27,680
well, actually, they took it out and actually that's better because this is extremely confusing.

30
00:02:27,690 --> 00:02:34,470
So keep in mind, Oleksander, because they took out just and they got a bit more specific this time.

31
00:02:34,950 --> 00:02:38,730
Now, we also have just the fat content left and right.

32
00:02:39,330 --> 00:02:45,600
And with these items are packed towards the left edge or the right edge of the container, unless that

33
00:02:45,750 --> 00:02:50,690
doesn't make any sense with flex direction, then it behaves like start.

34
00:02:51,150 --> 00:03:00,720
So you could to justify content and left and the same thing we tried.

35
00:03:08,760 --> 00:03:17,100
But as I said, they're not that often used, not what is used to justify content to the center as it

36
00:03:17,100 --> 00:03:20,310
says items are centered along the line.

37
00:03:20,790 --> 00:03:22,500
But let me just.

38
00:03:23,200 --> 00:03:25,720
Yep, you can see how this is working.

39
00:03:25,740 --> 00:03:30,840
So now the plug section in the middle and everything is pushed in the center of of the container.

40
00:03:30,990 --> 00:03:36,900
But more often are properties like center space between and space around and space evenly used.

41
00:03:36,930 --> 00:03:42,950
So let's take a look at this space between where items are evenly distributed in the line.

42
00:03:42,960 --> 00:03:50,070
The first item is on the start line and the last time item is on the last line so as to justify content

43
00:03:50,580 --> 00:03:54,570
and as the space between let's hit save.

44
00:03:54,990 --> 00:03:57,150
As you can see, we have now space between them.

45
00:03:59,640 --> 00:04:01,230
Clustering them together.

46
00:04:02,240 --> 00:04:04,250
And this pushed them apart.

47
00:04:06,120 --> 00:04:12,540
Now, next up would be space around and with these items are evenly distributed in the line with equal

48
00:04:12,540 --> 00:04:19,080
space around them, not that visually the spaces aren't equal since all of the items have equal spaces

49
00:04:19,080 --> 00:04:20,090
on both sides.

50
00:04:21,010 --> 00:04:28,630
The first item, we have one unit of space against the container edge, but two units of space between

51
00:04:28,630 --> 00:04:36,340
the next item because that next item has its own space in that applies so as to justify content.

52
00:04:37,600 --> 00:04:43,590
And as use space around and let's shrink it now a bit together.

53
00:04:44,900 --> 00:04:45,860
And it's also.

54
00:04:47,140 --> 00:04:53,800
Push aside so you can see on the edges the space isn't the same as between them, and the last property

55
00:04:54,070 --> 00:05:02,260
would be space, evenly spaced, evenly items are distributed so that the space between any two items

56
00:05:02,800 --> 00:05:06,010
is equal and also the space to the edges.

57
00:05:06,370 --> 00:05:10,600
So let's do justify content and space evenly.

58
00:05:10,660 --> 00:05:11,620
Let's see what happens.

59
00:05:12,650 --> 00:05:14,860
I said save and it will shrink.

60
00:05:14,860 --> 00:05:18,970
This together, you see, will have the same space all over.

61
00:05:21,260 --> 00:05:23,330
To the edges and between the items.

62
00:05:24,620 --> 00:05:27,290
OK, so that's basically it for justify content.