1
00:00:01,100 --> 00:00:01,760
‫Hey, there.

2
00:00:01,850 --> 00:00:02,630
‫Welcome back.

3
00:00:02,770 --> 00:00:03,710
‫Shame on the side.

4
00:00:04,280 --> 00:00:12,080
‫Now let us start one of the most important what I should say the most important topic of CSIS then now

5
00:00:12,080 --> 00:00:17,300
‫we have discussed a different topic just to create a structure as well as some styling.

6
00:00:17,780 --> 00:00:23,720
‫But now we are going to focus on how to make layout of any website or any other application.

7
00:00:24,700 --> 00:00:31,900
‫Now we are going to discuss about Flexbox now this topic is important and why you should focus on this

8
00:00:32,020 --> 00:00:35,560
‫because I've prepared some content beforehand.

9
00:00:37,030 --> 00:00:39,280
‫I'm also going to discuss about a guide.

10
00:00:41,290 --> 00:00:47,380
‫I'm also going to utilize a tool to describe this topic, and then we are also going to play a game.

11
00:00:48,280 --> 00:00:52,110
‫You can see the amount of preparation that I did for this topic.

12
00:00:52,120 --> 00:00:55,240
‫That means we are going to talk some serious content.

13
00:00:55,630 --> 00:00:57,040
‫I hope you are ready for it.

14
00:00:57,550 --> 00:01:03,610
‫Remember, after completing this whole section, it will be quite easy for you to design any type of

15
00:01:03,610 --> 00:01:05,500
‫layout with the help of Flexbox.

16
00:01:05,890 --> 00:01:13,360
‫It's an important topic help you to design any type of lay out pretty quickly, but to understand how

17
00:01:13,360 --> 00:01:16,000
‫to do that, it is going to take months off topic.

18
00:01:16,780 --> 00:01:21,790
‫Not only the practical part, but there are certain tree concept that I want to discuss.

19
00:01:22,270 --> 00:01:27,880
‫Yeah, it's important, and that's the reason I did tons of preparation for this lecture.

20
00:01:28,030 --> 00:01:29,530
‫What I should say in this section.

21
00:01:31,710 --> 00:01:34,510
‫So the first thing is I have created a symbolic vote.

22
00:01:34,770 --> 00:01:37,200
‫What I did is I created a container.

23
00:01:37,470 --> 00:01:41,110
‫This is our patent basically, and addicts are dangerous.

24
00:01:41,130 --> 00:01:44,670
‫So there are five child containers out of patent.

25
00:01:45,060 --> 00:01:47,400
‫And I done one item to item three.

26
00:01:47,400 --> 00:01:49,350
‫All of them are detailed.

27
00:01:50,100 --> 00:01:55,800
‫I also added some pics so we can define, Okay, this is item one, item two, item three.

28
00:01:56,190 --> 00:02:00,570
‫And I also added a glass call item so we can apply all the common changes.

29
00:02:01,810 --> 00:02:07,610
‫I don't want is the unique class, and I don't want to see common class applied the genders, that's

30
00:02:07,630 --> 00:02:07,960
‫done.

31
00:02:08,350 --> 00:02:10,870
‫Now let me jump on to Celeste here.

32
00:02:10,900 --> 00:02:12,610
‫I have a better deformed face.

33
00:02:12,610 --> 00:02:13,370
‫Totally.

34
00:02:13,390 --> 00:02:18,430
‫I need something big so I can have these items, as well as any other number that I had.

35
00:02:18,880 --> 00:02:23,070
‫Then change font family as well as the color in color.

36
00:02:23,710 --> 00:02:29,890
‫And I have updated certain settings, so I have added weight as well as height aligned tag center and

37
00:02:29,890 --> 00:02:32,080
‫then border radius for all of them.

38
00:02:33,080 --> 00:02:39,430
‫Then the next thing I did is I head is our container, which is basically are parent and added a chocolate.

39
00:02:39,950 --> 00:02:41,780
‫OK, you can assume this is blue.

40
00:02:42,470 --> 00:02:47,420
‫And then I added a different color for each child, which is light on one two three.

41
00:02:47,690 --> 00:02:49,760
‫So we can recognize them easily.

