Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,130 --> 00:00:02,824 Welcome back to the second part 2 2 00:00:02,824 --> 00:00:07,200 of this quick crash course to Flexbox. 3 3 00:00:07,200 --> 00:00:09,380 So this is where we left off in the last video, 4 4 00:00:09,380 --> 00:00:13,646 and we already have the hero part and the price part ready 5 5 00:00:13,646 --> 00:00:16,420 so now we're gonna worry about the content. 6 6 00:00:16,420 --> 00:00:17,850 And just as a reminder, 7 7 00:00:17,850 --> 00:00:20,790 this is what it's gonna look like in the end. 8 8 00:00:20,790 --> 00:00:22,200 Okay, so this is a reference. 9 9 00:00:22,200 --> 00:00:26,750 And let's now recreate this using the power of Flexbox. 10 10 00:00:26,750 --> 00:00:29,010 Giving us some more space here. 11 11 00:00:29,010 --> 00:00:32,563 And I will start with the markup for the first part. 12 12 00:00:33,850 --> 00:00:35,270 So in the content, 13 13 00:00:35,270 --> 00:00:38,043 I'm gonna create a pizza title element. 14 14 00:00:51,380 --> 00:00:52,213 And in there, 15 15 00:00:52,213 --> 00:00:53,810 we will have the title 16 16 00:00:53,810 --> 00:00:56,880 and the two tags that I showed you before. 17 17 00:00:56,880 --> 00:01:00,260 So let's actually take a look at that again. 18 18 00:01:00,260 --> 00:01:02,064 So this entire element here, 19 19 00:01:02,064 --> 00:01:04,681 this will be the pizza title. 20 20 00:01:04,681 --> 00:01:07,260 And so this will be the heading. 21 21 00:01:07,260 --> 00:01:08,540 This part will be the heading. 22 22 00:01:08,540 --> 00:01:10,343 And then these two tags here. 23 23 00:01:12,380 --> 00:01:14,253 Okay, so we have an h1. 24 24 00:01:23,407 --> 00:01:26,574 And this one is called pizza vegetale. 25 25 00:01:28,750 --> 00:01:31,190 And let me add a small emoji here. 26 26 00:01:31,190 --> 00:01:32,050 And if you're on a Mac, 27 27 00:01:32,050 --> 00:01:33,800 to get this emoji window here, 28 28 00:01:33,800 --> 00:01:36,444 you just have to type control+command+space 29 29 00:01:36,444 --> 00:01:38,670 and then... 30 30 00:01:38,670 --> 00:01:39,743 Where is that? 31 31 00:01:41,690 --> 00:01:43,440 So that's the one I'm looking for. 32 32 00:01:43,440 --> 00:01:44,273 On Windows, 33 33 00:01:44,273 --> 00:01:46,650 I'm not really sure how to do it. 34 34 00:01:46,650 --> 00:01:47,990 Actually, if you don't like these emojis, 35 35 00:01:47,990 --> 00:01:50,140 you can just skip them altogether. 36 36 00:01:50,140 --> 00:01:52,650 Okay, I find them fun here in this user interface. 37 37 00:01:52,650 --> 00:01:53,959 Instead of using real icons, 38 38 00:01:53,959 --> 00:01:57,093 I just use these ones. 39 39 00:01:58,210 --> 00:01:59,420 So that is the h1 40 40 00:01:59,420 --> 00:02:02,853 and let's get these tags. 41 41 00:02:07,510 --> 00:02:08,730 So pizza tag. 42 42 00:02:08,730 --> 00:02:09,563 And if you remember, 43 43 00:02:09,563 --> 00:02:11,980 there were two of them and they had different colors. 44 44 00:02:11,980 --> 00:02:14,460 So now I'm gonna use that modifier 45 45 00:02:14,460 --> 00:02:16,270 as I was telling you before. 46 46 00:02:16,270 --> 00:02:18,970 So we have pizza tag to style both of them. 47 47 00:02:18,970 --> 00:02:21,120 And then I'm gonna add a more specific class 48 48 00:02:21,120 --> 00:02:22,380 to each of them. 49 49 00:02:22,380 --> 00:02:27,337 So this is gonna be the pizza tag and then dash dash one. 50 50 00:02:28,815 --> 00:02:29,648 And then the other one, 51 51 00:02:29,648 --> 00:02:30,481 as you can guess, 52 52 00:02:30,481 --> 00:02:31,314 will be the number two. 53 53 00:02:37,490 --> 00:02:39,440 So you wanna say that it's a vegetarian 54 54 00:02:42,290 --> 00:02:44,623 and also that it's Italian. 55 55 00:02:46,460 --> 00:02:49,420 Okay, so that's it for the title. 56 56 00:02:49,420 --> 00:02:52,363 So let's go ahead and actually style them. 57 57 00:03:00,570 --> 00:03:01,900 So pizza heading. 58 58 00:03:01,900 --> 00:03:05,670 And actually, I'm missing the pizza title. 59 59 00:03:05,670 --> 00:03:07,423 Let's go ahead and copy this. 60 60 00:03:10,310 --> 00:03:14,583 Title and the tag. 61 61 00:03:18,980 --> 00:03:20,363 And also tag one and two. 62 62 00:03:24,550 --> 00:03:26,950 And these will only have one line of code, so... 63 63 00:03:31,490 --> 00:03:34,620 Alright, first of all, 64 64 00:03:34,620 --> 00:03:37,910 we wanna have these three elements here side by side. 65 65 00:03:37,910 --> 00:03:40,810 Okay, so by now, you already know how to do that. 66 66 00:03:40,810 --> 00:03:41,951 So all we have to do 67 67 00:03:41,951 --> 00:03:44,850 is decide what the flex container will be 68 68 00:03:44,850 --> 00:03:47,380 and that is, of course, the pizza title. 69 69 00:03:47,380 --> 00:03:50,620 Alright, so that is the element that contains these three. 70 70 00:03:50,620 --> 00:03:54,320 So pizza title will be display flex. 71 71 00:03:57,120 --> 00:03:58,170 And just like this, 72 72 00:03:58,170 --> 00:03:59,870 they should be now side by side. 73 73 00:03:59,870 --> 00:04:01,950 They don't really fit because this text is super large. 74 74 00:04:01,950 --> 00:04:03,910 So let me actually go ahead 75 75 00:04:03,910 --> 00:04:06,130 and decrease that in the heading. 76 76 00:04:06,130 --> 00:04:09,510 So font size, 20 pixels. 77 77 00:04:12,474 --> 00:04:16,250 And now, as for these tags, 78 78 00:04:16,250 --> 00:04:17,820 let's also just style them. 79 79 00:04:17,820 --> 00:04:20,529 And we're gonna take care of the alignment 80 80 00:04:20,529 --> 00:04:22,263 and all that stuff a bit later. 81 81 00:04:24,350 --> 00:04:25,183 So for these, 82 82 00:04:25,183 --> 00:04:28,320 we want a font size of 10 pixels. 83 83 00:04:28,320 --> 00:04:30,180 So kinda small. 84 84 00:04:30,180 --> 00:04:31,663 We want them to be uppercase. 85 85 00:04:35,910 --> 00:04:37,173 So uppercase. 86 86 00:04:38,650 --> 00:04:39,740 Their color should be white 87 87 00:04:39,740 --> 00:04:42,340 because each of them should have a background color. 88 88 00:04:44,370 --> 00:04:45,203 And so for now, 89 89 00:04:45,203 --> 00:04:46,210 they will kind of disappear. 90 90 00:04:46,210 --> 00:04:47,043 So let's go ahead 91 91 00:04:47,043 --> 00:04:48,810 and actually give each of them a background color. 92 92 00:04:48,810 --> 00:04:49,879 The first one is green. 93 93 00:04:49,879 --> 00:04:51,029 The second one is blue. 94 94 00:04:55,510 --> 00:04:56,343 Where are we? 95 95 00:04:59,850 --> 00:05:01,330 Background color is this one 96 96 00:05:01,330 --> 00:05:04,027 and here we have the blue one. 97 97 00:05:15,430 --> 00:05:16,263 Alright. 98 98 00:05:18,420 --> 00:05:20,500 Let's just give them some padding. 99 99 00:05:20,500 --> 00:05:22,533 Two pixels on top, seven on the sides. 100 100 00:05:26,710 --> 00:05:28,300 And some border radius. 101 101 00:05:28,300 --> 00:05:29,350 Something really large. 102 102 00:05:29,350 --> 00:05:30,183 It doesn't really matter. 103 103 00:05:30,183 --> 00:05:32,433 All we want is this exact look here. 104 104 00:05:34,640 --> 00:05:36,990 And now finally some spacing between them. 105 105 00:05:36,990 --> 00:05:41,263 So I'm gonna give them both margin left of seven pixels. 106 106 00:05:42,620 --> 00:05:44,460 Alright, so that looks great already. 107 107 00:05:44,460 --> 00:05:47,827 So now what we want is these two on the right side 108 108 00:05:47,827 --> 00:05:51,000 and, of course, they shouldn't stretch like this. 109 109 00:05:51,000 --> 00:05:52,840 And that's the easiest part, right? 110 110 00:05:52,840 --> 00:05:55,380 Because remember that the default value 111 111 00:05:55,380 --> 00:05:58,500 of the align items property is stretch. 112 112 00:05:58,500 --> 00:06:00,940 And that's why along the cross axis 113 113 00:06:00,940 --> 00:06:02,700 they're now stretched like this. 114 114 00:06:02,700 --> 00:06:05,390 So we need to go to the flex container 115 115 00:06:05,390 --> 00:06:07,203 and say, align items, 116 116 00:06:08,350 --> 00:06:10,650 and in this case we want them centered. 117 117 00:06:10,650 --> 00:06:12,750 So watch what happens. 118 118 00:06:12,750 --> 00:06:15,830 Yeah, now they're really nicely vertically aligned 119 119 00:06:15,830 --> 00:06:17,550 with this title here. 120 120 00:06:17,550 --> 00:06:18,610 So without Flexbox, 121 121 00:06:18,610 --> 00:06:21,300 you would now have to go ahead 122 122 00:06:21,300 --> 00:06:23,220 and add some margin to the top 123 123 00:06:23,220 --> 00:06:25,520 and really guess how you'd want this to look. 124 124 00:06:25,520 --> 00:06:26,590 But like this, it's so much easier. 125 125 00:06:26,590 --> 00:06:27,670 We don't have to guess anything 126 126 00:06:27,670 --> 00:06:29,810 in order to make them vertically aligned. 127 127 00:06:29,810 --> 00:06:32,702 All we have to do is write one line of code 128 128 00:06:32,702 --> 00:06:33,750 and that's it. 129 129 00:06:33,750 --> 00:06:35,350 Really straightforward 130 130 00:06:35,350 --> 00:06:37,483 with really just a small amount of code. 131 131 00:06:38,440 --> 00:06:39,273 And before we move on, 132 132 00:06:39,273 --> 00:06:42,160 let's give this entire container here some padding. 133 133 00:06:42,160 --> 00:06:44,863 So, its the pizza content. 134 134 00:06:48,690 --> 00:06:50,270 So 35 top, bottom. 135 135 00:06:50,270 --> 00:06:52,590 30 left and right. 136 136 00:06:52,590 --> 00:06:54,020 And now all we have to do 137 137 00:06:54,020 --> 00:06:56,930 is actually make these two, 138 138 00:06:56,930 --> 00:06:58,840 basically push them to the right side 139 139 00:06:58,840 --> 00:07:00,190 all the way that they can. 140 140 00:07:00,190 --> 00:07:01,930 There are two ways of doing this. 141 141 00:07:01,930 --> 00:07:03,560 So let's think about it. 142 142 00:07:03,560 --> 00:07:06,410 Well, first we could make it so this title here, 143 143 00:07:06,410 --> 00:07:07,250 this heading, 144 144 00:07:07,250 --> 00:07:09,500 occupies all the empty space. 145 145 00:07:09,500 --> 00:07:11,560 Right, that would automatically push these two 146 146 00:07:11,560 --> 00:07:12,543 to the right side. 147 147 00:07:13,400 --> 00:07:15,573 Okay, so let me show that to you. 148 148 00:07:16,730 --> 00:07:19,900 We could say flex one. 149 149 00:07:19,900 --> 00:07:21,330 And then, just like this, 150 150 00:07:21,330 --> 00:07:23,157 you saw that these two were pushed to the right. 151 151 00:07:23,157 --> 00:07:26,670 Now let's actually take a look at that in the inspector. 152 152 00:07:26,670 --> 00:07:28,353 In the Chrome dev tools. 153 153 00:07:34,790 --> 00:07:35,623 So you see, 154 154 00:07:35,623 --> 00:07:37,260 it now occupies this entire space here. 155 155 00:07:37,260 --> 00:07:41,433 Whether, when we remove it, then it only has this space. 156 156 00:07:42,800 --> 00:07:43,730 Now this is not ideal 157 157 00:07:43,730 --> 00:07:47,110 because actually the element should really end here. 158 158 00:07:47,110 --> 00:07:52,110 This h1 should kinda end here where it does end actually 159 159 00:07:52,717 --> 00:07:56,780 and not expand like that all the way to the right side. 160 160 00:07:56,780 --> 00:07:58,710 Okay, instead what we can do... 161 161 00:07:58,710 --> 00:08:00,930 Let me bring that down here a bit. 162 162 00:08:00,930 --> 00:08:02,440 What we can do instead 163 163 00:08:02,440 --> 00:08:04,030 is to give it a margin right 164 164 00:08:06,210 --> 00:08:08,890 and set that one to auto 165 165 00:08:08,890 --> 00:08:11,090 and that will visually have the same effect. 166 166 00:08:11,090 --> 00:08:15,073 But now you see that the extra space is actually a margin. 167 167 00:08:16,273 --> 00:08:17,984 And that margin will always automatically 168 168 00:08:17,984 --> 00:08:22,110 take all the empty space and occupy it. 169 169 00:08:22,110 --> 00:08:27,110 Let's say that this entire element here 170 170 00:08:27,170 --> 00:08:29,550 was a lot larger, like 900 pixels. 171 171 00:08:29,550 --> 00:08:31,350 Well, now you see that we have a lot more space here 172 172 00:08:31,350 --> 00:08:33,507 and that space is automatically occupied 173 173 00:08:33,507 --> 00:08:37,433 by that margin right set to auto. 174 174 00:08:38,800 --> 00:08:39,790 Let's get rid of that here. 175 175 00:08:39,790 --> 00:08:44,000 Of course, we want 800. 176 176 00:08:44,000 --> 00:08:46,402 Okay, that was just to demonstrate it to you. 177 177 00:08:46,402 --> 00:08:49,646 So nice, again we used Flexbox and a couple of techniques 178 178 00:08:49,646 --> 00:08:54,646 to very easily achieve this great looking part here 179 179 00:08:54,890 --> 00:08:55,970 of this component. 180 180 00:08:55,970 --> 00:08:57,882 Okay, so I hope you start seeing 181 181 00:08:57,882 --> 00:08:59,993 how handy this actually is. 182 182 00:09:01,310 --> 00:09:02,143 So next up, 183 183 00:09:02,143 --> 00:09:03,740 we just have this small text. 184 184 00:09:03,740 --> 00:09:05,353 Let's go ahead and copy it. 185 185 00:09:06,530 --> 00:09:07,400 And then finally we will have 186 186 00:09:07,400 --> 00:09:09,373 these icons here with this data. 187 187 00:09:10,980 --> 00:09:13,430 So right after the pizza content, 188 188 00:09:13,430 --> 00:09:18,430 we have a paragraph with a class of pizza description. 189 189 00:09:22,600 --> 00:09:23,523 Then the text. 190 190 00:09:24,980 --> 00:09:26,290 And close it. 191 191 00:09:26,290 --> 00:09:29,413 So pizza description. 192 192 00:09:33,800 --> 00:09:36,590 And I think there's something wrong here. 193 193 00:09:36,590 --> 00:09:38,680 Oh yeah, so I put this paragraph 194 194 00:09:38,680 --> 00:09:40,200 outside of the pizza content 195 195 00:09:40,200 --> 00:09:43,180 and so now we basically have four flex items 196 196 00:09:43,180 --> 00:09:45,240 in this pizza container. 197 197 00:09:45,240 --> 00:09:48,180 But that's not where I want this to be obviously. 198 198 00:09:48,180 --> 00:09:52,720 It should still be inside of the pizza content. 199 199 00:09:52,720 --> 00:09:54,920 So right after this one actually. 200 200 00:09:54,920 --> 00:09:55,780 So let's see. 201 201 00:09:55,780 --> 00:09:57,280 Yeah, that looks a lot better. 202 202 00:09:58,550 --> 00:10:02,400 So let's just give this a font size of 14 pixels. 203 203 00:10:02,400 --> 00:10:06,820 And then give some margin to the pizza heading, 204 204 00:10:06,820 --> 00:10:08,070 actually the pizza title. 205 205 00:10:11,510 --> 00:10:15,023 Margin bottom and let's say 20 pixels. 206 206 00:10:16,170 --> 00:10:18,380 And so finally, let's create an element 207 207 00:10:18,380 --> 00:10:22,790 which will then contain these three elements here. 208 208 00:10:22,790 --> 00:10:26,143 So these three data about this pizza. 209 209 00:10:27,850 --> 00:10:31,653 So that is gonna be called the pizza details. 210 210 00:10:46,280 --> 00:10:51,280 Alright, in there we have three pizza detail. 211 211 00:10:51,679 --> 00:10:52,512 So without the S. 212 212 00:10:52,512 --> 00:10:54,223 So three paragraphs basically. 213 213 00:11:00,850 --> 00:11:02,920 So one pizza detail. 214 214 00:11:02,920 --> 00:11:04,910 And I will have a small span here 215 215 00:11:04,910 --> 00:11:05,743 for the emoji 216 216 00:11:05,743 --> 00:11:07,923 so I can give it some margin to the right. 217 217 00:11:08,920 --> 00:11:13,920 So span class, actually just gonna call it emoji. 218 218 00:11:15,850 --> 00:11:18,823 And the first one is the pizza emoji. 219 219 00:11:22,180 --> 00:11:23,033 And here it is. 220 220 00:11:25,640 --> 00:11:26,570 Close that one 221 221 00:11:26,570 --> 00:11:30,423 and now we say it has 850 kilocalories. 222 222 00:11:33,650 --> 00:11:35,653 And let's just close it and copy this. 223 223 00:11:36,690 --> 00:11:37,723 Two times. 224 224 00:11:39,770 --> 00:11:43,143 So now let's use the clock and here it is. 225 225 00:11:46,260 --> 00:11:49,483 Say that it's gonna take 30 minutes. 226 226 00:11:51,210 --> 00:11:54,110 And then finally we have the star 227 227 00:11:56,320 --> 00:11:57,660 basically for the rating. 228 228 00:11:57,660 --> 00:12:01,343 So we have 4.7 out of five. 229 229 00:12:03,220 --> 00:12:07,010 Alright, so pizza details and pizza detail. 230 230 00:12:13,100 --> 00:12:17,080 And also one class for the emoji. 231 231 00:12:17,080 --> 00:12:18,160 So first of all, 232 232 00:12:18,160 --> 00:12:20,060 put all the three side by side. 233 233 00:12:20,060 --> 00:12:23,080 And nothing could be easier than that, right? 234 234 00:12:23,080 --> 00:12:26,458 Display flex and bam, here we go. 235 235 00:12:26,458 --> 00:12:29,123 Now let's style the text in there. 236 236 00:12:30,280 --> 00:12:32,233 We have font size of 15 pixels. 237 237 00:12:36,150 --> 00:12:38,800 Have a text transform of uppercase 238 238 00:12:40,280 --> 00:12:42,363 to give them this modern look. 239 239 00:12:44,350 --> 00:12:46,333 And a margin to the right of 20 pixels. 240 240 00:12:48,590 --> 00:12:50,800 We can also make them bold 241 241 00:12:50,800 --> 00:12:53,640 by saying font weight 700 242 242 00:12:53,640 --> 00:12:55,710 and that should be enough for now. 243 243 00:12:55,710 --> 00:12:57,050 And we want these icons here 244 244 00:12:57,050 --> 00:12:59,280 actually a bit bigger than the text. 245 245 00:12:59,280 --> 00:13:03,260 So let's say font size 20 pixels. 246 246 00:13:03,260 --> 00:13:06,333 And I'm doing this so we can use some more Flexbox. 247 247 00:13:06,333 --> 00:13:11,333 Margin right just three pixels. 248 248 00:13:12,610 --> 00:13:13,443 But now you'll see 249 249 00:13:13,443 --> 00:13:16,350 that they aren't really aligned vertically, right? 250 250 00:13:16,350 --> 00:13:18,530 This is not really fine. 251 251 00:13:18,530 --> 00:13:21,410 So in here, in pizza details, we should fix that. 252 252 00:13:21,410 --> 00:13:22,980 And again, it's very easy. 253 253 00:13:22,980 --> 00:13:25,880 All we have to do is say, display flex. 254 254 00:13:29,030 --> 00:13:31,120 And, of course, they are already side by side. 255 255 00:13:31,120 --> 00:13:34,347 And now just say align items center. 256 256 00:13:37,480 --> 00:13:38,617 And here we go. 257 257 00:13:38,617 --> 00:13:40,600 And this already looks good. 258 258 00:13:40,600 --> 00:13:43,570 We could now experiment some more here with Flexbox. 259 259 00:13:43,570 --> 00:13:44,403 For example, 260 260 00:13:44,403 --> 00:13:45,803 let's say that we actually want to center 261 261 00:13:45,803 --> 00:13:49,293 all of these flex items inside its container. 262 262 00:13:50,150 --> 00:13:52,320 The container is pizza details, right? 263 263 00:13:52,320 --> 00:13:55,370 Let's say we wanna center them along the main axis. 264 264 00:13:55,370 --> 00:13:57,510 So in this direction. 265 265 00:13:57,510 --> 00:14:01,677 We could do this and say, justify content center. 266 266 00:14:03,900 --> 00:14:06,330 And that will look like this. 267 267 00:14:06,330 --> 00:14:08,160 But there are actually more properties 268 268 00:14:08,160 --> 00:14:09,320 that I haven't talked about yet. 269 269 00:14:09,320 --> 00:14:10,540 So let me show them to you. 270 270 00:14:10,540 --> 00:14:12,380 Another thing that we can do 271 271 00:14:12,380 --> 00:14:15,380 is to basically divide the empty space that is left 272 272 00:14:15,380 --> 00:14:19,460 between basically the gaps of these items. 273 273 00:14:19,460 --> 00:14:20,950 Let me show that to you. 274 274 00:14:20,950 --> 00:14:24,930 Justify content and it's called space between. 275 275 00:14:24,930 --> 00:14:26,850 And you can see that this element 276 276 00:14:26,850 --> 00:14:29,600 goes all the way to the right, or actually to the left. 277 277 00:14:29,600 --> 00:14:30,980 This one here goes all the way to the right. 278 278 00:14:30,980 --> 00:14:34,230 And then a space here in between them is the same. 279 279 00:14:34,230 --> 00:14:35,360 So this one is centered 280 280 00:14:35,360 --> 00:14:39,520 and we have now the space all around is all the same. 281 281 00:14:39,520 --> 00:14:42,110 So that is space between. 282 282 00:14:42,110 --> 00:14:44,600 There is also space around and space evenly. 283 283 00:14:44,600 --> 00:14:47,490 But I don't think these are really useful. 284 284 00:14:47,490 --> 00:14:50,290 Let me just show them to you very quick. 285 285 00:14:50,290 --> 00:14:52,830 And what it does is each flex item 286 286 00:14:52,830 --> 00:14:54,590 will have the exact same space 287 287 00:14:54,590 --> 00:14:57,223 on its left and its right side. 288 288 00:14:59,310 --> 00:15:02,620 So space between I believe is the most useful of them. 289 289 00:15:02,620 --> 00:15:05,020 And actually you will use them from time to time. 290 290 00:15:05,020 --> 00:15:07,690 Okay, so now in this case we don't want any of this. 291 291 00:15:07,690 --> 00:15:09,440 We just want them to be in the beginning 292 292 00:15:09,440 --> 00:15:11,790 and that is basically the default. 293 293 00:15:11,790 --> 00:15:15,120 So flex start will put them exactly where they were. 294 294 00:15:15,120 --> 00:15:16,560 Of course, there's also flex end 295 295 00:15:16,560 --> 00:15:18,560 to push them all the way to the right side. 296 296 00:15:18,560 --> 00:15:21,050 But that's also not really what we want. 297 297 00:15:21,050 --> 00:15:22,780 So we can just get rid of this 298 298 00:15:22,780 --> 00:15:24,879 because the start is, as you know, 299 299 00:15:24,879 --> 00:15:27,000 the default anyway. 300 300 00:15:27,000 --> 00:15:27,940 Now we're almost done. 301 301 00:15:27,940 --> 00:15:30,880 All there is to do is to push this entire element here 302 302 00:15:30,880 --> 00:15:32,070 so the pizza details, 303 303 00:15:32,070 --> 00:15:34,523 all the way to the bottom as much as we can. 304 304 00:15:35,384 --> 00:15:36,970 So how could we achieve that? 305 305 00:15:36,970 --> 00:15:39,993 Well, it would be really nice to use Flexbox for that. 306 306 00:15:40,980 --> 00:15:43,410 Now the default behavior for Flexbox 307 307 00:15:43,410 --> 00:15:46,040 is to put elements side by side. 308 308 00:15:46,040 --> 00:15:47,890 So we can push, as we did here, 309 309 00:15:47,890 --> 00:15:49,810 these elements all the way to the right side. 310 310 00:15:49,810 --> 00:15:53,520 Remember we did the margin right and set it to auto here 311 311 00:15:53,520 --> 00:15:54,410 on this element, 312 312 00:15:54,410 --> 00:15:56,670 which then pushed these two all the way to the right. 313 313 00:15:56,670 --> 00:15:57,610 But up until this point, 314 314 00:15:57,610 --> 00:16:00,140 we only did this in the horizontal direction 315 315 00:16:00,140 --> 00:16:01,300 which is the default. 316 316 00:16:01,300 --> 00:16:02,920 But we can change that. 317 317 00:16:02,920 --> 00:16:06,550 So we can actually make Flexbox not go from left to right. 318 318 00:16:06,550 --> 00:16:08,840 So put all the elements side by side 319 319 00:16:08,840 --> 00:16:11,420 so the elements go one after the other 320 320 00:16:11,420 --> 00:16:12,684 and so the main axis, 321 321 00:16:12,684 --> 00:16:15,100 which was originally in this way, 322 322 00:16:15,100 --> 00:16:17,760 will then be from top to bottom like this. 323 323 00:16:17,760 --> 00:16:19,860 Okay, so let me show that to you again. 324 324 00:16:19,860 --> 00:16:21,160 And in order to do that, 325 325 00:16:21,160 --> 00:16:23,280 I will now set pizza content 326 326 00:16:23,280 --> 00:16:25,060 which is the entire wide element, 327 327 00:16:25,060 --> 00:16:27,063 and we'll set it to Flexbox. 328 328 00:16:28,575 --> 00:16:30,343 And so, where do we have that? 329 329 00:16:31,260 --> 00:16:34,413 It is the flex content. 330 330 00:16:35,290 --> 00:16:38,700 So I will say display flex. 331 331 00:16:38,700 --> 00:16:41,000 And watch what happens now by default 332 332 00:16:41,000 --> 00:16:43,490 if I put all of these side by side. 333 333 00:16:43,490 --> 00:16:45,150 Just what we expected. 334 334 00:16:45,150 --> 00:16:49,230 Because that's default behavior of Flexbox. 335 335 00:16:49,230 --> 00:16:50,890 But let's now actually change that. 336 336 00:16:50,890 --> 00:16:54,710 We do that by using the flex direction property. 337 337 00:16:54,710 --> 00:16:57,710 And the default for flex direction is row. 338 338 00:16:57,710 --> 00:17:01,255 So that's why we get all of these elements here in one row. 339 339 00:17:01,255 --> 00:17:05,333 But we can also change it to column. 340 340 00:17:08,197 --> 00:17:10,090 And then it's gonna look like this. 341 341 00:17:10,090 --> 00:17:12,930 Basically, it's gonna look exactly like it did before. 342 342 00:17:12,930 --> 00:17:15,094 Okay, but these are now actually flex items 343 343 00:17:15,094 --> 00:17:17,150 we can now manipulate. 344 344 00:17:17,150 --> 00:17:19,060 We could now say, 345 345 00:17:19,060 --> 00:17:24,060 align items, which is along the cross axis remember, center. 346 346 00:17:25,780 --> 00:17:27,464 So what do you think will happen? 347 347 00:17:27,464 --> 00:17:31,010 So it centered these along the cross axis. 348 348 00:17:31,010 --> 00:17:33,465 And since our main axis is now this way here, 349 349 00:17:33,465 --> 00:17:36,810 the cross axis is this way. 350 350 00:17:36,810 --> 00:17:38,240 Alright, makes sense? 351 351 00:17:38,240 --> 00:17:39,550 So that's why align items 352 352 00:17:39,550 --> 00:17:42,073 works in this direction here as well. 353 353 00:17:43,340 --> 00:17:47,033 Okay, we could also do justify content. 354 354 00:17:49,970 --> 00:17:51,180 And set that one to center. 355 355 00:17:51,180 --> 00:17:53,550 And try to guess what's gonna happen. 356 356 00:17:53,550 --> 00:17:55,600 Yep, it's gonna put all of these elements 357 357 00:17:55,600 --> 00:17:57,860 in the center along the main axis 358 358 00:17:57,860 --> 00:18:00,683 which now is, remember, from top to bottom. 359 359 00:18:02,270 --> 00:18:06,030 Alright, so that's one very important aspect 360 360 00:18:06,030 --> 00:18:07,253 of Flexbox as well 361 361 00:18:07,253 --> 00:18:10,140 that we can change the flex direction. 362 362 00:18:10,140 --> 00:18:13,770 We can also do column reverse, for example. 363 363 00:18:13,770 --> 00:18:14,940 And what that's gonna do 364 364 00:18:14,940 --> 00:18:17,840 is reverse the order of the elements. 365 365 00:18:17,840 --> 00:18:19,527 So we had this at the top and this at the bottom. 366 366 00:18:19,527 --> 00:18:21,423 And so now it's inverted. 367 367 00:18:22,490 --> 00:18:26,050 Alright, but we simply want it to be a column. 368 368 00:18:26,050 --> 00:18:28,070 Now what we wanted originally to do 369 369 00:18:28,070 --> 00:18:30,540 is to push the pizza details here 370 370 00:18:30,540 --> 00:18:32,145 all the way to the bottom. 371 371 00:18:32,145 --> 00:18:34,303 And so let's do that. 372 372 00:18:35,290 --> 00:18:36,500 So pizza details. 373 373 00:18:36,500 --> 00:18:38,370 And can you guess how we're gonna do that? 374 374 00:18:38,370 --> 00:18:40,685 It's actually very similar to what we did up here 375 375 00:18:40,685 --> 00:18:42,810 in this pizza... 376 376 00:18:42,810 --> 00:18:43,703 Oh, what's that? 377 377 00:18:47,604 --> 00:18:49,186 So as I was saying, 378 378 00:18:49,186 --> 00:18:50,940 it's gonna be in a very similar way 379 379 00:18:50,940 --> 00:18:52,713 to what we did up here. 380 380 00:18:56,400 --> 00:19:01,400 All we have to do is to say margin to the top should be auto 381 381 00:19:04,360 --> 00:19:07,000 and just like this it should actually work. 382 382 00:19:07,000 --> 00:19:09,220 Well, it is in the wrong place. 383 383 00:19:09,220 --> 00:19:13,070 So of course it's not in pizza detail but in pizza details 384 384 00:19:13,070 --> 00:19:15,830 because that is the flex item, right? 385 385 00:19:15,830 --> 00:19:17,633 So margin top and there we go. 386 386 00:19:18,590 --> 00:19:22,300 This margin here is now automatically calculated by Flexbox 387 387 00:19:22,300 --> 00:19:25,223 in order to occupy this empty space. 388 388 00:19:26,259 --> 00:19:29,140 Let's actually check that out here using the dev tools again 389 389 00:19:29,140 --> 00:19:32,190 and you will see we have all this margin 390 390 00:19:32,190 --> 00:19:34,070 as you see here in this orange color. 391 391 00:19:34,070 --> 00:19:37,793 So that is the margin that is defined by margin auto. 392 392 00:19:39,762 --> 00:19:41,410 And that was the whole reason 393 393 00:19:41,410 --> 00:19:45,220 why we actually used Flexbox here on that pizza content 394 394 00:19:45,220 --> 00:19:46,670 because without Flexbox 395 395 00:19:46,670 --> 00:19:49,970 this margin auto doesn't even work like this. 396 396 00:19:49,970 --> 00:19:52,013 So if I would simply remove it from here, 397 397 00:19:52,013 --> 00:19:55,670 so if this was no longer a Flexbox item, 398 398 00:19:55,670 --> 00:19:58,143 well then it will simply look like this again. 399 399 00:19:59,770 --> 00:20:02,830 And so, I think with that we're actually done. 400 400 00:20:02,830 --> 00:20:04,775 And what we have here looks exactly the same 401 401 00:20:04,775 --> 00:20:06,383 as it does in here. 402 402 00:20:07,690 --> 00:20:09,140 So let's count how many times 403 403 00:20:09,140 --> 00:20:12,599 we actually used Flexbox in this kind of small component. 404 404 00:20:12,599 --> 00:20:17,080 One, two, three Flexbox containers. 405 405 00:20:20,500 --> 00:20:25,500 Four and five and actually six. 406 406 00:20:26,420 --> 00:20:28,410 So we actually find six flex containers 407 407 00:20:28,410 --> 00:20:30,230 just in this small component. 408 408 00:20:30,230 --> 00:20:31,890 And that is enough to show you 409 409 00:20:31,890 --> 00:20:35,450 how powerful and useful actually Flexbox is 410 410 00:20:35,450 --> 00:20:37,720 to lay out the elements on a page like this. 411 411 00:20:37,720 --> 00:20:39,050 And as your websites grow, 412 412 00:20:39,050 --> 00:20:41,368 you'll see yourself using it all over the place 413 413 00:20:41,368 --> 00:20:43,034 and all the time. 414 414 00:20:43,034 --> 00:20:44,540 As an exercise, 415 415 00:20:44,540 --> 00:20:47,007 you could try to recreate the exact same thing 416 416 00:20:47,007 --> 00:20:49,447 but without using Flexbox 417 417 00:20:49,447 --> 00:20:52,830 and instead using margins and floats. 418 418 00:20:52,830 --> 00:20:55,900 And you will then see how much more code you will write 419 419 00:20:55,900 --> 00:20:57,400 and how much longer it's gonna take you 420 420 00:20:57,400 --> 00:21:00,300 and how much more difficult it'll probably be. 421 421 00:21:00,300 --> 00:21:01,133 So if you have the time, 422 422 00:21:01,133 --> 00:21:04,340 that will probably be a great exercise. 423 423 00:21:04,340 --> 00:21:05,385 Now as I said in the beginning, 424 424 00:21:05,385 --> 00:21:07,220 in this small project, 425 425 00:21:07,220 --> 00:21:10,910 of course we barely just scratched the surface of Flexbox. 426 426 00:21:10,910 --> 00:21:12,770 There is so much more to learn. 427 427 00:21:12,770 --> 00:21:14,010 Many more techniques 428 428 00:21:14,010 --> 00:21:16,050 and all the properties that it includes. 429 429 00:21:16,050 --> 00:21:17,807 But in this small video I, of course, 430 430 00:21:17,807 --> 00:21:19,040 couldn't do all that 431 431 00:21:19,040 --> 00:21:21,610 because that requires an entire new course. 432 432 00:21:21,610 --> 00:21:23,110 And that brings me actually 433 433 00:21:23,110 --> 00:21:26,200 to the other new course that I have here on Udemy 434 434 00:21:26,200 --> 00:21:28,450 which is called Advanced CSS and Sass. 435 435 00:21:28,450 --> 00:21:30,740 And it teaches you all these new properties 436 436 00:21:30,740 --> 00:21:33,160 that I talked about in the beginning of the video, 437 437 00:21:33,160 --> 00:21:34,400 or actually in the last video, 438 438 00:21:34,400 --> 00:21:35,470 and so much more. 439 439 00:21:35,470 --> 00:21:37,050 So it has three different projects 440 440 00:21:37,050 --> 00:21:39,712 where you will learn to use all these advanced techniques. 441 441 00:21:39,712 --> 00:21:43,510 You will have one project that is only just for Flexbox 442 442 00:21:43,510 --> 00:21:46,190 where you're gonna code a huge design using Flexbox. 443 443 00:21:46,190 --> 00:21:48,840 And also a project using just CSS grid 444 444 00:21:48,840 --> 00:21:51,520 to learn the most cutting edge layout technology 445 445 00:21:51,520 --> 00:21:53,520 that we have right now in CSS. 446 446 00:21:53,520 --> 00:21:55,650 Okay, so give it a try 447 447 00:21:55,650 --> 00:21:57,110 and if it sounds interesting, 448 448 00:21:57,110 --> 00:21:58,940 then of course I am more than happy 449 449 00:21:58,940 --> 00:22:01,440 to welcome you into that course as well. 450 450 00:22:01,440 --> 00:22:03,210 That's all I have to tell you for now. 451 451 00:22:03,210 --> 00:22:05,993 I hope you like this video and see you next time. 37419