Original subtitles

1 1

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.