Hey, guys. 1
So in the last lesson, we looked at the various Flexbox properties that determine the layout of our 2
items in a Flexbox container. 3
We looked at the things that we can change about the flex items and the things that we can change about 4
the flex container. 5
In this lesson, we're going to talk about how to size the items in a Flexbox container shrinking and 6
growing and how it should behave when it's in a responsive situation. 7
Let's say we had a Web page with four paragraph elements, so we know that paragraph elements are going 8
to be full width because they are all block elements and they have a default amount of sort of margin 9
and also padding. 10
If we go ahead and put all of those paragraph elements into a Flexbox container, even if that container 11
is invisible, it's going to turn each of these paragraph elements into flex items. 12
And by default, as you might remember, the main axis is along a row, 13
and we can of course change that, 14
but it stacks each of these items based on the size of their content. 15
One next to each other without any gaps between. 16
At this stage, even without writing any sizing properties, this has a default behavior where if we 17
go ahead and change the width of our window or our viewport, if this is shrunken, then you'll see 18
these blocks shrink in response. 19
And Flexbox does most of this automatically having a behavior that in most cases is what we would want, 20
but sometimes you're going to need to customize this and to be able to customize how each of the items 21
inside a Flexbox is sized, 22
we're going to need to learn a little bit about how it actually gets worked out, 23
and what is the algorithm essentially, that Flexbox uses to determine each of the flex item's size. 24
And the way that it works it out is basically a priority list. 25
The first thing it looks at is whether if there is a minimum width and a maximum width that's set on 26
the item. If this is not set, then it's going to look at the next thing, which is is there a 27
flex-basis set? 28
And previously we looked at this property flex-basis as a way to set the width on a row-based Flexbox 29
or the height on a column-based Flexbox. 30
Essentially whichever direction is the main axis, the size is going to follow that axis. 31
If there's no flex-basis set either, it's going to look at the width or in the case of a column-based 32
Flexbox, it's going to look at the height property. 33
And we've already previously set the height property and the width property, and you can set that on 34
any HTML element 35
so there's nothing new there. 36
Now, the final one that looks at if none of those are set is the actual content width. 37
Let's say you had an item that contained a paragraph with the word App Brewery. 38
The content width, 39
the ideal width is basically the width that allows that text to be lined up next to each other. 40
If the flexible box had to shrink, then it will go down to the minimum size, which is where the text 41
wraps and they are stacked one on top of each other. 42
This is now pretty much the minimum content width. 43
So I'm going to show you example of all four ways of setting the sizing and we'll see with real examples 44
of how this actually works in code format. 45
Let's first create a flex container that is just set to display: flex. 46
Has a gap of 10px. 47
Inside this flex container, I've got four items and each of those are paragraph items similar to what 48
we saw before. 49
Each of these paragraph items obviously contain texts that have different lengths. 50
If we go ahead and just by default, put these items inside a flex container such as here, then when 51
we go ahead and shrink the size of this window, then what's going to happen is each of these items 52
are going to automatically shrink until they reach the minimum content size. 53
Notice that this box is the largest, and that's because the longest word in that entire line of text 54
is this word programming. 55
So that determines 56
the minimum width of this box because it doesn't want to put words onto different lines. 57
So it's going to set this as the minimum width that it will shrink down to. When this is sort of in 58
real life, 59
let's go ahead and animate it, 60
this is what you'll actually see. 61
It's going to shrink and shrink and shrink until it's reached that minimum width for the content. 62
And then you'll see afterwards all of that content gets pushed off the page and it will not be visible 63
on screen anymore. 64
This is the default behavior of Flexbox without us setting any of the sizing properties. 65
And as I mentioned, by default, the max-width looks at the longest possible line of the text, and 66
the minimum width looks at the longest word to determine the minimum width. 67
Now, let's take a look at what happens if we decide to set manually the width of each of the items. 68
Notice here that the flex container still has the same code as before. 69
It has a gap of 10px, 70
it's set to display: flex, 71
but now for each of these green items, we've now targeted them inside our CSS and we've decided that 72
we want each of them to have a width of 100px. 73
And that's exactly what you see here. 74
Each of these have the same size and they are all 100px wide. 75
So now when the container gets shrunk, what happens is it's going to try and respect that width until 76
there is not enough overall width of the container. 77
So if we had four items which are 100px each, then this container has to be 400px, right? 78
If this width becomes less than 400px, then it's going to continue using the same algorithm to 79
shrink each of the items. 80
Now again, notice that the shrinking is not uniform. 81
It's still trying to conform to that minimum size of the content so that even though the text goes on 82
two different lines, the longest word is still kept intact. 83
When there is enough space, it's going to respect this width, 84
but as soon as there's not enough space in the container to accommodate all of the items that have the 85
set width, it's going to ignore this and dynamically shrink each of the items until it reaches that 86
minimum width for each item. 87
Whereas initially, if we had nothing set on the items, it's going to look at the length of the entire 88
line when it's all on one line, 89
so that is going to be the content width. 90
If, however, you have a width property set, then it's going to look at that instead instead of the 91
content width. 92
So instead of everything being all on one line, it's going to look at, well, what is the width that 93
you've set? 94
So if we set, it's going to be 100px, then it's going to try and make it 100px wide until 95
you have shrunken the container where it can no longer fit everything as 100px 96
then it starts shrinking the box. 97
Now the next thing that we can try adding is the flex-basis. 98
Notice how I've got a width set, but I've also got a flex-basis set and because I've got a row-based 99
flex container, because I haven't changed it to column, remember we said the flex-basis is effectively 100
determining the width of each of the items. 101
What does this look like then? 102
Well, when you actually run this code, you're going to see that it's going to completely ignore this 103
width because you have a flex-basis set and it's going to set each of the items to that flex-basis, 104
which in this case is 200px. 105
And you can see it's a little bit wider than the previous example. 106
However, this again is in the situation where the container has plenty of space to fill, even though 107
you've got 200px for each item, there's still space left, 108
but if you shrink everything down where there's no more space and there's not enough space to give each 109
item 200px, then exactly the same thing happens. 110
It's going to look at that minimum width again, and it works pretty much the same as it did with width. 111
When we animate this, you'll see that it will give it 200px if it can, 112
and if it can't, then it's going to shrink it to the minimum width. 113
So remember that when we have a flex-basis, it will completely ignore the width. 114
So there's actually not even any point in setting it because it's going to be looking at the more important 115
property, which is the flex-basis in this case. 116
We've seen how we've gone from the content width, which is the default to a set width, to a flex-basis, 117
and now we're going to see what happens with the minimum width and the maximum width. 118
As I mentioned, there is a default max-width and min width that's set based on the content. 119
So the maximum width is all of the content lined up, occupying the ideal estate, which in the form 120
of text is to have everything on one line and the minimum width is determined by the longest word and 121
it's going to be the width of that word at the font size that's set. 122
You can also manually set each of these properties and completely ignore the content, and in some cases 123
that might be useful. 124
Let's say that we had a flex-basis of 200px set on each of these items, but we go ahead and also 125
set a maximum width of 100px. 126
Notice that in this case, 100px is less than 200px, 127
so the flex-basis is actually larger than the maximum width. 128
So what happens? 129
Well, instead of respecting the flex-basis, which is 200px, even when there's plenty of space, 130
it's going to look at that max-width and it's only going to give each item 100px. 131
So this max-width determines how much the maximum width that the item is allowed to grow to. 132
Even if you give it all the space in the world, how wide can it possibly be? 133
Well, it's going to look at the max-width. 134
And if that max-width is smaller than the flex-basis, then it's going to take this value. 135
But if the flex-basis was smaller than the max-width, for example, if we had a flex-basis instead 136
of 200, it was, I don't know, 50px, 137
well then in that case each of these items will actually be 50px 138
instead. The maximum width is the maximum possible. 139
It's going to try and respect 140
the flex-basis unless the max-width happens to be smaller. 141
And if we take a look at this in animation, you'll see that as I shrink this container, each of the 142
items shrink. 143
And as I grow the container, each of the items grow in size, but only up until that maximum width. 144
The max-width determines the growth potential of each of the items. 145
On the other hand, there is the minimum width. 146
As I said, the maximum width determines how big each of the items can grow to, and the minimum width 147
determines how small each of the items can shrink to. 148
Now, let's go back to that situation where we have a flex-basis of 200px, but in addition, we 149
set the minimum width to 300px. 150
So notice in this case, 300px is bigger than 200px, what's going to happen when our website 151
gets rendered? 152
Well, it's going to look like this. 153
This is 200px and this is 300px. 154
As you'll notice, it's actually respecting the minimum width, even though we have a flex-basis that's 155
set when the minimum width is larger than the flex-basis, it's going to respect that minimum width, 156
but in addition, when we try to shrink our container down, it's only going to shrink until the minimum 157
width is reached. 158
So if your minimum width is very large, then it's not going to shrink beyond this size. 159
So I've talked a little bit about growing and shrinking, and this is a really important concept to 160
understand in Flexbox because a lot of that flexibility, the flexible part of the flexible box comes 161
from this ability to grow and to shrink. 162
It's probably easier to understand these properties by switching both of them off first. So we can switch 163
each of these property off by setting it to 0. 164
So let's set flex-grow to 0 and flex-shrink to 0 and see what happens to our boxes. 165
They start out being 100px wide, 166
and then when we go ahead and try to grow and shrink it, namely trying to increase and decrease the 167
width of the window, you can see that our items don't actually change in their size at all. 168
They just stay exactly the same size as before because it can't grow and it can't shrink. 169
So this doesn't even look like a Flexbox anymore. 170
Right? 171
Let's go ahead and switch some of those things on. 172
If we go ahead and change the flex-grow to 1, which means that flex-grow is on, but flex-shrink 173
is off, then what's going to happen is each of these items will first start out at 100px, 174
remember the flex-basis is the initial starting value, 175
it tries to be 100px wide, but then because it's allowed to grow and there is plenty of space 176
to grow, there's way more than 400px to fit our four items, 177
then it's going to increase the width of each of these items until the entire width of the container 178
is filled up by each of our items. 179
So when we adjust the width of our container, this is where you can see that when the width is reduced, 180
it gets reduced to that flex-shrink amount, which is 100px, but it doesn't go any further than 181
that. 182
Any further than that, the items start going off the screen. 183
But when there's more than 100px, for example, when we're widening the amount of space like here, 184
it will continue to grow until it can fill up all of the space. 185
Now, what if we switch that around? 186
Let's turn off flex-grow and turn on flex-shrink. 187
What happens here is by default, it is going to set everything to the flex-basis. 188
So 100px and it's not going to grow to fill the space, but it is going to shrink beyond the flex-basis 189
size until you reach that minimum width. 190
And because that's not set in this case, then it's just going to look at the minimum width of the content. 191
So this is actually the default setting of Flexbox items. 192
It's going to not grow, but it is going to shrink. 193
Even if you didn't set these two properties, you would see this behavior by default. 194
Now, the next example I've got is where flex-grow and flex-shrink are both on, 195
and as you can imagine, what's going to happen is it's going to try and take up as much width as possible. 196
And then when you shrink it, it's going to try and be as small as possible. 197
So in this case, the flex-basis is pretty much completely ignored because flex-grow and flex-shrink 198
are both on. 199
It's actually going to grow to the max-width, 200
and it's going to shrink to the minimum width. 201
And if these two are not set, then it's going to infer that from the content of those items. 202
Now, the default for flex-basis is actually auto and auto is a little bit of a complex one because 203
it's going to look at the amount of content in each of the items. 204
So it's going to give more flex-basis to the items with more content. 205
For example, this last item with the most words and it's going to give less width to the ones that 206
have smaller content. 207
If you don't want that and instead you want everything to be equal width, then you simply switch it 208
off by giving it a 0. 209
There's actually a shorthand way of writing this without having to write out flex-basis, flex-grow, 210
flex-shrink, 211
and we've seen this style of shorthand before in CSS. 212
The first value is the grow. 213
The second value is the shrink. 214
And the third value is the basis. 215
So it's exactly the same, but it's obviously a lot quicker to write. 216
And because this particular set is so commonly used, you can actually shorten this even further by 217
simply just writing flex: 1. 218
And that means a grow of 1, a shrink of 1 and a basis of 0 to keep everything equal. 219
We've actually seen this before where we created containers with different size ratios; a red item 220
that is half the size of the blue container, which has a flex of 2, and the blue one is two-thirds 221
the size of the one with a flex of 3, 222
and essentially what we're doing here is we're setting the grow to 1 and the shrink to 1. 223
And in this case, it's a grow of 2 and a shrink of 2. 224
In this way, we're able to set a ratio for how our elements will respond responsively. 225
So no matter if you grow or shrink, it's going to try and keep these ratios and it's going to try and 226
respect that even while it's being responsibly resized. 227
That was quite a lot of information on how Flexbox sizing works. 228
Let's go ahead and try an exercise to see if you can apply this in code and see if you've understood 229
a lot of the principles that we talked about in this lesson. 230
So head over to this URL where I've prepared an exercise for you. 231
You can simply just write your code inside this text box and then when you click "Apply CSS," the goal 232
is that your CSS rules will allow this blue Flexbox to behave the same way as this green one. 233
So I want you to resize the window and see how the green box behaves. 234
Does it grow? 235
Does it shrink? 236
What's the size that it wants to be? 237
And I want you to use what you see on screen. 238
So notice how I've told you what each of these should be in terms of their ideal width, 239
and I want you to write your code down here, whatever it is that you need. 240
Maybe you don't need to write any code under some of the brackets, 241
maybe you need to write more code, 242
but essentially once you click, "Apply CSS," the blue boxes which you control with your code should have 243
the same behavior as the green ones. 244
Pause the video now, 245
head over here and give that exercise a go. 246
All right. 247
So the first thing that you might notice is something that's actually completely unrelated to sizing, 248
which is the fact that each of our items are distributed along this container and that if you remember 249
from a previous lesson, 250
so a little bit of revision here is done using justify-content. 251
And this particular style of justify content is actually space between. 252
So if I click, "Apply CSS," you can see it's now spaced between. 253
Now the next thing we need to change is the fact that each of these items actually should have different 254
ideal widths. 255
And we know we can set that by using the flex-basis. 256
Let's go ahead and set the flex-basis for each of our items based on those widths. 257
So it's 200px for the Item 1, 200px for Item 2 and 400px for Item 3. 258
Let's apply our CSS and you can see they're now equal width and it looks like everything's the same, 259
we've achieved our goal 260
but remember I said you have to resize things and notice how they don't behave the same at all. 261
Now when we resize this, you'll notice that Item 1, actually shrinks in our green Flexbox, 262
but Item 2 and 3 don't shrink at all. 263
So we can tell that 2 and 3 probably have shrink disabled and item 1 is left to shrink. Now by 264
default, 265
I mentioned that all items in a Flexbox are allowed to shrink and you can see our blue 1, 2 and 266
3, all in fact, do that shrink to fit the space. 267
Now, that is probably a more useful behavior in reality, 268
but in this case, because we're trying to do an exercise, let's go ahead and match it. 269
So let's turn the flex-shrink off on Item 2 by setting it to 0 and let's do the same for Item 3. 270
Let's apply our CSS and see it now behaves exactly the same. 271
So that is the solution to this simple exercise. 272
But even though it's simple, it's actually quite difficult to work out exactly what needs to be changed. 273
And hopefully through doing this exercise, you've had to review some content from before, such as 274
justify-content, and also you've had to think hard about how flex-shrink, flex-basis and all of these 275
different things we learned in today's lesson actually works. 276
Have a play around with the code. 277
Try writing some stuff yourself and once you're ready, go ahead to the next lesson where we have our 278
final section project.