Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,460 --> 00:00:03,100
Welcome back.
2
00:00:03,100 --> 00:00:06,860
So I've been mentioning Flexbox many times now,
3
00:00:06,860 --> 00:00:10,320
but now it's finally time to start using it
4
00:00:10,320 --> 00:00:11,893
for the very first time.
5
00:00:13,610 --> 00:00:17,830
Now before I actually explain you what Flexbox actually is
6
00:00:17,830 --> 00:00:19,790
and how exactly it works,
7
00:00:19,790 --> 00:00:21,380
I want to start by actually
8
00:00:21,380 --> 00:00:24,330
using it a little bit in practice
9
00:00:24,330 --> 00:00:27,410
and to learn the very basics of Flexbox,
10
00:00:27,410 --> 00:00:29,995
actually the context of a project like this
11
00:00:29,995 --> 00:00:31,740
is not ideal.
12
00:00:31,740 --> 00:00:35,310
And so we will learn it a little bit in isolation.
13
00:00:35,310 --> 00:00:37,680
So actually you need some files now
14
00:00:37,680 --> 00:00:40,523
from the starter files of this section.
15
00:00:42,030 --> 00:00:42,903
So let's come here,
16
00:00:42,903 --> 00:00:45,310
which remember is this folder
17
00:00:45,310 --> 00:00:47,440
that I downloaded from GitHub
18
00:00:47,440 --> 00:00:51,130
and in here in the starter files for this section.
19
00:00:51,130 --> 00:00:53,100
So CSS layouts,
20
00:00:53,100 --> 00:00:56,460
grab this Flexbox.HTML
21
00:00:56,460 --> 00:00:58,793
and the CSSgrid.HTML,
22
00:00:59,660 --> 00:01:02,150
and then copy them into the folder
23
00:01:02,150 --> 00:01:04,180
that you're currently working in.
24
00:01:04,180 --> 00:01:05,640
And so in my case,
25
00:01:05,640 --> 00:01:09,733
that is here on the desktop, this one.
26
00:01:11,590 --> 00:01:13,150
So let's place them there
27
00:01:14,150 --> 00:01:17,960
and make sure that it really is inside of the folder
28
00:01:17,960 --> 00:01:20,143
that you're currently working in VS Code.
29
00:01:21,620 --> 00:01:25,500
So otherwise everything else I show you will not work.
30
00:01:25,500 --> 00:01:27,951
And now if we go here to our sidebar,
31
00:01:27,951 --> 00:01:32,640
then indeed, here we now have Flexbox.HTML.
32
00:01:32,640 --> 00:01:34,880
And so this is kind of a starter file,
33
00:01:34,880 --> 00:01:37,530
so we can quickly learn just the very basics
34
00:01:37,530 --> 00:01:40,490
of Flexbox in isolation.
35
00:01:40,490 --> 00:01:41,323
Now okay.
36
00:01:42,190 --> 00:01:44,250
So now in order to access them
37
00:01:44,250 --> 00:01:46,560
here in our browser,
38
00:01:46,560 --> 00:01:50,060
let's actually go back to Index.HTML,
39
00:01:50,060 --> 00:01:52,970
which is this page here, right?
40
00:01:52,970 --> 00:01:56,300
And then up here in our navigation,
41
00:01:56,300 --> 00:01:57,170
maybe you remember it
42
00:01:57,170 --> 00:02:00,010
that we actually set some links there.
43
00:02:00,010 --> 00:02:03,940
So this one that says Flexbox and CSS Grid.
44
00:02:03,940 --> 00:02:07,373
And so here I will now actually connect these HTML files.
45
00:02:08,670 --> 00:02:10,989
So right now this link points to nowhere,
46
00:02:10,989 --> 00:02:15,989
but now I actually want it to go to Flexbox.HTML.
47
00:02:16,060 --> 00:02:19,563
And then the same thing here for CSS Grid.
48
00:02:20,640 --> 00:02:21,590
All right.
49
00:02:21,590 --> 00:02:25,160
And so now if we come here to our page
50
00:02:25,160 --> 00:02:27,690
and click on Flexbox,
51
00:02:27,690 --> 00:02:30,880
it will go to that Flexbox.HTML file
52
00:02:30,880 --> 00:02:32,053
that we specified.
53
00:02:33,080 --> 00:02:35,700
So it is still at this URL here
54
00:02:35,700 --> 00:02:38,663
and then slash Flexbox.HTML.
55
00:02:41,090 --> 00:02:42,140
All right.
56
00:02:42,140 --> 00:02:45,090
And so that is, again, this file right here.
57
00:02:45,090 --> 00:02:47,003
So here I have some starter code.
58
00:02:47,840 --> 00:02:50,400
So basically this container element,
59
00:02:50,400 --> 00:02:54,800
which contains these eight elements in there.
60
00:02:54,800 --> 00:02:58,690
And so all of them have a different background color
61
00:02:58,690 --> 00:03:00,183
as I defined up here.
62
00:03:01,040 --> 00:03:02,490
All right.
63
00:03:02,490 --> 00:03:04,730
And so now let's come here
64
00:03:04,730 --> 00:03:06,762
to this element called container
65
00:03:06,762 --> 00:03:09,400
and let's start using Flexbox.
66
00:03:09,400 --> 00:03:11,930
And it's actually very simple.
67
00:03:11,930 --> 00:03:14,520
So all we have to do in order to get started
68
00:03:14,520 --> 00:03:17,525
with Flexbox is to use the display property
69
00:03:17,525 --> 00:03:21,890
and set it to flex on some container element.
70
00:03:21,890 --> 00:03:23,250
And with container element,
71
00:03:23,250 --> 00:03:25,170
I simply mean any element
72
00:03:25,170 --> 00:03:27,870
that has a couple of child elements.
73
00:03:27,870 --> 00:03:29,550
So just like this one.
74
00:03:29,550 --> 00:03:32,363
But of course, it could have any other class name here.
75
00:03:33,590 --> 00:03:35,983
So we already knew the display property,
76
00:03:37,130 --> 00:03:38,800
but now we got a new value.
77
00:03:38,800 --> 00:03:41,640
And so again, the one that we want
78
00:03:41,640 --> 00:03:43,293
is to set it to Flex.
79
00:03:44,330 --> 00:03:45,620
So give it a save
80
00:03:45,620 --> 00:03:48,240
and let's see what happens.
81
00:03:48,240 --> 00:03:51,860
And immediately it looks different, right?
82
00:03:51,860 --> 00:03:55,970
So all these elements are now immediately side-by-side
83
00:03:55,970 --> 00:03:58,010
without having to use any floats
84
00:03:58,010 --> 00:04:00,060
or anything like that.
85
00:04:00,060 --> 00:04:03,490
And these elements here, we call them the flex items
86
00:04:03,490 --> 00:04:06,903
because they are the child element of the flex container.
87
00:04:08,300 --> 00:04:10,893
So again, this element here is the flex container
88
00:04:10,893 --> 00:04:15,893
and these eight child elements are the flex items.
89
00:04:16,060 --> 00:04:17,660
All right.
90
00:04:17,660 --> 00:04:19,950
Now here, each of these elements occupies
91
00:04:19,950 --> 00:04:23,443
exactly the space that it needs for its content.
92
00:04:24,320 --> 00:04:25,560
And so you'll see that actually,
93
00:04:25,560 --> 00:04:27,393
we don't have enough space here,
94
00:04:28,930 --> 00:04:31,940
so let's give us actually some more space.
95
00:04:31,940 --> 00:04:33,180
So something like this
96
00:04:34,220 --> 00:04:35,670
or maybe to make it easier
97
00:04:35,670 --> 00:04:38,833
we could just make the text a little bit smaller.
98
00:04:40,080 --> 00:04:42,040
And so now you can see that each
99
00:04:42,040 --> 00:04:44,823
of the flex items needs a lot less space.
100
00:04:46,410 --> 00:04:48,990
And by the way, this gray space that you see here
101
00:04:48,990 --> 00:04:50,910
after the last flex item
102
00:04:50,910 --> 00:04:52,470
is simply the background color
103
00:04:52,470 --> 00:04:55,640
of the rest of the empty container.
104
00:04:55,640 --> 00:04:57,173
So that's this color here.
105
00:04:58,220 --> 00:04:59,053
All right.
106
00:04:59,970 --> 00:05:04,130
So let's see if now have enough space.
107
00:05:04,130 --> 00:05:06,030
And yeah, that looks nice.
108
00:05:06,030 --> 00:05:08,193
Can increase that a little bit more again,
109
00:05:09,120 --> 00:05:10,962
even 34 and yeah.
110
00:05:10,962 --> 00:05:13,460
So now we're good to go.
111
00:05:13,460 --> 00:05:17,350
Now again, horizontally, each of these elements
112
00:05:17,350 --> 00:05:19,320
takes up exactly the space
113
00:05:19,320 --> 00:05:22,640
that is necessary for its text content.
114
00:05:22,640 --> 00:05:26,250
However, vertically, things are a bit different.
115
00:05:26,250 --> 00:05:28,340
So vertically by default,
116
00:05:28,340 --> 00:05:32,490
all the flex items are as tall as the tallest element,
117
00:05:32,490 --> 00:05:35,970
which in this case has 150 pixels
118
00:05:35,970 --> 00:05:38,290
because we set this third one,
119
00:05:38,290 --> 00:05:39,956
so the green element with the height
120
00:05:39,956 --> 00:05:42,380
of 150 pixel,
121
00:05:42,380 --> 00:05:45,470
and if we change this line to 250,
122
00:05:45,470 --> 00:05:46,350
then you would see
123
00:05:46,350 --> 00:05:48,720
that all of them grow taller.
124
00:05:48,720 --> 00:05:52,090
And if this wasn't present here at all,
125
00:05:52,090 --> 00:05:53,260
then in the end,
126
00:05:53,260 --> 00:05:54,990
all of them would simply also
127
00:05:54,990 --> 00:05:57,620
have the height to occupy only the space
128
00:05:57,620 --> 00:06:00,500
that's necessary for the content.
129
00:06:00,500 --> 00:06:02,223
But let's actually put this back
130
00:06:02,223 --> 00:06:03,920
because this can be helpful
131
00:06:03,920 --> 00:06:07,140
to demonstrate a couple of different things.
132
00:06:07,140 --> 00:06:08,900
So in order to demonstrate
133
00:06:08,900 --> 00:06:11,760
just how powerful Flexbox can be,
134
00:06:11,760 --> 00:06:15,490
let me show you one of its most useful applications,
135
00:06:15,490 --> 00:06:18,490
which is vertical centering.
136
00:06:18,490 --> 00:06:22,290
So to basically center all these items vertically,
137
00:06:22,290 --> 00:06:26,580
all we have to do is to say align-items
138
00:06:29,090 --> 00:06:31,780
and then simply center.
139
00:06:31,780 --> 00:06:33,840
And let's see what happens.
140
00:06:33,840 --> 00:06:37,320
And indeed they are now vertically aligned
141
00:06:37,320 --> 00:06:38,763
just as expected.
142
00:06:39,950 --> 00:06:42,860
So the flex container still takes the height
143
00:06:42,860 --> 00:06:44,720
of the highest element,
144
00:06:44,720 --> 00:06:48,130
which is still this one of 150 pixels,
145
00:06:48,130 --> 00:06:49,750
but now all the other ones
146
00:06:49,750 --> 00:06:51,480
simply take the space that they need
147
00:06:51,480 --> 00:06:54,897
for the text or in general for the content.
148
00:06:54,897 --> 00:06:57,753
And then they get vertically aligned in the center.
149
00:06:58,600 --> 00:07:01,050
Let's try another one here.
150
00:07:01,050 --> 00:07:03,410
So to put them at the very start,
151
00:07:03,410 --> 00:07:07,520
we use flex-start like this,
152
00:07:07,520 --> 00:07:11,683
and to put them at the bottom we use flex-end.
153
00:07:13,180 --> 00:07:14,290
All right.
154
00:07:14,290 --> 00:07:19,040
And by default, the value of align-items is stretch.
155
00:07:19,040 --> 00:07:21,240
And so now we will see exactly the result
156
00:07:21,240 --> 00:07:22,690
that we had at the beginning.
157
00:07:23,650 --> 00:07:25,270
So stretch essentially means
158
00:07:25,270 --> 00:07:28,030
that all the elements will automatically stretch
159
00:07:28,030 --> 00:07:31,190
as tall as the tallest element.
160
00:07:31,190 --> 00:07:32,060
All right.
161
00:07:32,060 --> 00:07:35,140
But let's actually put it back to center
162
00:07:35,140 --> 00:07:36,080
because this is one
163
00:07:36,080 --> 00:07:39,810
of the most important applications of Flexbox.
164
00:07:39,810 --> 00:07:41,700
Just imagine how hard it would be
165
00:07:41,700 --> 00:07:44,070
to do this without Flexbox.
166
00:07:44,070 --> 00:07:46,240
So we would have to manually select
167
00:07:46,240 --> 00:07:48,990
all of these elements except for the green one
168
00:07:48,990 --> 00:07:52,770
and then kind of try to guess some margin at the top
169
00:07:52,770 --> 00:07:55,750
so that they then looked aligned in the center.
170
00:07:55,750 --> 00:07:58,250
But here it all happens automatically.
171
00:07:58,250 --> 00:08:02,040
And of course. we can also center them horizontally.
172
00:08:02,040 --> 00:08:04,275
So basically center all of these items
173
00:08:04,275 --> 00:08:07,573
inside of the flex container.
174
00:08:10,210 --> 00:08:13,960
So we do that with justify-content
175
00:08:14,940 --> 00:08:17,140
and set it to center.
176
00:08:17,140 --> 00:08:19,810
And you see that now the space here
177
00:08:19,810 --> 00:08:22,220
is the same on this side
178
00:08:22,220 --> 00:08:23,830
and on this side.
179
00:08:23,830 --> 00:08:26,570
And so that means that they are now centered
180
00:08:26,570 --> 00:08:28,890
inside of the container.
181
00:08:28,890 --> 00:08:31,420
But actually there is property here.
182
00:08:31,420 --> 00:08:33,210
So justified-content that is part
183
00:08:33,210 --> 00:08:36,470
of the Flexbox specification,
184
00:08:36,470 --> 00:08:38,731
gives us a couple of other really helpful
185
00:08:38,731 --> 00:08:40,483
and nice options here.
186
00:08:41,510 --> 00:08:43,780
So for example, we can also say
187
00:08:43,780 --> 00:08:48,780
space-between and watch what happens then.
188
00:08:49,990 --> 00:08:54,010
So you see that basically the remaining space
189
00:08:54,010 --> 00:08:56,800
is now distributed evenly between
190
00:08:56,800 --> 00:08:58,980
all of these elements.
191
00:08:58,980 --> 00:09:01,300
So basically they will have now this space,
192
00:09:01,300 --> 00:09:03,860
which is the same between all of them.
193
00:09:03,860 --> 00:09:06,240
So you see here and here and here,
194
00:09:06,240 --> 00:09:07,713
and it's really all the same
195
00:09:07,713 --> 00:09:11,070
in all the places now, right?
196
00:09:11,070 --> 00:09:12,879
And we will actually go a lot deeper
197
00:09:12,879 --> 00:09:15,190
into all of these properties
198
00:09:15,190 --> 00:09:17,640
and there are of course a lot more,
199
00:09:17,640 --> 00:09:20,861
but for now, I just wanted to give you a very quick overview
200
00:09:20,861 --> 00:09:24,360
of how we can get started using Flexbox.
201
00:09:24,360 --> 00:09:27,730
So maybe and hopefully you start seeing
202
00:09:27,730 --> 00:09:29,770
how powerful this is.
203
00:09:29,770 --> 00:09:32,290
And so now that we know the basics,
204
00:09:32,290 --> 00:09:34,320
let's get a high level overview
205
00:09:34,320 --> 00:09:35,840
of all the properties
206
00:09:35,840 --> 00:09:39,350
that are part of the Flexbox specification
207
00:09:39,350 --> 00:09:40,733
in the next lecture.
14309
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.