1
00:00:01,110 --> 00:00:04,050
‫Now it's time to finally learn how to use

2
00:00:04,050 --> 00:00:09,010
‫Tailwinds utility classes to implement layouts with Flexbox.

3
00:00:10,770 --> 00:00:14,883
‫And let's actually start right here in the cart overview.

4
00:00:15,720 --> 00:00:18,780
‫So the simple thing that we want to do now is to

5
00:00:18,780 --> 00:00:23,780
‫place this link here and this part on the left side by side.

6
00:00:24,360 --> 00:00:26,940
‫And then this information should be on the left

7
00:00:26,940 --> 00:00:29,130
‫and this one on the right.

8
00:00:29,130 --> 00:00:33,930
‫So that's something very easy to do with flexbox, right?

9
00:00:33,930 --> 00:00:37,170
‫So all we have to do is to make this a flex container

10
00:00:37,170 --> 00:00:39,510
‫then align the items vertically

11
00:00:39,510 --> 00:00:42,360
‫and then also justify the items.

12
00:00:42,360 --> 00:00:45,990
‫So this is what we do most of the time in Flexbox.

13
00:00:45,990 --> 00:00:48,903
‫And so let's now learn how to do that.

14
00:00:49,770 --> 00:00:53,820
‫So the flex container is of course the parent container

15
00:00:53,820 --> 00:00:56,550
‫of both the link and this paragraph.

16
00:00:56,550 --> 00:00:59,640
‫And so that's this one right here.

17
00:00:59,640 --> 00:01:03,210
‫And so let's keep adding one more class here

18
00:01:03,210 --> 00:01:05,460
‫or actually multiple classes.

19
00:01:05,460 --> 00:01:08,730
‫And so now we start getting that situation where

20
00:01:08,730 --> 00:01:13,080
‫this class name's string is getting really, really long.

21
00:01:13,080 --> 00:01:16,170
‫So that's what some people really don't like.

22
00:01:16,170 --> 00:01:19,053
‫But again, you will get used to this.

23
00:01:20,340 --> 00:01:23,460
‫So, in order to declare this as a flex container

24
00:01:23,460 --> 00:01:26,340
‫we usually do display flex.

25
00:01:26,340 --> 00:01:31,110
‫And so, in this case, we just have to do flex because

26
00:01:31,110 --> 00:01:34,950
‫as we hover over this, we will see that this implements

27
00:01:34,950 --> 00:01:37,173
‫exactly display flex.

28
00:01:38,400 --> 00:01:42,330
‫Then let's say we want to vertically align the items

29
00:01:42,330 --> 00:01:45,453
‫and for that we would use align items center.

30
00:01:46,290 --> 00:01:49,320
‫So, the corresponding Tailwind class for that

31
00:01:49,320 --> 00:01:51,693
‫is items center.

32
00:01:53,280 --> 00:01:56,850
‫And so this looks pretty much the same because the texts

33
00:01:56,850 --> 00:02:00,180
‫have basically the same size and so we can't really

34
00:02:00,180 --> 00:02:01,350
‫see that.

35
00:02:01,350 --> 00:02:04,863
‫But next up, let's also justify the items.

36
00:02:05,700 --> 00:02:08,550
‫So if you want the space between them to be

37
00:02:08,550 --> 00:02:12,360
‫basically divided between all the different items,

38
00:02:12,360 --> 00:02:16,650
‫we would usually do justify content space between

39
00:02:16,650 --> 00:02:19,260
‫and so in Tailwind that is

40
00:02:19,260 --> 00:02:23,190
‫justify and then between

41
00:02:23,190 --> 00:02:25,410
‫and beautiful.

42
00:02:25,410 --> 00:02:28,800
‫So this pushes this content right to the right side

43
00:02:28,800 --> 00:02:32,793
‫and indeed this gives us justify content space between.

44
00:02:33,870 --> 00:02:34,770
‫Nice.

45
00:02:34,770 --> 00:02:35,880
‫and as always.

46
00:02:35,880 --> 00:02:39,540
‫Let's also check out flex box here, which should be

47
00:02:39,540 --> 00:02:42,240
‫somewhere ah yeah, right here.

48
00:02:42,240 --> 00:02:46,050
‫So here is all the things about flex box

49
00:02:46,050 --> 00:02:51,050
‫like the flex property itself, which is what we have here.

50
00:02:51,810 --> 00:02:52,683
‫Then,

51
00:02:53,760 --> 00:02:55,770
‫well now we are back to the beginning

52
00:02:55,770 --> 00:02:58,470
‫but you can check this out yourself.

53
00:02:58,470 --> 00:03:01,860
‫So I already showed you the most important parts here

54
00:03:01,860 --> 00:03:02,940
‫and throughout the rest

55
00:03:02,940 --> 00:03:05,550
‫of the project we will of course learn more

56
00:03:05,550 --> 00:03:08,580
‫and more different things about Flexbox.

57
00:03:08,580 --> 00:03:12,060
‫But arguably the most important things are really

58
00:03:12,060 --> 00:03:16,260
‫this one here, align item center and justify between.

59
00:03:16,260 --> 00:03:21,260
‫And as you could see here, maybe from the auto completion

