Original subtitles

1 1

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.