1
00:00:00,480 --> 00:00:02,160
Hello, everyone, and welcome back.

2
00:00:03,070 --> 00:00:08,610
In today's video, we will learn how to align flicks, items Flicks provides us with two properties

3
00:00:08,610 --> 00:00:12,090
for this purpose line items, online content.

4
00:00:12,450 --> 00:00:15,150
Let's talk about the first publicly aligned items.

5
00:00:15,690 --> 00:00:18,960
This property is used to line items along the cross axis.

6
00:00:19,260 --> 00:00:21,780
So if you have a Flex One Direction group.

7
00:00:22,260 --> 00:00:23,730
So this would line items.

8
00:00:23,940 --> 00:00:28,380
Would it be or if you have a Flex with Direction column.

9
00:00:28,650 --> 00:00:28,910
It would.

10
00:00:28,970 --> 00:00:30,960
The line items horizontally.

11
00:00:31,830 --> 00:00:32,700
Let's give this a try.

12
00:00:32,760 --> 00:00:34,270
So that's being a good editor.

13
00:00:35,310 --> 00:00:36,900
Let's bring it up here.

14
00:00:37,740 --> 00:00:38,610
So let's give.

15
00:00:39,000 --> 00:00:41,040
Display flex to a container.

16
00:00:41,640 --> 00:00:43,410
So display flex.

17
00:00:43,440 --> 00:00:44,160
Let's save it.

18
00:00:44,910 --> 00:00:47,510
And by default it is in directions.

19
00:00:47,530 --> 00:00:50,490
So let's try giving it this property.

20
00:00:50,970 --> 00:00:51,860
So a line.

21
00:00:53,500 --> 00:00:55,580
Items on, let's say.

22
00:00:57,450 --> 00:00:58,180
Stretch.

23
00:00:58,290 --> 00:00:58,650
Let's say.

24
00:00:59,770 --> 00:01:01,660
So a stretch is the default value.

25
00:01:02,460 --> 00:01:05,190
So by default, it stretches the content vertically.

26
00:01:05,850 --> 00:01:10,050
So if we increase the height to forgive, it should increase the height of our items as well.

27
00:01:10,980 --> 00:01:12,620
So let's say height.

28
00:01:12,710 --> 00:01:14,610
Four hundred pixels the table.

29
00:01:15,650 --> 00:01:21,150
And as you can see, the height of items also increased it, except some more value.

30
00:01:21,180 --> 00:01:22,240
So let's give them a try.

31
00:01:24,100 --> 00:01:25,990
So it accepts this value flicks start.

32
00:01:27,130 --> 00:01:29,570
So it aligns all the items at the start.

33
00:01:30,460 --> 00:01:32,720
Similarly, it accepts and other randy flakes.

34
00:01:32,870 --> 00:01:39,540
And so it aligns everything a bit and it accepts another value call center.

35
00:01:40,210 --> 00:01:42,780
It moves everything to the center vertically.

36
00:01:43,320 --> 00:01:46,030
Similarly, it's right before the election column.

37
00:01:46,750 --> 00:01:48,540
So let's do a direction here.

38
00:01:49,680 --> 00:01:51,320
Flake's direction, let's say.

39
00:01:51,930 --> 00:01:52,640
Let's save it.

40
00:01:53,610 --> 00:01:56,040
Let's increase the height limit to say.

41
00:01:57,420 --> 00:01:58,650
Certain Dix's.

42
00:01:59,880 --> 00:02:02,730
And as you can see, the design in the center horizontally.

43
00:02:03,140 --> 00:02:03,690
Why is that?

44
00:02:03,690 --> 00:02:06,570
Because a flex is in the direction column.

45
00:02:06,990 --> 00:02:09,570
So the cross Access's horizontal.

46
00:02:10,140 --> 00:02:14,580
Similarly, let's try moving into the star service Flex started exhibit.

47
00:02:15,570 --> 00:02:19,110
And as you can see, it move to the start of her cross axis.

48
00:02:19,860 --> 00:02:22,110
Similarly, that strike kicks in.

49
00:02:22,810 --> 00:02:25,590
And as you can see it move to the end of a cross axis.

50
00:02:26,010 --> 00:02:32,640
Similarly, the straight stretch, the tail, as you can see it, stretching all the elements across

51
00:02:32,640 --> 00:02:34,320
the cross axis.