60
00:03:21,360 --> 00:03:24,930
‫of course we could have used other justifies.

61
00:03:24,930 --> 00:03:27,420
‫Well now for some reason it's not appearing.

62
00:03:27,420 --> 00:03:31,200
‫But for example, justify end would also work

63
00:03:31,200 --> 00:03:34,680
‫and then it would push all the elements there to the end

64
00:03:34,680 --> 00:03:38,580
‫or justify start or really all the other values

65
00:03:38,580 --> 00:03:41,620
‫that you probably already know about Flexbox.

66
00:03:44,644 --> 00:03:47,610
‫Now okay, now let's do the same thing here

67
00:03:47,610 --> 00:03:49,653
‫in the header as well.

68
00:03:51,030 --> 00:03:55,110
‫So making it a flex container, then align items center

69
00:03:55,110 --> 00:03:57,063
‫is items center.

70
00:03:59,100 --> 00:04:00,210
‫And I think that all

71
00:04:00,210 --> 00:04:04,500
‫of these are actually pretty easy to memorize.

72
00:04:04,500 --> 00:04:08,070
‫So now we get here this auto completion.

73
00:04:08,070 --> 00:04:12,390
‫So for example, we could also use Justify around

74
00:04:12,390 --> 00:04:14,790
‫and so this would look like this.

75
00:04:14,790 --> 00:04:18,120
‫So we would also get a bit of space around here

76
00:04:18,120 --> 00:04:19,920
‫but let's again do between

77
00:04:19,920 --> 00:04:22,170
‫which I think is the most common one.

78
00:04:22,170 --> 00:04:23,070
‫And so with this

79
00:04:23,070 --> 00:04:25,800
‫they're just side by side.

80
00:04:25,800 --> 00:04:26,820
‫And now it's actually

81
00:04:26,820 --> 00:04:30,900
‫time to also bring back the username there.

82
00:04:30,900 --> 00:04:34,770
‫So remember how we hid the username like this.

83
00:04:34,770 --> 00:04:37,350
‫So this is what should happen when the screen

84
00:04:37,350 --> 00:04:39,180
‫is actually pretty small.

85
00:04:39,180 --> 00:04:42,600
‫So in a situation like this, like on a mobile screen

86
00:04:42,600 --> 00:04:46,020
‫where we don't have the space to display everything

87
00:04:46,020 --> 00:04:48,780
‫but then at a certain point, for example

88
00:04:48,780 --> 00:04:53,550
‫here at the medium break point, we can show it again.

89
00:04:53,550 --> 00:04:56,790
‫And so let's do that.

90
00:04:56,790 --> 00:04:58,710
‫So let's do medium.

91
00:04:58,710 --> 00:05:02,160
‫And then here we want the display no longer to be hidden

92
00:05:02,160 --> 00:05:04,320
‫but to be block.

93
00:05:04,320 --> 00:05:07,023
‫So display block basically.

94
00:05:08,520 --> 00:05:10,020
‫So that's what we get here.

95
00:05:10,020 --> 00:05:15,020
‫And so as we reach that breakpoint, then let's wait for it.

96
00:05:15,300 --> 00:05:16,740
‫And there it is.

97
00:05:16,740 --> 00:05:20,100
‫And so here now we can really see the justify

98
00:05:20,100 --> 00:05:24,240
‫between class making Flexbox work in the way that we

99
00:05:24,240 --> 00:05:27,120
‫are expecting it to work.

100
00:05:27,120 --> 00:05:30,450
‫But anyway, I just wanted to do one more thing here

101
00:05:30,450 --> 00:05:34,020
‫which is to make this text here a lot larger.

102
00:05:34,020 --> 00:05:37,770
‫So also in this medium breakpoint.

103
00:05:37,770 --> 00:05:41,313
‫So here, let's do text three XL.

104
00:05:42,180 --> 00:05:44,790
‫And so this looks a bit nicer.

105
00:05:44,790 --> 00:05:47,160
‫So if you were to watch this on the tablet now

106
00:05:47,160 --> 00:05:51,030
‫or maybe even a computer, then this looks a lot better

107
00:05:51,030 --> 00:05:52,980
‫but it still works great

108
00:05:52,980 --> 00:05:56,190
‫on a smaller screen like this one.

109
00:05:56,190 --> 00:06:00,240
‫Well maybe except that we should have some space also here

110
00:06:00,240 --> 00:06:02,220
‫but that's easy enough.

111
00:06:02,220 --> 00:06:03,960
‫So let's come here

112
00:06:03,960 --> 00:06:08,310
‫and add some padding there in the X direction.

113
00:06:08,310 --> 00:06:09,990
‫Let's say four.

114
00:06:09,990 --> 00:06:10,823
‫And again

115
00:06:10,823 --> 00:06:14,220
‫you will intuitively know which values to use here

116
00:06:14,220 --> 00:06:17,253
‫as you start using Tailwind on your own.

117
00:06:18,510 --> 00:06:22,200
‫And for now, this is all I had to show you about Flexbox.

118
00:06:22,200 --> 00:06:24,840
‫And so next up is CSS grid

119
00:06:24,840 --> 00:06:28,713
‫so that we can actually build or layout here a bit better.