1
00:00:00,430 --> 00:00:05,190
With flexbox you can make flex items grow
or shrink in relation to the other flex

2
00:00:05,190 --> 00:00:09,330
items and the available space
inside the flex container.

3
00:00:09,330 --> 00:00:12,270
For example,
I can expand the flex items so

4
00:00:12,270 --> 00:00:15,440
that they fill up
the entire flex container.

5
00:00:15,440 --> 00:00:17,690
Then I can expand the first, second,

6
00:00:17,690 --> 00:00:21,670
or any flex item to take up
more space in the container.

7
00:00:21,670 --> 00:00:25,800
The flex-grow property determines
how much of the available space

8
00:00:25,800 --> 00:00:28,630
inside the flex-container
an item should take up.

9
00:00:28,630 --> 00:00:32,490
So, it assigns more or
less space to flex items.

10
00:00:32,490 --> 00:00:38,230
By default, flex items in a flex container
do not take up the full space of a line.

11
00:00:39,470 --> 00:00:41,660
But, you can expand the flex items so

12
00:00:41,660 --> 00:00:46,150
that they fill up the entire line
using the flex-grow property.

13
00:00:46,150 --> 00:00:51,380
Back in my workspace,
inside flexbox.css, I'm going to target

14
00:00:51,380 --> 00:00:56,110
all the flex items by creating a new
rule that targets the class item.

15
00:00:58,120 --> 00:01:00,760
Then I'm going to give
them a flex-grow property.

16
00:01:02,840 --> 00:01:06,340
The default value for flex-grow is zero.

17
00:01:06,340 --> 00:01:09,310
The flexed items do not expand.

18
00:01:09,310 --> 00:01:14,047
So watch what happens when I
set their flex-grow value to 1.

19
00:01:17,908 --> 00:01:21,690
Now all the items have the same
size in the container.

20
00:01:21,690 --> 00:01:25,660
The flex items expand to take
up the full space of a line.

21
00:01:25,660 --> 00:01:30,568
Even as the flex container gets narrower,
the flex items adjust to the width.

22
00:01:33,019 --> 00:01:38,544
When the flex container can no longer
distribute an equal amount of space on one

23
00:01:38,544 --> 00:01:45,050
line, It breaks items on to a second line
where it also gives the items equal space.

24
00:01:45,050 --> 00:01:51,780
So notice how item six expands to take up
the full space of the second line and once

25
00:01:51,780 --> 00:01:56,710
item five moves down to the second line
they each take up half the line and so on.

26
00:01:58,610 --> 00:02:02,300
So this is a handy feature for
building responsive layouts.

27
00:02:02,300 --> 00:02:07,180
For instance, you can display a certain
number of equal width columns on one row

28
00:02:07,180 --> 00:02:09,350
on wide desktop screens.

29
00:02:09,350 --> 00:02:13,140
Then on smaller screens where
the row will be much narrower,

30
00:02:13,140 --> 00:02:17,230
some of the columns appear on a second or
third line.

31
00:02:17,230 --> 00:02:21,606
The higher the flex grow value, the more
an item grows relative to the other items.

32
00:02:21,606 --> 00:02:26,993
So, for instance,
if I go back to the style sheet and

33
00:02:26,993 --> 00:02:31,769
if I create a new rule
that targets item-3,

34
00:02:31,769 --> 00:02:35,458
and give it a flex-grow value of two.

35
00:02:35,458 --> 00:02:39,640
So for every bit of space the other
flex items get on one line,

36
00:02:39,640 --> 00:02:44,030
Item 3 will always get twice
as much of that space.

37
00:02:44,030 --> 00:02:50,470
And if I go back to the item-3 rule and
change the flex-grow value to 3,

38
00:02:50,470 --> 00:02:55,880
this will give it three times
the amount of space. So again,

39
00:02:55,880 --> 00:02:59,240
this is great for
building flexible columns.

40
00:02:59,240 --> 00:03:01,820
Say I'm creating a two column layout.

41
00:03:01,820 --> 00:03:05,050
So for instance,
I'll go over to my HTML file and

42
00:03:05,050 --> 00:03:09,960
comment out all but items one and two.

43
00:03:09,960 --> 00:03:15,680
So this for example can be a main
content column and a sidebar.

44
00:03:15,680 --> 00:03:21,435
So now I can go back to my style sheet and
give the main column a larger flex-grow

45
00:03:21,435 --> 00:03:26,577
so I'll target item-1 and set 
its flex-grow to four.

46
00:03:26,577 --> 00:03:31,930
This way it will always take
up four times as much space

47
00:03:31,930 --> 00:03:37,940
as the sidebar. The flex-grow
property applies to flex items only.

48
00:03:37,940 --> 00:03:41,760
If you apply flex-grow to a flex
container, it will have no effect on it.