42
00:02:50,270 --> 00:02:55,610
‫Pretty simple format just to have a better visual experience for each item.

43
00:02:57,010 --> 00:02:57,620
‫That's it.

44
00:02:57,640 --> 00:02:59,230
‫That's deeply preparation.

45
00:02:59,410 --> 00:03:00,760
‫I hope you got the idea.

46
00:03:02,030 --> 00:03:07,850
‫Now, the important thing that you need to understand is the parent and child relationship, her container

47
00:03:07,850 --> 00:03:13,880
‫as parent and item one two three four, as well as five its child.

48
00:03:14,720 --> 00:03:17,150
‫I hope you have this much information.

49
00:03:17,810 --> 00:03:18,260
‫OK.

50
00:03:18,350 --> 00:03:18,920
‫That's it.

51
00:03:19,160 --> 00:03:21,460
‫Now let me get back to our crew now.

52
00:03:21,500 --> 00:03:26,210
‫If I want to work with this container, you can see we are actually having the complete view.

53
00:03:26,450 --> 00:03:28,070
‫That means complete screen.

54
00:03:28,430 --> 00:03:30,260
‫Then this is item one.

55
00:03:30,350 --> 00:03:30,950
‫Definitely.

56
00:03:30,950 --> 00:03:37,300
‫It's a device that is going to be block having 100 percent work item two, three four as well as five.

57
00:03:37,970 --> 00:03:41,810
‫So all the item following the predefined display images block.

58
00:03:43,240 --> 00:03:47,410
‫Now, what I'm going to do is I'm going to change their display to Flex.

59
00:03:47,980 --> 00:03:48,270
‫Yup.

60
00:03:48,970 --> 00:03:51,280
‫We are going to change debate and display.

61
00:03:51,450 --> 00:03:54,460
‫And they are going Virginia to flex now.

62
00:03:54,640 --> 00:03:55,900
‫Two important things.

63
00:03:56,260 --> 00:03:57,190
‫The first one is.

64
00:03:58,630 --> 00:04:03,550
‫There is container which is building, and then there is item, which is their children.

65
00:04:04,180 --> 00:04:08,050
‫We have certain properties with parent that affect child.

66
00:04:08,180 --> 00:04:12,970
‫So that means we have certain properties that we are going to apply to bidding.

67
00:04:14,690 --> 00:04:21,170
‫And according to that, the layout of all tiles will affect, so that is we are going to do something

68
00:04:21,170 --> 00:04:21,770
‫with bidding.

69
00:04:22,400 --> 00:04:25,550
‫Then there are individual property for each child.

70
00:04:25,580 --> 00:04:28,430
‫That means for item one, item two, item three.

71
00:04:28,670 --> 00:04:34,970
‫So that means if you want to change certain properties of individual child, we can do that with the

72
00:04:34,970 --> 00:04:37,910
‫help of properties that are available with item.

73
00:04:38,810 --> 00:04:45,050
‫So in simple words, we have certain properties related to parent on the left side and then we have

74
00:04:45,050 --> 00:04:48,110
‫certain properties related to child on the right side.

75
00:04:48,320 --> 00:04:51,260
‫That said, OK, dad, all.

76
00:04:51,380 --> 00:04:52,490
‫Long story.

77
00:04:52,760 --> 00:04:53,600
‫Get back here.

78
00:04:54,320 --> 00:04:56,180
‫This is my container, my period.

79
00:04:56,250 --> 00:05:02,720
‫What I'm going to do is I'm going to add display and I'm going to change it to Flex, which basically

80
00:05:02,720 --> 00:05:04,310
‫means flexible layout.

81
00:05:04,550 --> 00:05:05,760
‫If I save this one?

82
00:05:05,780 --> 00:05:06,590
‫Get back here.

83
00:05:07,460 --> 00:05:11,600
‫OK, now we can see this whole change.

84
00:05:11,930 --> 00:05:16,670
‫So this is I don't want two three, four five and this is our container background color.

85
00:05:17,120 --> 00:05:19,640
‫You can see this is a container background color.

86
00:05:20,510 --> 00:05:21,800
‫And if I squeeze them.

