1 00:00:07,380 --> 00:00:08,640 In this video. 2 00:00:08,640 --> 00:00:12,390 Let's get started with Flexbox. 3 00:00:12,390 --> 00:00:16,590 So the first question is, what is Flexbox? 4 00:00:16,590 --> 00:00:19,050 Let's answer that. 5 00:00:19,080 --> 00:00:28,500 Flexbox makes it easier to design flexible, responsive layout structure without having to use floats 6 00:00:28,500 --> 00:00:30,630 or positioning properly. 7 00:00:30,990 --> 00:00:40,500 So in a nutshell, Flexbox is used to work layout elements on a web page without using these properties. 8 00:00:40,680 --> 00:00:46,050 And one cool thing about Flexbox is that it is responsive. 9 00:00:46,080 --> 00:00:53,040 So if you want to master responsive design, then the first step is to understand. 10 00:00:53,040 --> 00:01:01,950 Flexbox So let's see, do you remember and our positioning, this is a project that we built and we 11 00:01:01,950 --> 00:01:09,150 use what is called relative, absolute and then fixed positioning to design this website. 12 00:01:09,150 --> 00:01:15,990 And you can see that unless we play around with it a little bit before we can get something of this 13 00:01:15,990 --> 00:01:16,620 sort. 14 00:01:16,770 --> 00:01:22,380 But with Flexbox, we're going to make it pretty easy to lay out your content. 15 00:01:22,440 --> 00:01:27,690 And one cool thing about Flexbox is that, like I said, it is responsive. 16 00:01:27,720 --> 00:01:35,040 So using this properties, that is the position and properties it is not responsive by default. 17 00:01:35,040 --> 00:01:42,810 So let me show you now, if I reduce my browser window, you can see how the elements are being scattered 18 00:01:42,810 --> 00:01:47,820 around as compared to the one that you are going to design with. 19 00:01:47,820 --> 00:01:51,240 Flexbox And Responsive Design Technique. 20 00:01:51,240 --> 00:01:58,650 Well, we can convert this one to make use of responsive design by going to be a lot of work as compared 21 00:01:58,650 --> 00:02:00,870 to the Flexbox technique. 22 00:02:00,870 --> 00:02:02,520 So let's get started. 23 00:02:02,520 --> 00:02:11,760 So as always, I have created some pool project with one HTML file and then the CSS for this video. 24 00:02:11,760 --> 00:02:14,790 We are focusing on the Flexbox. 25 00:02:14,790 --> 00:02:20,010 Well, before we get started, let's understand this tool concept. 26 00:02:20,010 --> 00:02:29,370 When it comes to Flexbox, let's take it that on our web page we have a parent, Dave and inside the 27 00:02:29,370 --> 00:02:32,760 parent, Dave, we have eight children. 28 00:02:32,760 --> 00:02:35,100 Let's say this is child one. 29 00:02:35,100 --> 00:02:39,210 Dave And then try two and then child three. 30 00:02:39,570 --> 00:02:46,140 By default, the position property for all elements is called static. 31 00:02:46,440 --> 00:02:56,130 So if we want to use Flexbox, all what we need to do is to give a display called Flex on the parent. 32 00:02:56,340 --> 00:03:01,950 And in that case we call it as what, the flex container. 33 00:03:02,340 --> 00:03:05,130 So take note about flex container. 34 00:03:05,250 --> 00:03:16,230 It is the parent which has a display for flex and it children now becomes what is called flex items. 35 00:03:16,530 --> 00:03:22,680 So we have a flex container and then flex item, meaning the children. 36 00:03:22,890 --> 00:03:32,100 So with this one, we can control the positioning of the children based on the parent property. 37 00:03:32,100 --> 00:03:33,810 So let's practice that. 38 00:03:33,810 --> 00:03:36,210 So back to Visual Studio code. 39 00:03:36,300 --> 00:03:39,000 I provide this file for you. 40 00:03:39,150 --> 00:03:48,540 So if you open the HTML, so for this structure you can see that we have a parent container. 41 00:03:49,270 --> 00:03:59,370 And inside a parent container, we have the individual children as A, B and C with classes. 42 00:03:59,380 --> 00:04:02,830 CHILD One, two and three. 43 00:04:03,220 --> 00:04:13,030 So if we want to use Flexbox or what we need to do is to use display properly called flags on the parent. 44 00:04:13,240 --> 00:04:15,580 So now let's get back to the CSS. 45 00:04:15,580 --> 00:04:22,150 Before that, make sure that you run this application and you're going to have something like this. 46 00:04:22,360 --> 00:04:27,380 So let's get back to the CSS and let me show you what we have done on the parent. 47 00:04:27,400 --> 00:04:31,840 I gave it a bottom five pixels and width and height as that. 48 00:04:31,840 --> 00:04:34,390 And if you look at it, this is what we have. 49 00:04:34,390 --> 00:04:37,300 This is the parent grade. 50 00:04:37,300 --> 00:04:44,990 And then for child one, we have the width and height, which is equal and different background colors. 51 00:04:45,010 --> 00:04:53,260 So child one is A, B and C, so you can see how they are being positioning that is by default. 52 00:04:53,410 --> 00:05:03,760 So as soon as I look, it's my parents, which is this container and I add display core flags as that 53 00:05:03,760 --> 00:05:04,910 when I save it. 54 00:05:04,930 --> 00:05:06,400 Now have a look. 55 00:05:06,580 --> 00:05:08,830 We see how it is moving. 56 00:05:08,920 --> 00:05:11,500 That's how Flexbox works. 57 00:05:11,620 --> 00:05:20,020 So as soon as I added that, now it is the responsibility of the parent to control the direction of 58 00:05:20,020 --> 00:05:21,100 the children. 59 00:05:21,310 --> 00:05:31,090 So let's say that I want to have some spacing between these children, or I want the item to be at a 60 00:05:31,090 --> 00:05:36,460 center here, or I want the item to be at the bottom here or here. 61 00:05:36,490 --> 00:05:38,500 How are we going to do it? 62 00:05:38,920 --> 00:05:46,480 Well, to achieve that, unless we learn what is called the parent properties, meaning that on the 63 00:05:46,480 --> 00:05:56,290 parent, we have properties from Flexbox to be able to achieve how we can lay out the items or the children 64 00:05:56,290 --> 00:05:57,940 the way we want it. 65 00:05:57,970 --> 00:06:00,790 Let's get into that in the next video.