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