87
00:05:23,370 --> 00:05:30,590
‫Hey, you can see all the items are changing their very size as well as they are stuck only in one line.

88
00:05:30,660 --> 00:05:34,980
‫That means we are following some predefined properties.

89
00:05:35,220 --> 00:05:41,310
‫That's why they are following the horizontal path and they are only capturing the defined work.

90
00:05:42,620 --> 00:05:46,760
‫As well as if we try to squeeze them, they are changing their size.

91
00:05:47,480 --> 00:05:48,620
‫So that is important.

92
00:05:49,160 --> 00:05:52,340
‫That means there are certain default properties that we are following.

93
00:05:52,490 --> 00:05:56,240
‫And that's where the first property with be come into picture.

94
00:05:56,270 --> 00:06:03,290
‫Remember, we have applied this display flex to complete parent and all details are affected in the

95
00:06:03,290 --> 00:06:09,170
‫form of layout and the background color is related to our container, which is parent.

96
00:06:10,310 --> 00:06:10,980
‫OK.

97
00:06:11,900 --> 00:06:13,700
‫This is our display flex.

98
00:06:13,880 --> 00:06:17,660
‫Now I'm going to apply the first property, which is flex direction.

99
00:06:20,000 --> 00:06:26,540
‫Now, this flextime action has all value by default, we are falling low, and that is why you are seeing

100
00:06:26,540 --> 00:06:27,950
‫this this layout.

101
00:06:28,010 --> 00:06:30,500
‫That means we are following some horizontal layout.

102
00:06:31,310 --> 00:06:38,240
‫If I try to use reverse, that means I'm going to follow the horizontal path, but everything will be

103
00:06:38,240 --> 00:06:39,050
‫reversed now.

104
00:06:39,110 --> 00:06:47,030
‫We have item one, item two, three four as well as five, so we just reverse the current troop grade.

105
00:06:47,390 --> 00:06:48,440
‫Then we have column.

106
00:06:49,980 --> 00:06:50,820
‫Save this one.

107
00:06:50,970 --> 00:06:54,990
‫What it is going to do is that it's going to fall a one two three four five.

108
00:06:55,500 --> 00:06:57,150
‫But if I do call and reverse.

109
00:06:58,090 --> 00:06:59,080
‫It will be reversed.

110
00:06:59,200 --> 00:07:02,110
‫That means we will have to one.

111
00:07:02,860 --> 00:07:04,750
‫That means five four three two one.

112
00:07:05,620 --> 00:07:08,890
‫So that's how these four night action followed.

113
00:07:08,980 --> 00:07:12,460
‫Now remember, here we are applying these changes on parent.

114
00:07:13,150 --> 00:07:17,200
‫That means this flextime action is slated to appear in property.

115
00:07:17,680 --> 00:07:19,240
‫Let me go back to the law itself.

116
00:07:19,360 --> 00:07:21,010
‫That is the default property.

117
00:07:21,190 --> 00:07:26,500
‫You don't have to write this one, but for now, I am mentioning here because I'm going to discuss some

118
00:07:26,500 --> 00:07:27,520
‫tree concepts.

119
00:07:28,000 --> 00:07:32,440
‫Now, remember, it's important, and most of the courses miss out on this concept.

120
00:07:34,070 --> 00:07:40,690
‫So if you jump in and click here with regards to basics and TomTom's, you will get tons of concept

121
00:07:40,700 --> 00:07:42,110
‫and these are important.

122
00:07:43,120 --> 00:07:46,150
‫Here, I need to discuss about this whole diagram.

123
00:07:48,010 --> 00:07:53,980
‫What I'm going to do is I'm going to jump on to my notebook and discuss everything step by step.

124
00:07:54,700 --> 00:07:59,050
‫So this is our container, which you can see this flex container.

125
00:07:59,530 --> 00:08:01,700
‫And then here we have our item one.

126
00:08:01,720 --> 00:08:03,730
‫Our Item two looks fine.

127
00:08:04,420 --> 00:08:07,270
‫Now when we follow flex direction as raw.

128
00:08:08,750 --> 00:08:16,820
‫That means we are following a horizontal path, no means we are going from one to three in this direction.