52
00:02:34,950 --> 00:02:36,600
That's also a line items for Betty.

53
00:02:36,690 --> 00:02:39,630
So moving on to the next one, which is a line Clinton.

54
00:02:40,050 --> 00:02:43,320
This droplet is also used to line items along the cross axis.

55
00:02:43,710 --> 00:02:46,860
Think of this as justified on denser cross axis.

56
00:02:47,130 --> 00:02:53,640
So if you remember, we would only use us if I continue to remove the counting or items around the main

57
00:02:53,640 --> 00:02:54,240
axis.

58
00:02:54,690 --> 00:02:59,460
But here with a line Glenton, it moves the elements across the cross axis.

59
00:03:00,150 --> 00:03:04,020
This property works only when there are more than one line of items.

60
00:03:04,520 --> 00:03:08,000
So first, let's bring it back to normal.

61
00:03:08,010 --> 00:03:10,290
So let's change it to room.

62
00:03:10,920 --> 00:03:13,020
Let's remove this line item stability.

63
00:03:13,740 --> 00:03:15,050
Let's remove the height.

64
00:03:15,690 --> 00:03:16,200
Let's save it.

65
00:03:17,130 --> 00:03:20,250
So let's try this aligned content.

66
00:03:20,280 --> 00:03:28,260
So if I see a line content analysis center, nothing happens because it needs to have multiple grooves.

67
00:03:28,890 --> 00:03:29,760
So let's do that.

68
00:03:30,000 --> 00:03:30,990
So come on here.

69
00:03:32,670 --> 00:03:35,880
Scoppetta only stood here once again.

70
00:03:37,790 --> 00:03:41,940
And as you can see, the content is overflowing, so we need to wrap it to bring a direct line.

71
00:03:42,800 --> 00:03:43,600
So going in here.

72
00:03:45,860 --> 00:03:48,160
So let's rock and let's go to Valley Rock.

73
00:03:48,750 --> 00:03:56,120
I'm not, as I can see, we've got doodlers here, but there isn't any extra space vertically because

74
00:03:56,120 --> 00:03:57,110
this is a draw.

75
00:03:57,250 --> 00:03:58,850
And we're talking about the cross axis.

76
00:03:58,880 --> 00:03:59,840
We need more space.

77
00:04:00,020 --> 00:04:00,400
Be good.

78
00:04:00,440 --> 00:04:01,200
So let's do that.

79
00:04:02,180 --> 00:04:03,830
So let's just increase the height.

80
00:04:04,790 --> 00:04:06,870
Say 700 pixels, let's say.

81
00:04:07,730 --> 00:04:11,120
And as you can see, the content is in the center of the screen.

82
00:04:11,220 --> 00:04:14,840
What, or across the cross axis.

83
00:04:15,140 --> 00:04:17,180
Similarly, let's try bringing it to the start.

84
00:04:18,170 --> 00:04:18,740
Let's save it.

85
00:04:19,490 --> 00:04:22,580
Now, as you can see, it is at the start of DROs axis.

86
00:04:23,390 --> 00:04:25,220
Similarly, we can bring it to the end.

87
00:04:26,720 --> 00:04:29,960
Now, as you can see, it is at the end of the cross axis.

88
00:04:30,500 --> 00:04:35,870
So just like behind the space between in space alone and justify content, we can have that here as

89
00:04:35,870 --> 00:04:36,050
well.

90
00:04:36,530 --> 00:04:38,870
Let's see space between let's save it.

91
00:04:39,380 --> 00:04:43,070
And now, as you can see, all the extra spaces between these two rows.

92
00:04:43,820 --> 00:04:46,730
Similarly, we can have a space around the table.

93
00:04:47,330 --> 00:04:51,080
And now, as you can see, all the extra space is divided around these rules.

94
00:04:51,170 --> 00:04:54,350
So something is on the top, some in between and some at the bottom.

95
00:04:54,830 --> 00:04:57,850
Similarly, we can use the volume, stretch the table.

96
00:04:58,110 --> 00:05:02,330
Now, as you can see, both these rules kind of stretching across as much as possible.

97
00:05:02,720 --> 00:05:05,270
Let's see how the line items in the center of the flick's.

98
00:05:05,360 --> 00:05:08,210
So center work to go the center horizontally.

99
00:05:09,110 --> 00:05:10,570
Let's remove these extra items.

100
00:05:11,210 --> 00:05:11,930
Let's save it.

