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