129
00:08:17,180 --> 00:08:22,790
‫That means when we followed this part, our main exercises on our horizontal part.

130
00:08:23,030 --> 00:08:29,420
‫So this is our main access when we are falling rule and this is our cross axes.

131
00:08:29,870 --> 00:08:37,700
‫Now why this is important because 13 properties of bearing depend on this mean axes and certain property

132
00:08:37,700 --> 00:08:40,760
‫of our parent depend on this cross access.

133
00:08:41,450 --> 00:08:43,250
‫So it's important for you.

134
00:08:44,400 --> 00:08:51,030
‫Now, remember the direction we are flowing from left to right, as well as from top to bottom.

135
00:08:51,570 --> 00:08:58,530
‫When we withdraw support, if we change anything, that means if our direction change from road to column,

136
00:08:58,680 --> 00:08:59,700
‫things will be different.

137
00:09:01,120 --> 00:09:06,550
‫Let me design our container again, and then our item will be followed as one.

138
00:09:07,000 --> 00:09:08,920
‫And this is going to be two.

139
00:09:12,150 --> 00:09:14,970
‫So that means the main axis will be this one.

140
00:09:15,890 --> 00:09:18,830
‫And across access will be this one.

141
00:09:19,190 --> 00:09:21,530
‫Remember, this is just reversed.

142
00:09:21,920 --> 00:09:26,260
‫This is going to be mean and this is going to be across.

143
00:09:26,990 --> 00:09:28,790
‫And this is important concept.

144
00:09:30,330 --> 00:09:34,590
‫Now, remember, when we are following you, we are following the horizontal direction.

145
00:09:34,620 --> 00:09:40,890
‫That means mean axis will be the horizontal one because we are following the horizontal direction.

146
00:09:41,100 --> 00:09:44,940
‫This is mean and then the opposite one will be the cross axis.

147
00:09:45,510 --> 00:09:47,670
‫Now when we are following column.

148
00:09:51,190 --> 00:09:53,830
‫That means we are following the vertical direction.

149
00:09:53,980 --> 00:09:59,290
‫So this is going to be Ottoman axis and the opposite one will be the cross axis.

150
00:10:00,190 --> 00:10:02,260
‫That's the important point.

151
00:10:03,010 --> 00:10:09,760
‫Now in future, we are going to talk about two properties that depend on men as well as grass on main

152
00:10:09,760 --> 00:10:11,140
‫axis are justified.

153
00:10:11,140 --> 00:10:14,780
‫Content will depend on cross axes are aligned.

154
00:10:14,780 --> 00:10:15,670
‫I stumbled upon.

155
00:10:17,920 --> 00:10:20,500
‫And this is going to remain same here also.

156
00:10:21,520 --> 00:10:27,430
‫So that means when we are working, withdraw just if I can, then changed everything on this horizontal

157
00:10:27,430 --> 00:10:27,820
‫layout.

158
00:10:28,270 --> 00:10:31,930
‫But then we are working with column just if our content changed.

159
00:10:32,050 --> 00:10:32,900
‫What layout?

160
00:10:33,760 --> 00:10:34,180
‫OK?

161
00:10:34,240 --> 00:10:37,990
‫This sound confusing, but as we break this, things will improve.

162
00:10:39,090 --> 00:10:44,140
‫Let's get back to our courting part, so by default, we have this direction as raw.

163
00:10:44,520 --> 00:10:48,030
‫Let us talk about a few other things such as Flex Wrap.

164
00:10:48,390 --> 00:10:51,720
‫So if you'll get back ahead, then I try to squeeze this one.

165
00:10:52,050 --> 00:10:56,130
‫You can see all of them are still on these same horizontal axis.

166
00:10:56,730 --> 00:11:02,100
‫But if I add, flex it up and by default, it is at Noora.

167
00:11:02,130 --> 00:11:05,070
‫That means we are not moving towards a different line.

168
00:11:05,430 --> 00:11:07,910
‫But if I use wrap, save this one.

169
00:11:07,920 --> 00:11:08,760
‫Get back here.

170
00:11:09,180 --> 00:11:17,910
‫And if I try to squeeze it, you can see as we squeeze all the item, all the items that we are going

171
00:11:17,910 --> 00:11:20,910
‫to grab, just drop and go a new line.

