Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,270 --> 00:00:04,120 Hi, I hope you're doing great today. 2 2 00:00:04,120 --> 00:00:05,900 It's been some time since I last 3 3 00:00:05,900 --> 00:00:08,150 added a new video to this course, 4 4 00:00:08,150 --> 00:00:11,420 so I thought it was about time to do just that. 5 5 00:00:11,420 --> 00:00:13,980 So a lot of stuff has been added to CSS 6 6 00:00:13,980 --> 00:00:15,430 over the last couple of years, 7 7 00:00:15,430 --> 00:00:17,210 so this seems like a great time 8 8 00:00:17,210 --> 00:00:20,726 to show you a bit of what's new in CSS. 9 9 00:00:20,726 --> 00:00:23,920 So first up, we have a lot of new properties 10 10 00:00:23,920 --> 00:00:25,960 and techniques in CSS now, 11 11 00:00:25,960 --> 00:00:30,660 stuff like more complex gradients, shapes, clips, masks, 12 12 00:00:30,660 --> 00:00:34,870 background blending, image filters, CSS variables, 13 13 00:00:34,870 --> 00:00:38,220 truly responsive images, and so much more. 14 14 00:00:38,220 --> 00:00:39,640 It's really incredible. 15 15 00:00:39,640 --> 00:00:41,300 And with these new properties, 16 16 00:00:41,300 --> 00:00:43,450 we can build even more compelling designs 17 17 00:00:43,450 --> 00:00:46,160 just using the power of CSS. 18 18 00:00:46,160 --> 00:00:50,110 So again, it really has become powerful over the last year. 19 19 00:00:50,110 --> 00:00:51,200 Alright? 20 20 00:00:51,200 --> 00:00:54,840 Now as we're actually laying out elements on the page, 21 21 00:00:54,840 --> 00:00:56,920 for a long time, we've been using floats 22 22 00:00:56,920 --> 00:00:58,570 to build layouts, right? 23 23 00:00:58,570 --> 00:01:01,020 So just like you learned in this course. 24 24 00:01:01,020 --> 00:01:04,630 And that technique is, of course, still 100% valid, 25 25 00:01:04,630 --> 00:01:07,360 but it always actually had a small problem. 26 26 00:01:07,360 --> 00:01:09,840 It was always a bit hacky, so to say, 27 27 00:01:09,840 --> 00:01:12,450 because floats were not originally invented 28 28 00:01:12,450 --> 00:01:13,840 to build layouts. 29 29 00:01:13,840 --> 00:01:16,770 It's also a bit difficult sometimes to build layouts 30 30 00:01:16,770 --> 00:01:19,840 and page components just using floats, 31 31 00:01:19,840 --> 00:01:23,430 and that is why amazing new ways of laying out elements 32 32 00:01:23,430 --> 00:01:27,150 were introduced into CSS over the last couple of years, 33 33 00:01:27,150 --> 00:01:30,083 and these are Flexbox and CSS grid. 34 34 00:01:30,083 --> 00:01:34,460 So Flexbox is an amazing new technology that allows us 35 35 00:01:34,460 --> 00:01:37,270 to lay out elements in a one dimensional row 36 36 00:01:37,270 --> 00:01:40,550 without using floats or other hacks like that. 37 37 00:01:40,550 --> 00:01:43,810 It makes it so easy to place elements exactly where we 38 38 00:01:43,810 --> 00:01:47,160 want them to be with just a very small amount of code, 39 39 00:01:47,160 --> 00:01:50,990 making Flexbox perfect for building small page components 40 40 00:01:50,990 --> 00:01:52,910 like navigation or carts. 41 41 00:01:52,910 --> 00:01:54,183 Now about CSS grid, 42 42 00:01:54,183 --> 00:01:57,162 it's an even more cutting edge technology that we use 43 43 00:01:57,162 --> 00:02:01,640 to lay out elements in a fully fledged two dimensional grid, 44 44 00:02:01,640 --> 00:02:03,441 and some people say it's a bit like tables, 45 45 00:02:03,441 --> 00:02:06,620 but it's actually much more powerful than that. 46 46 00:02:06,620 --> 00:02:09,730 So since we can use a real two dimensional grid, 47 47 00:02:09,730 --> 00:02:12,120 CSS grid is absolutely perfect 48 48 00:02:12,120 --> 00:02:14,830 for building big overall page layouts 49 49 00:02:14,830 --> 00:02:16,390 and more complex components. 50 50 00:02:16,390 --> 00:02:18,650 Again, with a lot less CSS code 51 51 00:02:18,650 --> 00:02:21,410 and even HTML code than before. 52 52 00:02:21,410 --> 00:02:23,959 Now the biggest limitation of all these new features is, 53 53 00:02:23,959 --> 00:02:26,450 as always, browser support. 54 54 00:02:26,450 --> 00:02:28,220 While new versions of all browsers 55 55 00:02:28,220 --> 00:02:30,140 already support everything I mentioned here, 56 56 00:02:30,140 --> 00:02:32,790 there are always some users that lag behind 57 57 00:02:32,790 --> 00:02:35,390 and don't have the latest versions installed. 58 58 00:02:35,390 --> 00:02:39,520 Now imagine we rely on CSS grid to entirely lay out a page, 59 59 00:02:39,520 --> 00:02:41,900 and then like 5% of our users 60 60 00:02:41,900 --> 00:02:43,880 actually don't support CSS grid. 61 61 00:02:43,880 --> 00:02:45,770 That would then make our website 62 62 00:02:45,770 --> 00:02:47,800 impossible to use for these people. 63 63 00:02:47,800 --> 00:02:49,710 That's why we have to be very careful 64 64 00:02:49,710 --> 00:02:52,050 in adopting this new modern stuff 65 65 00:02:52,050 --> 00:02:53,900 and always have a really good idea 66 66 00:02:53,900 --> 00:02:56,100 of what our target audience looks like 67 67 00:02:56,100 --> 00:02:57,700 in terms of browser usage. 68 68 00:02:57,700 --> 00:02:58,660 Alright? 69 69 00:02:58,660 --> 00:03:00,780 Now since I cannot really show you all of this 70 70 00:03:00,780 --> 00:03:02,640 in just one video of course, 71 71 00:03:02,640 --> 00:03:05,317 I'm only gonna introduce you to Flexbox right now. 72 72 00:03:05,317 --> 00:03:07,520 That's because if I were to learn 73 73 00:03:07,520 --> 00:03:09,011 only one of these technologies, 74 74 00:03:09,011 --> 00:03:11,560 then it would be definitely Flexbox, 75 75 00:03:11,560 --> 00:03:14,540 because it's had by far the biggest impact 76 76 00:03:14,540 --> 00:03:16,170 on my own personal work. 77 77 00:03:16,170 --> 00:03:19,270 It really makes a huge difference to me and my work, 78 78 00:03:19,270 --> 00:03:22,040 and browser support is actually pretty good right now, 79 79 00:03:22,040 --> 00:03:24,000 which makes it a perfect technology 80 80 00:03:24,000 --> 00:03:26,759 to start using right now in my opinion. 81 81 00:03:26,759 --> 00:03:29,602 Now before we actually start using it in practice, 82 82 00:03:29,602 --> 00:03:31,660 I want to just give you an overview 83 83 00:03:31,660 --> 00:03:34,037 of all the CSS properties that are part 84 84 00:03:34,037 --> 00:03:36,810 of the Flexbox specification. 85 85 00:03:36,810 --> 00:03:38,670 I have all the property names here 86 86 00:03:38,670 --> 00:03:40,380 and then all the possible values 87 87 00:03:40,380 --> 00:03:43,038 where the bold one is the default one, right? 88 88 00:03:43,038 --> 00:03:45,100 I'm not gonna go over these right now, 89 89 00:03:45,100 --> 00:03:47,820 but it's a good reference for you to print out or create 90 90 00:03:47,820 --> 00:03:51,270 just a print screen image so that you can keep it handy 91 91 00:03:51,270 --> 00:03:53,600 and check it as we build our example 92 92 00:03:53,600 --> 00:03:56,050 throughout the rest of this video. 93 93 00:03:56,050 --> 00:03:58,580 Now what I do want to focus on right now is that 94 94 00:03:58,580 --> 00:04:02,128 in Flexbox we can define an element as a flex container, 95 95 00:04:02,128 --> 00:04:06,169 and then all the child elements will become flex items. 96 96 00:04:06,169 --> 00:04:09,650 Now each flex container has a main axis, 97 97 00:04:09,650 --> 00:04:11,980 as you can see in the diagram in the top, 98 98 00:04:11,980 --> 00:04:13,455 and along this main axis, 99 99 00:04:13,455 --> 00:04:17,260 all of the flex items can be aligned in some way. 100 100 00:04:17,260 --> 00:04:19,550 Then there's also the cross axis, 101 101 00:04:19,550 --> 00:04:22,360 which is always perpendicular to the main axis, 102 102 00:04:22,360 --> 00:04:25,340 and we can also align items along this axis. 103 103 00:04:25,340 --> 00:04:27,913 And we can control all of this using the properties 104 104 00:04:27,913 --> 00:04:30,010 that you can see here on this slide. 105 105 00:04:30,010 --> 00:04:30,850 Alright? 106 106 00:04:30,850 --> 00:04:33,810 But enough talking now, because this sounds more complicated 107 107 00:04:33,810 --> 00:04:35,750 than it actually is, okay? 108 108 00:04:35,750 --> 00:04:38,320 So let's now actually build a very small component 109 109 00:04:38,320 --> 00:04:40,709 using the power of Flexbox in practice. 110 110 00:04:40,709 --> 00:04:43,930 So this is a small component that we're gonna build 111 111 00:04:43,930 --> 00:04:47,660 using Flexbox, and it's like this pizza cart here. 112 112 00:04:47,660 --> 00:04:50,100 So imagine there was like a web application 113 113 00:04:50,100 --> 00:04:51,730 where you could order pizza, 114 114 00:04:51,730 --> 00:04:53,930 and then it could show each of the pizzas 115 115 00:04:53,930 --> 00:04:57,140 using this cart component right here. 116 116 00:04:57,140 --> 00:04:58,070 Alright? 117 117 00:04:58,070 --> 00:04:59,746 Now as you see here, 118 118 00:04:59,746 --> 00:05:02,650 I'm doing this on like a web application called CodePen 119 119 00:05:02,650 --> 00:05:05,970 where we have the HTML and CSS code up here, 120 120 00:05:05,970 --> 00:05:07,740 and then down here we see the result, 121 121 00:05:07,740 --> 00:05:10,100 instead of doing it in a text editor 122 122 00:05:10,100 --> 00:05:12,540 like we did the other project in this course. 123 123 00:05:12,540 --> 00:05:13,714 Okay? 124 124 00:05:13,714 --> 00:05:15,260 So usually, we always code in a text editor, 125 125 00:05:15,260 --> 00:05:17,970 but to code up these small examples like these demos, 126 126 00:05:17,970 --> 00:05:20,600 I like to use a web tool like this, 127 127 00:05:20,600 --> 00:05:21,610 because then we don't have to go 128 128 00:05:21,610 --> 00:05:23,320 through all these setup steps, 129 129 00:05:23,320 --> 00:05:25,070 and so it's a lot quicker 130 130 00:05:25,070 --> 00:05:27,400 to just quickly code up something like this. 131 131 00:05:27,400 --> 00:05:32,200 Now if you want, of course, you can open up your text editor 132 132 00:05:32,200 --> 00:05:35,280 and then create a new HTML file and a new CSS file 133 133 00:05:35,280 --> 00:05:36,930 and do it the more traditional way 134 134 00:05:36,930 --> 00:05:38,678 like we did in this course as well. 135 135 00:05:38,678 --> 00:05:41,855 So what I did here was to start a new CodePen, 136 136 00:05:41,855 --> 00:05:43,540 so this one here, 137 137 00:05:43,540 --> 00:05:45,030 and if you want to do it yourself, 138 138 00:05:45,030 --> 00:05:47,780 you can just head over to CodePen dot io, 139 139 00:05:47,780 --> 00:05:49,710 then you probably have to create a new account, 140 140 00:05:49,710 --> 00:05:51,950 and then just go to new pen. 141 141 00:05:51,950 --> 00:05:53,210 Okay? 142 142 00:05:53,210 --> 00:05:56,483 Now we don't need to JavaScript, so we can just minimize it, 143 143 00:05:56,483 --> 00:05:57,790 and so here we go. 144 144 00:05:57,790 --> 00:05:59,822 We have HTML and CSS. 145 145 00:05:59,822 --> 00:06:02,220 And let's start with some of the setup, 146 146 00:06:02,220 --> 00:06:04,900 just like we did in the Omnifood project. 147 147 00:06:04,900 --> 00:06:06,426 So we have our universal selector, 148 148 00:06:06,426 --> 00:06:08,940 and then we will simply start 149 149 00:06:08,940 --> 00:06:11,250 by setting the margin and padding to zero, 150 150 00:06:11,250 --> 00:06:14,910 so basically do this reset that we also did in our project. 151 151 00:06:14,910 --> 00:06:18,360 So margin zero, padding zero, 152 152 00:06:18,360 --> 00:06:22,783 and also we set box sizing to border box. 153 153 00:06:27,880 --> 00:06:29,960 Border box, okay. 154 154 00:06:29,960 --> 00:06:32,359 Let's just write something here in the HTML 155 155 00:06:32,359 --> 00:06:34,309 so that it actually shows up down here. 156 156 00:06:35,660 --> 00:06:36,833 So here we go. 157 157 00:06:37,906 --> 00:06:41,630 And so now let's define some styles for the HTML 158 158 00:06:41,630 --> 00:06:45,400 and the body, just like we're already used to. 159 159 00:06:45,400 --> 00:06:46,330 Right? 160 160 00:06:46,330 --> 00:06:51,330 So let's set the text color to four four four like this, 161 161 00:06:53,060 --> 00:06:56,140 and we also want a special font family. 162 162 00:06:56,140 --> 00:06:59,170 So we want the font called Roboto, which is on Google Fonts. 163 163 00:06:59,170 --> 00:07:03,420 So again, just like we did on our Omnifood project. 164 164 00:07:03,420 --> 00:07:05,573 So let's go to Google Fonts here, 165 165 00:07:09,320 --> 00:07:10,683 type in Roboto, 166 166 00:07:12,330 --> 00:07:14,290 and so this is the one here. 167 167 00:07:14,290 --> 00:07:15,660 Just hit this plus here, 168 168 00:07:15,660 --> 00:07:17,350 and probably this now looks a bit different 169 169 00:07:17,350 --> 00:07:19,820 than by the time I recorded the rest of the course, 170 170 00:07:19,820 --> 00:07:22,443 but it still works the same actually. 171 171 00:07:23,390 --> 00:07:26,120 And so now we want to embed this font, 172 172 00:07:26,120 --> 00:07:27,840 and we're not going to do it in the HTML 173 173 00:07:27,840 --> 00:07:30,430 like we did with this link element. 174 174 00:07:30,430 --> 00:07:33,280 But instead, we're going to import it right into CSS. 175 175 00:07:33,280 --> 00:07:35,869 So just go ahead and copy this line of code here. 176 176 00:07:35,869 --> 00:07:38,740 We can now close this, 177 177 00:07:38,740 --> 00:07:42,100 and right at the beginning of everything here, 178 178 00:07:42,100 --> 00:07:46,530 we then import this font to our CSS document. 179 179 00:07:46,530 --> 00:07:49,733 And now we can go ahead and say font family, 180 180 00:07:52,890 --> 00:07:53,950 Roboto. 181 181 00:07:53,950 --> 00:07:55,130 And if you wait a bit, 182 182 00:07:55,130 --> 00:07:57,370 now you see that it actually changed down here. 183 183 00:07:57,370 --> 00:07:58,707 Okay? 184 184 00:07:58,707 --> 00:08:03,690 Can also give it some nice padding of 100 pixel, 185 185 00:08:03,690 --> 00:08:07,660 and now let's take care of that gradient that we have here. 186 186 00:08:07,660 --> 00:08:11,140 So this green to blue nice modern looking gradient 187 187 00:08:11,140 --> 00:08:12,220 that we have. 188 188 00:08:12,220 --> 00:08:13,490 Alright? 189 189 00:08:13,490 --> 00:08:16,070 So as a comment here, let's define a couple of colors, 190 190 00:08:16,070 --> 00:08:19,208 because we will be using these over and over again, 191 191 00:08:19,208 --> 00:08:22,120 and so I think it makes sense to basically write them 192 192 00:08:22,120 --> 00:08:25,003 down here so we can then come here and copy them. 193 193 00:08:26,750 --> 00:08:31,750 So for green, we have six seven B two six F, 194 194 00:08:32,240 --> 00:08:34,040 then we have our blue color, 195 195 00:08:34,040 --> 00:08:39,040 which is a hexadecimal four C A, four C A, two C D. 196 196 00:08:41,248 --> 00:08:42,650 But then one that's kind of in between, so the mid-color, 197 197 00:08:42,650 --> 00:08:47,510 let's say, and this one is five A A A nine D. 198 198 00:08:47,510 --> 00:08:50,163 Okay, so let's define this gradient. 199 199 00:08:51,827 --> 00:08:56,827 So background, and we want a linear gradient. 200 200 00:08:57,340 --> 00:08:59,300 And we did this also in a course again. 201 201 00:08:59,300 --> 00:09:00,800 So at this point, it's nothing new. 202 202 00:09:00,800 --> 00:09:03,290 So we define the two colors that we want, 203 203 00:09:03,290 --> 00:09:04,890 and we start with the green one. 204 204 00:09:07,370 --> 00:09:08,763 So we catch this one, 205 205 00:09:12,470 --> 00:09:15,253 and going to the blue color. 206 206 00:09:18,300 --> 00:09:20,320 Let's see, and here we go. 207 207 00:09:20,320 --> 00:09:22,320 Now you see that this green here is going actually 208 208 00:09:22,320 --> 00:09:24,930 from the top to the bottom down here. 209 209 00:09:24,930 --> 00:09:26,240 Right, you see that? 210 210 00:09:26,240 --> 00:09:30,420 But here, we actually have it starting here in this corner 211 211 00:09:30,420 --> 00:09:32,740 going to this corner. 212 212 00:09:32,740 --> 00:09:35,060 And so we can do something that we didn't do before, 213 213 00:09:35,060 --> 00:09:37,470 which is to specify the direction in here. 214 214 00:09:37,470 --> 00:09:41,793 So we can say now to bottom right. 215 215 00:09:43,030 --> 00:09:47,520 And now you will see that it starts here and goes here. 216 216 00:09:47,520 --> 00:09:51,283 We could also say to the bottom left, for example, 217 217 00:09:52,120 --> 00:09:54,830 and now you will see that it will start here. 218 218 00:09:54,830 --> 00:09:57,010 So here's the green now, and then here to the blue. 219 219 00:09:57,010 --> 00:09:59,250 So that's the direction it goes. 220 220 00:09:59,250 --> 00:10:01,490 Okay, make sense? 221 221 00:10:01,490 --> 00:10:03,870 But we want it to go to the bottom right. 222 222 00:10:03,870 --> 00:10:05,680 And to see this a bit better, let's actually give us 223 223 00:10:05,680 --> 00:10:09,140 some more space here and maximize this window. 224 224 00:10:09,140 --> 00:10:10,493 Alright, so that's nicer. 225 225 00:10:11,910 --> 00:10:12,910 Okay, and so you see that now 226 226 00:10:12,910 --> 00:10:16,115 when we increase or decrease this here, 227 227 00:10:16,115 --> 00:10:19,080 you see that it kind of goes from here to here, 228 228 00:10:19,080 --> 00:10:20,660 and then it starts over again. 229 229 00:10:20,660 --> 00:10:24,440 And we don't want that to happen, so we want that our body, 230 230 00:10:24,440 --> 00:10:27,110 because basically all of this here is the body, right? 231 231 00:10:27,110 --> 00:10:31,000 We want that to always have the height of the viewport. 232 232 00:10:31,000 --> 00:10:32,730 And remember how we do that. 233 233 00:10:32,730 --> 00:10:36,490 So we actually did it before in the Omnifood project. 234 234 00:10:36,490 --> 00:10:39,630 And the way we do it is to use the 100 235 235 00:10:39,630 --> 00:10:41,480 and then the V H unit. 236 236 00:10:41,480 --> 00:10:44,693 So 100% of the vertical height. 237 237 00:10:46,220 --> 00:10:49,120 And now you see that it actually works, 238 238 00:10:49,120 --> 00:10:52,030 except for these small problems down here, 239 239 00:10:52,030 --> 00:10:53,860 but we're gonna fix them here in a second, 240 240 00:10:53,860 --> 00:10:55,630 so don't worry about that. 241 241 00:10:55,630 --> 00:10:56,950 So I'm not sure what's causing them. 242 242 00:10:56,950 --> 00:11:00,210 Maybe it's a problem here with this web application, 243 243 00:11:00,210 --> 00:11:02,610 but that's no problem, again, don't worry about that. 244 244 00:11:02,610 --> 00:11:05,540 So instead, let's just start with our HTML part here. 245 245 00:11:05,540 --> 00:11:10,363 And so I'm gonna use a figure with the class of pizza. 246 246 00:11:16,420 --> 00:11:18,060 Alright, down in there, 247 247 00:11:18,060 --> 00:11:21,870 let's see what we have in there actually in our example. 248 248 00:11:21,870 --> 00:11:22,970 And now the tabs are gone. 249 249 00:11:22,970 --> 00:11:25,453 Okay, so let's bring it back to the way it was. 250 250 00:11:27,551 --> 00:11:31,100 So we have this entire element here, 251 251 00:11:31,100 --> 00:11:34,173 which is this figure, which is a pizza, right? 252 252 00:11:34,173 --> 00:11:35,006 And then in there, 253 253 00:11:35,006 --> 00:11:38,460 we have this element for the image and this element, 254 254 00:11:38,460 --> 00:11:41,610 so this container and then the element with the price. 255 255 00:11:41,610 --> 00:11:43,183 Okay? 256 256 00:11:43,183 --> 00:11:45,570 So basically three elements side by side. 257 257 00:11:45,570 --> 00:11:46,663 So let's do that. 258 258 00:11:48,190 --> 00:11:51,883 So we have a diff with the class of pizza hero, 259 259 00:11:54,230 --> 00:11:56,330 and now I'm gonna introduce you to something new, 260 260 00:11:56,330 --> 00:11:58,830 because this way of writing a class 261 261 00:11:58,830 --> 00:12:01,320 probably looks pretty weird to you, right, 262 262 00:12:01,320 --> 00:12:03,310 these two underscores, right? 263 263 00:12:03,310 --> 00:12:06,670 And that is the so-called BEM methodology, 264 264 00:12:06,670 --> 00:12:09,940 where B stands for block, E stands for elements, 265 265 00:12:09,940 --> 00:12:12,270 and M stands for modifier. 266 266 00:12:12,270 --> 00:12:15,960 So our block here is pizza, and then each of the elements 267 267 00:12:15,960 --> 00:12:18,620 in there will have the block name on them. 268 268 00:12:18,620 --> 00:12:22,060 So the block will always be there, then two underscores, 269 269 00:12:22,060 --> 00:12:25,000 and then the element, which in this case is the hero. 270 270 00:12:25,000 --> 00:12:27,470 And if we have multiple elements with the same name, 271 271 00:12:27,470 --> 00:12:28,500 but we want, for example, 272 272 00:12:28,500 --> 00:12:32,106 one of them to be slightly different, so be a bit modified, 273 273 00:12:32,106 --> 00:12:36,020 we can use a modifier by using dash dash, 274 274 00:12:36,020 --> 00:12:38,260 for example, type one, something like this. 275 275 00:12:38,260 --> 00:12:39,093 Okay? 276 276 00:12:39,950 --> 00:12:42,830 But here, we just have our block, which is the pizza, 277 277 00:12:42,830 --> 00:12:45,167 and then the element is hero, okay? 278 278 00:12:45,167 --> 00:12:48,770 And this makes it a lot easier to write CSS class names. 279 279 00:12:48,770 --> 00:12:51,410 Instead of having to always come up with them, 280 280 00:12:51,410 --> 00:12:53,770 we have this system that makes it a bit easier 281 281 00:12:53,770 --> 00:12:56,173 for us to always name our classes like this. 282 282 00:12:58,050 --> 00:12:58,883 Okay? 283 283 00:12:58,883 --> 00:13:00,923 Then in here, we will have our image. 284 284 00:13:05,516 --> 00:13:07,880 So where does this image come from? 285 285 00:13:07,880 --> 00:13:11,000 Well I'm using it from the very popular website 286 286 00:13:11,000 --> 00:13:13,060 called Unsplash dot com. 287 287 00:13:13,060 --> 00:13:14,470 So Unsplash dot com, 288 288 00:13:14,470 --> 00:13:17,890 and there we have tons of images that we can use. 289 289 00:13:17,890 --> 00:13:18,850 Okay? 290 290 00:13:18,850 --> 00:13:22,218 So I just used this pizza one, but if you wanna find it, 291 291 00:13:22,218 --> 00:13:24,820 you can just type in pizza in here, 292 292 00:13:24,820 --> 00:13:28,019 and then it's gonna come up somewhere down here I guess. 293 293 00:13:28,019 --> 00:13:29,950 Yep, here we go. 294 294 00:13:29,950 --> 00:13:31,210 And I'll just click here, 295 295 00:13:31,210 --> 00:13:33,087 and instead of having to download it, 296 296 00:13:33,087 --> 00:13:36,273 I will simply copy the image address, 297 297 00:13:37,920 --> 00:13:39,510 and paste that one here. 298 298 00:13:39,510 --> 00:13:41,071 You see? 299 299 00:13:41,071 --> 00:13:43,683 And so now it will basically get the image from this URL. 300 300 00:13:46,510 --> 00:13:48,060 Alright, so that is the image. 301 301 00:13:48,060 --> 00:13:51,550 We should probably give it an alternative text 302 302 00:13:53,290 --> 00:13:54,643 saying that it's a pizza, 303 303 00:13:55,607 --> 00:13:59,348 and then also a class name so we can actually style it. 304 304 00:13:59,348 --> 00:14:00,430 And this one is called, and again, 305 305 00:14:00,430 --> 00:14:04,850 we have the pizza block here, underscore underscore image. 306 306 00:14:04,850 --> 00:14:07,243 Okay, very simple, very straightforward. 307 307 00:14:08,090 --> 00:14:10,690 The next up we have the contents, so the part in the middle 308 308 00:14:10,690 --> 00:14:13,240 where we have all the text and all the description. 309 309 00:14:14,840 --> 00:14:18,090 So this is a diff with the class of pizza 310 310 00:14:22,640 --> 00:14:23,473 content. 311 311 00:14:25,000 --> 00:14:26,423 Let me just write it here, 312 312 00:14:27,350 --> 00:14:28,313 content, 313 313 00:14:32,230 --> 00:14:33,270 and then close it up. 314 314 00:14:33,270 --> 00:14:36,570 And then the last part, which is the price, 315 315 00:14:36,570 --> 00:14:38,980 go ahead and copy this one, 316 316 00:14:38,980 --> 00:14:40,113 so pizza price. 317 317 00:14:44,290 --> 00:14:47,710 And actually, I can already type the correct price in here, 318 318 00:14:47,710 --> 00:14:51,380 which will be $11.99. 319 319 00:14:51,380 --> 00:14:53,300 Okay, and let's now style this a bit, 320 320 00:14:53,300 --> 00:14:55,003 starting with the image here. 321 321 00:15:01,650 --> 00:15:05,810 So in responsive images, or in responsive we design usually, 322 322 00:15:05,810 --> 00:15:08,210 we always wanna give it a width of 100%. 323 323 00:15:08,210 --> 00:15:09,440 Alright? 324 324 00:15:09,440 --> 00:15:11,060 And then down here somewhere, 325 325 00:15:11,060 --> 00:15:13,940 we have the content and the price. 326 326 00:15:13,940 --> 00:15:15,532 Okay? 327 327 00:15:15,532 --> 00:15:16,550 So pizza content and pizza price. 328 328 00:15:16,550 --> 00:15:18,770 And so now, let's start using Flexbox 329 329 00:15:18,770 --> 00:15:21,030 for the very first time. 330 330 00:15:21,030 --> 00:15:23,883 So we're gonna do that on the pizza element. 331 331 00:15:26,260 --> 00:15:27,750 And now remember what I said in the slide 332 332 00:15:27,750 --> 00:15:29,650 about the Flexbox properties, 333 333 00:15:29,650 --> 00:15:32,930 that we can define each element as a Flexbox container, 334 334 00:15:32,930 --> 00:15:34,470 and so that's what we're gonna do here. 335 335 00:15:34,470 --> 00:15:38,200 So this pizza element here will be the Flexbox container, 336 336 00:15:38,200 --> 00:15:39,540 and the three child elements, 337 337 00:15:39,540 --> 00:15:42,490 which are the hero, the content, and the price, 338 338 00:15:42,490 --> 00:15:44,490 will be the flex items that we then 339 339 00:15:44,490 --> 00:15:47,880 can align using Flexbox properties. 340 340 00:15:47,880 --> 00:15:48,713 Okay? 341 341 00:15:48,713 --> 00:15:50,490 And to define a Flexbox container, 342 342 00:15:50,490 --> 00:15:54,990 all we have to do is to say display, flex. 343 343 00:15:54,990 --> 00:15:56,590 And then, like magic, 344 344 00:15:56,590 --> 00:15:59,160 all of the elements will appear side by side. 345 345 00:15:59,160 --> 00:16:00,489 Okay? 346 346 00:16:00,489 --> 00:16:02,820 So automatically everything's now side by side like this. 347 347 00:16:02,820 --> 00:16:03,910 So awesome. 348 348 00:16:03,910 --> 00:16:06,510 That's really a great first step already. 349 349 00:16:06,510 --> 00:16:08,300 Of course it needs a lot of work still, 350 350 00:16:08,300 --> 00:16:10,730 and so let's continue with that. 351 351 00:16:10,730 --> 00:16:14,460 And so I'm gonna put all of these selectors here now. 352 352 00:16:14,460 --> 00:16:15,963 So we have pizza hero. 353 353 00:16:18,007 --> 00:16:20,131 Let me actually copy that so 354 354 00:16:20,131 --> 00:16:23,260 I don't have to write it out all the time. 355 355 00:16:23,260 --> 00:16:26,113 So we have the pizza hero, then we have the content, 356 356 00:16:28,560 --> 00:16:29,893 and also the price. 357 357 00:16:33,900 --> 00:16:36,483 Give it quickly a background of white. 358 358 00:16:41,110 --> 00:16:44,790 And the last one has also this gradient. 359 359 00:16:44,790 --> 00:16:46,233 So this linear gradient. 360 360 00:16:51,000 --> 00:16:52,960 But it actually doesn't go to the bottom right. 361 361 00:16:52,960 --> 00:16:55,853 It should just go to the bottom. 362 362 00:16:58,910 --> 00:17:01,020 Okay now you see it starts at the green 363 363 00:17:01,020 --> 00:17:03,640 and goes down to blue. 364 364 00:17:03,640 --> 00:17:05,900 Alright, and all of this here still looks a bit weird, 365 365 00:17:05,900 --> 00:17:10,130 so let's get rid of this HTML here. 366 366 00:17:10,130 --> 00:17:12,370 Actually, all we really want to style here is the body. 367 367 00:17:12,370 --> 00:17:14,270 So it's no problem to do it like this. 368 368 00:17:15,200 --> 00:17:18,070 And so that looks a bit better already. 369 369 00:17:18,070 --> 00:17:19,630 Let's then define some properties 370 370 00:17:19,630 --> 00:17:21,913 for the pizza container here. 371 371 00:17:24,120 --> 00:17:27,440 So a max width of 800 pixels. 372 372 00:17:27,440 --> 00:17:29,733 So this cart should only have 800 pixels, 373 373 00:17:32,130 --> 00:17:34,430 a border radius of four pixel, 374 374 00:17:34,430 --> 00:17:39,430 and then also a nice box shadow, so that looks a bit nicer. 375 375 00:17:39,880 --> 00:17:41,180 Alright? 376 376 00:17:41,180 --> 00:17:44,500 So 30 pixel, and you can experiment with this 377 377 00:17:44,500 --> 00:17:47,683 as you wish in order to see a different result. 378 378 00:17:49,520 --> 00:17:54,520 So R G B A zero zero zero and point two. 379 379 00:17:55,130 --> 00:17:56,513 Okay? 380 380 00:17:56,513 --> 00:17:58,540 So basically, this is the shadow in the X direction, 381 381 00:17:58,540 --> 00:18:00,418 so like this. 382 382 00:18:00,418 --> 00:18:01,830 This is the shadow in the Y direction, 383 383 00:18:01,830 --> 00:18:03,660 so basically from top to bottom. 384 384 00:18:03,660 --> 00:18:05,060 This is the amount of blur, 385 385 00:18:05,060 --> 00:18:06,410 and this is how far the blur 386 386 00:18:06,410 --> 00:18:09,200 should come out of the element basically. 387 387 00:18:09,200 --> 00:18:10,410 And then finally, this is the color, 388 388 00:18:10,410 --> 00:18:13,470 so black with a 20% opacity. 389 389 00:18:13,470 --> 00:18:16,950 And you see it, now we have this nice shadow here. 390 390 00:18:16,950 --> 00:18:19,130 So that's for a piece element for now. 391 391 00:18:19,130 --> 00:18:21,290 Let's now fix the worst problem that we have here, 392 392 00:18:21,290 --> 00:18:24,300 which is this all too big image. 393 393 00:18:24,300 --> 00:18:25,133 Okay? 394 394 00:18:25,133 --> 00:18:26,750 So this pizza hero here, 395 395 00:18:26,750 --> 00:18:29,110 which is the element that holds this image, 396 396 00:18:29,110 --> 00:18:31,430 which has a width of 100%. 397 397 00:18:31,430 --> 00:18:32,263 Alright? 398 398 00:18:32,263 --> 00:18:35,930 So this pizza hero, we want this to only have about 50% 399 399 00:18:35,930 --> 00:18:38,420 of the width of this entire container. 400 400 00:18:38,420 --> 00:18:39,900 So what could we do? 401 401 00:18:39,900 --> 00:18:44,140 Well we would go ahead and say width of 50%, right, 402 402 00:18:44,140 --> 00:18:45,930 or 45% let's say. 403 403 00:18:45,930 --> 00:18:47,970 But when we're dealing with Flexbox elements, 404 404 00:18:47,970 --> 00:18:49,760 we're not doing it like that. 405 405 00:18:49,760 --> 00:18:52,060 Instead, we're using the flex property. 406 406 00:18:52,060 --> 00:18:54,430 And the flex property can take three values, 407 407 00:18:54,430 --> 00:18:57,030 as you can see from your cheat sheet, 408 408 00:18:57,030 --> 00:18:59,780 so from the slide that I told you to print 409 409 00:18:59,780 --> 00:19:01,650 or to create a print screen. 410 410 00:19:01,650 --> 00:19:04,220 So you see that we have flex grow, 411 411 00:19:04,220 --> 00:19:06,900 flex string, and flex basis. 412 412 00:19:06,900 --> 00:19:10,040 And flex basis is where we define the width 413 413 00:19:10,040 --> 00:19:11,640 of the element if we want. 414 414 00:19:11,640 --> 00:19:13,540 So it's totally optional, but in this case, 415 415 00:19:13,540 --> 00:19:15,090 that's what we want to do. 416 416 00:19:15,090 --> 00:19:15,923 Okay? 417 417 00:19:15,923 --> 00:19:19,260 So we say that we want flex grow to zero, 418 418 00:19:19,260 --> 00:19:22,670 flex string to one, which is the default, and then here, 419 419 00:19:22,670 --> 00:19:26,550 instead of auto, which is the default, we want 45%. 420 420 00:19:26,550 --> 00:19:27,749 Okay? 421 421 00:19:27,749 --> 00:19:31,313 And so now you will see that it only occupies 45%. 422 422 00:19:31,313 --> 00:19:32,146 Okay? 423 423 00:19:32,146 --> 00:19:35,223 Then for the price, we wanna do something similar. 424 424 00:19:37,270 --> 00:19:41,363 So zero, one, and then the width. 425 425 00:19:42,730 --> 00:19:45,577 Remember, so the width is the third value here. 426 426 00:19:45,577 --> 00:19:48,640 And for this one, we want to have a width of 50 pixels. 427 427 00:19:48,640 --> 00:19:51,130 So it doesn't have to be percentage of course. 428 428 00:19:51,130 --> 00:19:53,260 Okay, so now this has 50 pixels here. 429 429 00:19:53,260 --> 00:19:54,805 Perfect. 430 430 00:19:54,805 --> 00:19:55,638 Now how do we actually make it so 431 431 00:19:55,638 --> 00:19:59,060 that this other element here occupies the rest of the space? 432 432 00:19:59,060 --> 00:20:02,701 Well that's where the magic of Flexbox comes in again. 433 433 00:20:02,701 --> 00:20:05,471 So it is this pizza content here, 434 434 00:20:05,471 --> 00:20:07,514 and now what we can do here 435 435 00:20:07,514 --> 00:20:11,040 is to allow the element to grow as much as it can. 436 436 00:20:11,040 --> 00:20:13,270 And so here we're going to use flex, 437 437 00:20:13,270 --> 00:20:16,550 set it to one, and that's it, and wait for it. 438 438 00:20:16,550 --> 00:20:21,090 And yeah, so now it has all the space that it can occupy. 439 439 00:20:21,090 --> 00:20:24,170 So what's not in the pizza or in the price 440 440 00:20:24,170 --> 00:20:26,620 will now be occupied with the content. 441 441 00:20:26,620 --> 00:20:28,940 And if this sounds a bit confusing, then please just look 442 442 00:20:28,940 --> 00:20:32,030 at the element table that I showed you before. 443 443 00:20:32,030 --> 00:20:33,010 Okay? 444 444 00:20:33,010 --> 00:20:36,090 So again, we have this flex property 445 445 00:20:36,090 --> 00:20:38,330 where the first value is flex grow. 446 446 00:20:38,330 --> 00:20:40,260 And in this case, we don't allow the element 447 447 00:20:40,260 --> 00:20:41,710 to grow anything. 448 448 00:20:41,710 --> 00:20:44,150 Then the second one is shrink, 449 449 00:20:44,150 --> 00:20:46,350 and we could also actually set this one to zero, 450 450 00:20:46,350 --> 00:20:48,720 because we don't want to shrink this element. 451 451 00:20:48,720 --> 00:20:51,275 It should always just be 50 pixels. 452 452 00:20:51,275 --> 00:20:52,108 Okay? 453 453 00:20:52,108 --> 00:20:53,240 But it in fact many times 454 454 00:20:53,240 --> 00:20:55,600 just doesn't make much of a difference. 455 455 00:20:55,600 --> 00:20:57,490 So here I'm gonna set it to zero as well, 456 456 00:20:57,490 --> 00:20:59,840 because I don't want it to shrink. 457 457 00:20:59,840 --> 00:21:02,710 Okay, so that's what this zero or this one means. 458 458 00:21:02,710 --> 00:21:05,440 And finally, we define the flex basis, 459 459 00:21:05,440 --> 00:21:08,830 which is basically the width of the element that we want. 460 460 00:21:08,830 --> 00:21:11,090 But we can also not define all of this, 461 461 00:21:11,090 --> 00:21:12,870 but only define the first one, 462 462 00:21:12,870 --> 00:21:15,870 and then just defines the flex grow. 463 463 00:21:15,870 --> 00:21:20,220 So having flex or having flex grow equal to one 464 464 00:21:20,220 --> 00:21:21,890 is actually the exact same thing, 465 465 00:21:21,890 --> 00:21:24,840 but it's a good practice to use it like this. 466 466 00:21:24,840 --> 00:21:27,980 Here we could also use a flex basis like this 467 467 00:21:27,980 --> 00:21:30,847 and set it to 45%, just like this. 468 468 00:21:30,847 --> 00:21:33,180 But again, it's a good practice 469 469 00:21:33,180 --> 00:21:35,870 to always just use the flex property. 470 470 00:21:35,870 --> 00:21:38,770 I'm not really sure why, but that's how it's been defined. 471 471 00:21:40,483 --> 00:21:44,150 Okay, so the magic here again is this flex set to one, 472 472 00:21:44,150 --> 00:21:47,100 which will make it so that all of the space that was empty 473 473 00:21:47,100 --> 00:21:49,830 before is now occupied by this element, 474 474 00:21:49,830 --> 00:21:52,540 because we allow it to grow as much as it can 475 475 00:21:52,540 --> 00:21:54,400 by using flex zero. 476 476 00:21:54,400 --> 00:21:57,810 So if it was zero again, now we would have this. 477 477 00:21:57,810 --> 00:22:01,920 But with flex one, it grows as much as it can. 478 478 00:22:01,920 --> 00:22:04,880 So let's say we had zero here, and then the price, 479 479 00:22:04,880 --> 00:22:06,833 we would have the one now here, 480 480 00:22:08,419 --> 00:22:09,252 and you will now see that it occupied 481 481 00:22:10,350 --> 00:22:11,449 all of this space here, 482 482 00:22:11,449 --> 00:22:13,033 so from here to here, all of the remaining empty space. 483 483 00:22:14,120 --> 00:22:15,653 Right? 484 484 00:22:15,653 --> 00:22:17,903 What we don't want as, we want it to be here, 485 485 00:22:18,770 --> 00:22:23,710 and so that looks a lot better now. 486 486 00:22:23,710 --> 00:22:26,130 Alright, so this looks quite nice already. 487 487 00:22:26,130 --> 00:22:27,027 Let's get rid of this space here, 488 488 00:22:27,027 --> 00:22:32,027 and all we have to do is to say display block. 489 489 00:22:32,170 --> 00:22:35,090 So we had that problem in the other project as well. 490 490 00:22:35,090 --> 00:22:37,250 So always set images to display block. 491 491 00:22:37,250 --> 00:22:38,800 Okay, so let me now show you 492 492 00:22:38,800 --> 00:22:41,710 a little bit more of the Flexbox magic. 493 493 00:22:41,710 --> 00:22:42,543 Okay? 494 494 00:22:42,543 --> 00:22:44,250 So remember that I said that there's 495 495 00:22:44,250 --> 00:22:47,480 always a main axis and a cross axis. 496 496 00:22:47,480 --> 00:22:50,450 So the main axis is in this direction here 497 497 00:22:50,450 --> 00:22:51,782 that I'm moving the mouse now. 498 498 00:22:51,782 --> 00:22:55,300 And the cross axis is perpendicular to that, 499 499 00:22:55,300 --> 00:22:57,500 so from top to bottom, usually. 500 500 00:22:57,500 --> 00:22:58,730 We can actually change that, 501 501 00:22:58,730 --> 00:23:00,550 but more about that a bit later. 502 502 00:23:00,550 --> 00:23:01,383 Okay? 503 503 00:23:01,383 --> 00:23:03,710 So this is usually the main axis, 504 504 00:23:03,710 --> 00:23:06,480 and this is the cross axis. 505 505 00:23:06,480 --> 00:23:10,560 And we can align items along these axis, okay? 506 506 00:23:10,560 --> 00:23:15,560 So let me show you that on the pizza element, okay? 507 507 00:23:18,920 --> 00:23:21,640 Just let's get rid a bit of this padding here, 508 508 00:23:21,640 --> 00:23:24,423 create it to 50, okay. 509 509 00:23:25,300 --> 00:23:28,850 So that's better, it gives us a bit more space again. 510 510 00:23:28,850 --> 00:23:31,720 Can also freeze it here again, 511 511 00:23:31,720 --> 00:23:34,807 and so yeah, that's better now. 512 512 00:23:34,807 --> 00:23:37,220 Okay, now if you want to align these items 513 513 00:23:37,220 --> 00:23:38,760 along one of the axis, 514 514 00:23:38,760 --> 00:23:41,500 we do it always on the flex container. 515 515 00:23:41,500 --> 00:23:42,333 Okay? 516 516 00:23:42,333 --> 00:23:45,570 And that's why in the property overview I have 517 517 00:23:45,570 --> 00:23:47,040 some properties on a container side 518 518 00:23:47,040 --> 00:23:49,660 and some items on the item side. 519 519 00:23:49,660 --> 00:23:50,493 Okay? 520 520 00:23:50,493 --> 00:23:53,348 So on the flex items, we use properties like flex. 521 521 00:23:53,348 --> 00:23:57,260 Okay, so remember, pizza hero is a flex item, 522 522 00:23:57,260 --> 00:23:59,650 and so that's where we use the flex property. 523 523 00:23:59,650 --> 00:24:01,500 But the flex container is the one 524 524 00:24:01,500 --> 00:24:03,759 where we have display set to flex, 525 525 00:24:03,759 --> 00:24:06,700 and this is where we can align the items. 526 526 00:24:06,700 --> 00:24:10,422 So let's start with something called align items 527 527 00:24:10,422 --> 00:24:14,223 and set it to center, and let's see what happens. 528 528 00:24:15,440 --> 00:24:16,880 And here you go. 529 529 00:24:16,880 --> 00:24:18,660 So you see that now all the items 530 530 00:24:18,660 --> 00:24:21,510 are basically aligned along one line here, 531 531 00:24:21,510 --> 00:24:25,060 and so they're aligned along the cross axis. 532 532 00:24:25,060 --> 00:24:27,636 So on this cross axis here, if you imagine this axis, 533 533 00:24:27,636 --> 00:24:30,157 they are now in the middle, 534 534 00:24:30,157 --> 00:24:31,820 so in the center, of the cross axis. 535 535 00:24:31,820 --> 00:24:33,353 Okay? 536 536 00:24:33,353 --> 00:24:34,186 So that is align items center. 537 537 00:24:34,186 --> 00:24:37,490 So align items is always along the cross axis, 538 538 00:24:37,490 --> 00:24:39,580 but there are actually other values, 539 539 00:24:39,580 --> 00:24:41,950 again, as you can see on that cheat sheet. 540 540 00:24:41,950 --> 00:24:45,890 So align items can also for example be flex end, 541 541 00:24:45,890 --> 00:24:50,150 and so now they will be moved all the way to the end. 542 542 00:24:50,150 --> 00:24:51,790 Okay? 543 543 00:24:51,790 --> 00:24:54,580 There of course we have flex start, 544 544 00:24:54,580 --> 00:24:56,300 which is basically the top, 545 545 00:24:56,300 --> 00:24:59,360 and so they're moving to the top of the cross axis. 546 546 00:24:59,360 --> 00:25:02,433 Okay, so again, we're talking about the cross axis here. 547 547 00:25:03,376 --> 00:25:06,673 Okay, and the default here is stretch. 548 548 00:25:08,398 --> 00:25:09,231 So if you don't specify anything, 549 549 00:25:09,231 --> 00:25:11,110 they will be stretched like this. 550 550 00:25:11,110 --> 00:25:12,280 That sorta basically stretch 551 551 00:25:12,280 --> 00:25:15,430 and occupy all of the empty space that there is available. 552 552 00:25:15,430 --> 00:25:18,210 Now if you want something to behave in a different way, 553 553 00:25:18,210 --> 00:25:21,290 you can also specify the alignment on one item. 554 554 00:25:21,290 --> 00:25:22,540 And in order to do that, 555 555 00:25:22,540 --> 00:25:25,320 we use align self instead of align items. 556 556 00:25:25,320 --> 00:25:28,120 So align items does it for all of the elements 557 557 00:25:28,120 --> 00:25:29,770 that are in the flex container, 558 558 00:25:29,770 --> 00:25:32,280 and if you want to then change one individually, 559 559 00:25:32,280 --> 00:25:34,030 we can use align self. 560 560 00:25:34,030 --> 00:25:35,870 So imagine we wanted to do that for the price, 561 561 00:25:35,870 --> 00:25:37,370 we could simply say 562 562 00:25:40,600 --> 00:25:42,020 align self, 563 563 00:25:42,020 --> 00:25:44,330 and then this one here to center. 564 564 00:25:44,330 --> 00:25:46,280 And only this one will then be centered 565 565 00:25:46,280 --> 00:25:47,700 along the cross axis. 566 566 00:25:47,700 --> 00:25:49,328 Okay, so just like this. 567 567 00:25:49,328 --> 00:25:51,160 Now we don't want that. 568 568 00:25:51,160 --> 00:25:54,040 I just wanted to show you that we can actually do it. 569 569 00:25:54,040 --> 00:25:57,230 Okay, and so that actually gives us a nice tool 570 570 00:25:58,307 --> 00:25:59,150 to vertically center elements. 571 571 00:25:59,150 --> 00:26:02,080 So let's now go ahead and center this container here 572 572 00:26:02,080 --> 00:26:04,696 in this viewport, so inside of the body. 573 573 00:26:04,696 --> 00:26:07,412 So how are we gonna do that? 574 574 00:26:07,412 --> 00:26:08,680 Well it's very simple. 575 575 00:26:08,680 --> 00:26:11,453 We can simply turn the body into a flex container, 576 576 00:26:13,536 --> 00:26:17,570 and now this element here will be the flex item. 577 577 00:26:17,570 --> 00:26:18,430 Okay? 578 578 00:26:18,430 --> 00:26:20,930 And if you want to now vertically center it, 579 579 00:26:20,930 --> 00:26:22,880 all we have to do, as we already learned, 580 580 00:26:22,880 --> 00:26:26,740 is to use align items, which in this case is just one, 581 581 00:26:26,740 --> 00:26:30,779 but that's no problem, and it will now be centered. 582 582 00:26:30,779 --> 00:26:33,530 And you see, as I'm changing the viewport, 583 583 00:26:33,530 --> 00:26:35,585 it always stays in the center. 584 584 00:26:35,585 --> 00:26:36,790 Great. 585 585 00:26:36,790 --> 00:26:38,530 So you see that it's perfectly acceptable 586 586 00:26:38,530 --> 00:26:42,250 that a flex container contains only one flex item. 587 587 00:26:42,250 --> 00:26:45,000 Okay, so it's absolutely no problem, works just like this. 588 588 00:26:45,000 --> 00:26:47,330 And actually we use it all the time like this. 589 589 00:26:47,330 --> 00:26:51,210 So we talked about aligning items along the cross axis, 590 590 00:26:51,210 --> 00:26:54,100 but what about the main axis, so this axis. 591 591 00:26:54,100 --> 00:26:58,509 That is where the justify content property comes into play. 592 592 00:26:58,509 --> 00:27:01,370 So align items is for, 593 593 00:27:01,370 --> 00:27:03,320 and I will actually write it down here, 594 594 00:27:06,153 --> 00:27:07,540 is for the cross axis, 595 595 00:27:07,540 --> 00:27:11,863 and justify content is for the main axis. 596 596 00:27:16,900 --> 00:27:19,030 Okay, so let's now again use center, 597 597 00:27:19,030 --> 00:27:20,690 and what do you think will happen? 598 598 00:27:20,690 --> 00:27:23,400 And actually, very simple answer, 599 599 00:27:23,400 --> 00:27:26,040 it now centered this basically horizontally 600 600 00:27:26,040 --> 00:27:27,910 along the main axis. 601 601 00:27:27,910 --> 00:27:29,050 Great. 602 602 00:27:29,050 --> 00:27:32,773 Now here we could also use flex end, for example, 603 603 00:27:32,773 --> 00:27:35,310 if we want it on the right side 604 604 00:27:35,310 --> 00:27:36,950 and flex start for the left side, 605 605 00:27:36,950 --> 00:27:39,207 but that's not really necessary. 606 606 00:27:39,207 --> 00:27:41,230 There are some other possibilities 607 607 00:27:41,230 --> 00:27:42,600 and some quite important ones, 608 608 00:27:42,600 --> 00:27:44,780 but they only work if we have multiple elements, 609 609 00:27:44,780 --> 00:27:47,490 and so I'm gonna show them to you a bit later. 610 610 00:27:47,490 --> 00:27:49,770 Anyway, I believe that these three properties here, 611 611 00:27:49,770 --> 00:27:51,520 or actually these two here, 612 612 00:27:51,520 --> 00:27:54,030 they are the single most important properties 613 613 00:27:54,030 --> 00:27:56,340 that you need to understand in order to use Flexbox. 614 614 00:27:56,340 --> 00:27:59,430 So if you knew when to use these two properties, 615 615 00:27:59,430 --> 00:28:00,620 you'll be way on your way 616 616 00:28:00,620 --> 00:28:03,040 to start using Flexbox in practice. 617 617 00:28:03,040 --> 00:28:05,450 And I know that this is a lot to take in 618 618 00:28:05,450 --> 00:28:08,070 and that it probably sounds a bit confusing, 619 619 00:28:08,070 --> 00:28:10,630 but remember that this is just a crash course. 620 620 00:28:10,630 --> 00:28:13,060 I just wanted to introduce this technology to you 621 621 00:28:13,060 --> 00:28:16,840 with a nice and simple small example project, 622 622 00:28:16,840 --> 00:28:19,300 but you should definitely go ahead and experiment 623 623 00:28:19,300 --> 00:28:21,170 and try everything out on your own 624 624 00:28:21,170 --> 00:28:22,630 after watching this video. 625 625 00:28:22,630 --> 00:28:23,620 Okay? 626 626 00:28:23,620 --> 00:28:26,010 So we're gonna come back to these properties here later, 627 627 00:28:26,010 --> 00:28:28,220 many times actually, because we're gonna use lots 628 628 00:28:28,220 --> 00:28:31,140 of flex containers in this project. 629 629 00:28:31,140 --> 00:28:31,973 Okay? 630 630 00:28:31,973 --> 00:28:34,990 I'm just noticing here that the border radius 631 631 00:28:34,990 --> 00:28:37,140 is not really showing, and that's because the image here 632 632 00:28:37,140 --> 00:28:41,039 is actually overflowing its container now. 633 633 00:28:41,039 --> 00:28:42,835 And so we did this before in the other project, 634 634 00:28:42,835 --> 00:28:46,510 we just set overflow to hidden, 635 635 00:28:46,510 --> 00:28:49,640 and that will basically clip out these overflows. 636 636 00:28:49,640 --> 00:28:52,600 Okay, so let's now take care of this price here. 637 637 00:28:52,600 --> 00:28:54,510 So this would actually have a wide text, 638 638 00:28:54,510 --> 00:28:56,230 and it should be rotated, 639 639 00:28:56,230 --> 00:28:58,920 so basically written vertically, okay? 640 640 00:28:58,920 --> 00:29:02,063 And so in CSS, there's a property for that, 641 641 00:29:03,978 --> 00:29:06,486 and it is called writing mode. 642 642 00:29:06,486 --> 00:29:07,730 Okay? 643 643 00:29:07,730 --> 00:29:12,303 And so we can say it vertical right left, just like this. 644 644 00:29:15,600 --> 00:29:18,950 And so just like that, our text is now written vertically. 645 645 00:29:18,950 --> 00:29:21,720 You see that even the cursor here changes its position 646 646 00:29:21,720 --> 00:29:23,880 when we hover this text. 647 647 00:29:23,880 --> 00:29:24,713 Okay? 648 648 00:29:24,713 --> 00:29:26,623 It should also have a wide text, 649 649 00:29:29,900 --> 00:29:34,900 so wide and a font size of 18 pixels. 650 650 00:29:35,290 --> 00:29:38,170 And now we need to use the magic of Flexbox again 651 651 00:29:38,170 --> 00:29:41,600 in order to center this text in its container. 652 652 00:29:41,600 --> 00:29:42,981 Okay? 653 653 00:29:42,981 --> 00:29:44,310 And that's something that we didn't talk about yet, 654 654 00:29:44,310 --> 00:29:48,130 which is that if you define an element as a flex container 655 655 00:29:48,130 --> 00:29:50,320 that has actually no elements in it, 656 656 00:29:50,320 --> 00:29:52,720 so like in this case it only has text, 657 657 00:29:52,720 --> 00:29:56,150 well then this text basically becomes the flex item. 658 658 00:29:56,150 --> 00:29:59,073 So if we now say display flex, 659 659 00:30:02,360 --> 00:30:04,003 and we say align items, 660 660 00:30:05,440 --> 00:30:06,873 and set it to center, 661 661 00:30:09,070 --> 00:30:11,320 you will see that it now centered the text. 662 662 00:30:11,320 --> 00:30:13,290 And actually it did it in this direction, 663 663 00:30:13,290 --> 00:30:15,520 but that's because we're writing the text 664 664 00:30:15,520 --> 00:30:17,440 in this different orientation. 665 665 00:30:17,440 --> 00:30:19,760 So if we got rid of this piece here of code, 666 666 00:30:19,760 --> 00:30:21,460 so if the text was just normal, 667 667 00:30:21,460 --> 00:30:23,060 then we would see the normal behavior 668 668 00:30:23,060 --> 00:30:26,600 of it being centered along the cross axis. 669 669 00:30:26,600 --> 00:30:28,430 Okay, so vertically basically. 670 670 00:30:28,430 --> 00:30:30,840 But since we are changing the writing mode here, 671 671 00:30:30,840 --> 00:30:32,810 that also changes the direction. 672 672 00:30:32,810 --> 00:30:34,850 So the cross axis is now this here, 673 673 00:30:34,850 --> 00:30:37,983 and the main axis is in this direction. 674 674 00:30:41,330 --> 00:30:45,070 So justify content to center it in both directions, 675 675 00:30:45,070 --> 00:30:47,480 and now you will see it right in the middle. 676 676 00:30:47,480 --> 00:30:48,720 So perfect. 677 677 00:30:48,720 --> 00:30:50,670 So you will see this pattern many times 678 678 00:30:50,670 --> 00:30:53,797 where you define an element as a flex container 679 679 00:30:53,797 --> 00:30:55,450 and then simply align items 680 680 00:30:55,450 --> 00:30:57,270 and justify content both to center, 681 681 00:30:57,270 --> 00:31:00,380 and it will center all of the elements right in the middle. 682 682 00:31:00,380 --> 00:31:02,820 Okay, so that looks already pretty nice. 683 683 00:31:02,820 --> 00:31:04,500 Let's just take a quick break here, 684 684 00:31:04,500 --> 00:31:06,990 and maybe you can review the code that we wrote already 685 685 00:31:06,990 --> 00:31:09,990 and go over that property overview again 686 686 00:31:09,990 --> 00:31:13,350 to better understand the properties that we used so far. 687 687 00:31:13,350 --> 00:31:15,320 But the main thing that you really need to understand 688 688 00:31:15,320 --> 00:31:19,123 is the axis, so the main axis and the cross axis, 689 689 00:31:19,123 --> 00:31:23,270 and how we can align different items along these axis. 690 690 00:31:23,270 --> 00:31:24,210 And so for that, 691 691 00:31:24,210 --> 00:31:27,580 we so far used align items and justify content. 692 692 00:31:27,580 --> 00:31:30,660 Okay, so let's take a break and come back in a second to 693 693 00:31:30,660 --> 00:31:34,510 then create this middle part here using a lot more Flexbox. 694 694 00:31:34,510 --> 00:31:35,343 See you then. 59816