101
00:05:13,070 --> 00:05:14,090
So we just have four.

102
00:05:15,140 --> 00:05:16,940
Let's say we want to bring it to the center.

103
00:05:17,540 --> 00:05:20,930
So first it came to the center vertically.

104
00:05:21,830 --> 00:05:27,560
Now to bring it same to horizontally, we can use justify contant.

105
00:05:29,420 --> 00:05:30,920
Again, Senator, let's it.

106
00:05:31,650 --> 00:05:34,700
And as you can see, our content is isn't the same the that.

107
00:05:35,850 --> 00:05:38,640
Similarly, let's try this proper different direction column.

108
00:05:39,120 --> 00:05:41,560
So coming back cure that seems to column.

109
00:05:41,580 --> 00:05:45,620
Let's save it on because we will on content stretch the line.

110
00:05:45,810 --> 00:05:47,720
Clinton looks for the cross axis.

111
00:05:48,390 --> 00:05:52,940
So all these columns out a stretch equally across the cross axis.

112
00:05:53,820 --> 00:05:56,430
Similarly, let's try changing the wilderness and drift stretch.

113
00:05:56,430 --> 00:05:57,630
Let's say start.

114
00:05:57,840 --> 00:06:02,490
Let's say that so all the content is moved to the star of the cross axis.

115
00:06:02,810 --> 00:06:04,460
Similar derivative fits in.

116
00:06:05,220 --> 00:06:07,200
So all the content is at the end.

117
00:06:07,830 --> 00:06:09,270
Let's try space between.

118
00:06:09,950 --> 00:06:10,610
Let's save it.

119
00:06:10,720 --> 00:06:14,550
And as you can see, all the available space is between these columns.

120
00:06:14,880 --> 00:06:17,160
Similarly, let's try space around.

121
00:06:18,150 --> 00:06:22,560
As you can see, all the spaces around these columns, let's try center.

122
00:06:24,670 --> 00:06:28,930
As you can see, all the items are not in the center horizontally.

123
00:06:29,380 --> 00:06:31,450
That's all for a langoulant and property.

124
00:06:32,140 --> 00:06:33,790
Now that we know how to line items.

125
00:06:33,850 --> 00:06:38,160
Let's see how to bring them to the center of the flakes for this purpose.

126
00:06:38,230 --> 00:06:41,940
We can simply use a line item center to bring that in the center along.

127
00:06:41,990 --> 00:06:47,380
Cross access and use justified content to bring them in center along main axis.

128
00:06:47,530 --> 00:06:48,520
So let's give it a try.

129
00:06:49,420 --> 00:06:50,480
Let's remove this.

130
00:06:50,530 --> 00:06:50,960
Let's see.

131
00:06:51,790 --> 00:06:53,500
First, let's reduce the number of items.

132
00:06:53,770 --> 00:06:56,050
So that will give us a bit of clarity.

133
00:06:56,710 --> 00:06:57,780
So let's remove this.

134
00:06:58,580 --> 00:06:59,270
And this is real.

135
00:06:59,500 --> 00:07:01,540
So now we're just left for items.

136
00:07:02,860 --> 00:07:09,540
So going back here, let's give it a line item to bring it center across the cross axis.

137
00:07:10,390 --> 00:07:13,310
So a line item on center.

138
00:07:14,450 --> 00:07:17,200
And now, as you can see, it is in the center horizontal.

139
00:07:17,830 --> 00:07:19,110
Now to bring it in the center.

140
00:07:19,150 --> 00:07:19,550
What good.

141
00:07:19,580 --> 00:07:21,410
You could simply use us to fly to London.

142
00:07:22,330 --> 00:07:23,850
So just to fly.

143
00:07:23,980 --> 00:07:25,270
Clinton Center.

144
00:07:25,390 --> 00:07:25,980
That's either.

145
00:07:26,920 --> 00:07:30,780
And now, as you can see, these four items are in the center of the death.

146
00:07:31,780 --> 00:07:32,750
That's all for today, guys.

147
00:07:32,890 --> 00:07:35,020
If there is something that you did not understand.

148
00:07:35,500 --> 00:07:38,020
Feel free to drop a comment and we will discuss it.

149
00:07:38,890 --> 00:07:39,830
See you in the next video.

150
00:07:40,030 --> 00:07:40,350
Bye.

151
00:07:40,510 --> 00:07:40,970
And Dick.