172
00:11:21,210 --> 00:11:26,850
‫So if you just try to decrease the size as soon as I touch the point here.

173
00:11:29,230 --> 00:11:34,000
‫It start moving to a new line and team follows one other items.

174
00:11:34,630 --> 00:11:35,140
‫You see?

175
00:11:36,890 --> 00:11:37,190
‫Yep.

176
00:11:37,790 --> 00:11:43,070
‫So that's how this is going to work, and it's an important property that help us through design responsive

177
00:11:43,070 --> 00:11:43,670
‫content.

178
00:11:44,360 --> 00:11:45,590
‫So I hope you got the idea.

179
00:11:45,590 --> 00:11:46,340
‫What this job?

180
00:11:46,940 --> 00:11:48,570
‫Now I hope you got the idea.

181
00:11:48,590 --> 00:11:51,620
‫What is no wrap itself, but there are 13 other values.

182
00:11:52,010 --> 00:11:56,240
‫So if you see the reverse, that means it will be exactly the opposite.

183
00:11:57,360 --> 00:12:00,720
‫Everything is working fine, but as soon as I decrease the size.

184
00:12:01,080 --> 00:12:06,090
‫So instead of five going down, you will see five going up, for example.

185
00:12:07,560 --> 00:12:08,040
‫You see.

186
00:12:08,550 --> 00:12:12,330
‫And if I were to criticize again four, then three.

187
00:12:12,900 --> 00:12:13,980
‫Now all of them.

188
00:12:14,220 --> 00:12:15,900
‫So we did just oppose it.

189
00:12:16,560 --> 00:12:20,550
‫OK, you don't need to remember them as we walk, as you build some projects.

190
00:12:20,880 --> 00:12:24,480
‫You will gain experience, but drop as an important property.

191
00:12:24,720 --> 00:12:26,430
‫So here this is important.

192
00:12:28,620 --> 00:12:32,440
‫Now there is one more property, which is known as Flex Float.

193
00:12:37,260 --> 00:12:41,190
‫This is basically the combination of flex direction as well as Rob.

194
00:12:41,610 --> 00:12:45,810
‫So had we passed to fields, the first one would be the flex direction.

195
00:12:46,140 --> 00:12:51,900
‫And then the second one will be flex it up so that we don't need to write them separately.

196
00:12:52,080 --> 00:12:53,460
‫They are combined here.

197
00:12:53,520 --> 00:12:54,720
‫If I get back here.

198
00:12:56,130 --> 00:12:58,100
‫You can see our Flex Wrap as walking.

199
00:12:58,830 --> 00:13:01,530
‫So if I try to change this to column.

200
00:13:03,960 --> 00:13:04,840
‫Save this one.

201
00:13:04,860 --> 00:13:11,280
‫Get back here now you can see the Column Direction one two three four five, so I hope you got the idea

202
00:13:11,640 --> 00:13:11,960
‫here.

203
00:13:11,970 --> 00:13:13,800
‫Let me try to use reverse.

204
00:13:17,410 --> 00:13:22,660
‫Remember, if we are on go reverse and will start from one two, three, four five, and if I try to

205
00:13:22,660 --> 00:13:26,800
‫decrease the size, you can see things are going in a different way.

206
00:13:27,760 --> 00:13:29,320
‫So that's how this is going to work.

207
00:13:29,740 --> 00:13:32,230
‫Again, you don't have to remember all of them.

208
00:13:32,560 --> 00:13:34,540
‫Make sure you don't try to lock them up.

209
00:13:35,290 --> 00:13:40,840
‫So that's all for this lecture and the next lecture, we are going to understand more concept, understand

210
00:13:40,840 --> 00:13:47,350
‫how we can work with all the different properties and going to utilize the concept of mean as well as

211
00:13:47,350 --> 00:13:47,800
‫grass.

212
00:13:48,550 --> 00:13:50,150
‫I hope this lecture was helpful.

213
00:13:50,200 --> 00:13:56,320
‫You got some basic idea about flex blocks and we are going to continue this in the next one.

214
00:13:56,590 --> 00:13:59,380
‫Thank you for following and I see you guys in the next one.