1
00:00:00,210 --> 00:00:02,780
To follow along using
the latest workspace,

2
00:00:02,780 --> 00:00:06,198
launch the workspace on this page or
you can download the project files.

3
00:00:06,198 --> 00:00:13,820
In the index.html file the flex
container now contains only four items.

4
00:00:13,820 --> 00:00:17,100
I added content inside each flex item.

5
00:00:17,100 --> 00:00:19,570
Some items have more content than others,

6
00:00:19,570 --> 00:00:21,628
as you can see here in
the workspace preview.

7
00:00:21,628 --> 00:00:26,892
Back in flexbox.css when
I target the items and

8
00:00:26,892 --> 00:00:30,583
set their flex-grow value to one.

9
00:00:33,617 --> 00:00:39,670
The browser tries its best to equally
distribute the space inside the container.

10
00:00:39,670 --> 00:00:42,740
Some flex items are wider than
others because of the amount

11
00:00:42,740 --> 00:00:47,850
of content inside of them but what if
your layout requires equal width items?

12
00:00:47,850 --> 00:00:50,500
Well, this is where
the flex-basis property

13
00:00:50,500 --> 00:00:54,430
can give you even more control
over the size of your flex items.

14
00:00:54,430 --> 00:00:59,810
The flex-basis property works, alongside the flex-grow property, to display equal,

15
00:00:59,810 --> 00:01:03,010
but flexible, widths for all flex items.

16
00:01:03,010 --> 00:01:06,810
So, you set the initial size
you want the flex items to be,

17
00:01:06,810 --> 00:01:11,570
then flexbox evenly distributes
the free space according to that size.

18
00:01:11,570 --> 00:01:16,160
flex-basis accepts the same values
as the width and height properties.

19
00:01:16,160 --> 00:01:19,260
So, pixels, ems, percentages,
and other units.

20
00:01:19,260 --> 00:01:24,770
Now, I wanna set the flex items'
initial size to 200 pixels.

21
00:01:24,770 --> 00:01:27,730
So in the item rule I'm going to add

22
00:01:27,730 --> 00:01:33,190
the flex-basis property and
set the value to 200px.

23
00:01:33,190 --> 00:01:37,660
So in other words the flex
items will display

24
00:01:37,660 --> 00:01:42,600
at an equal size,
when they're 200 pixels or wider.

25
00:01:42,600 --> 00:01:43,480
But if and

26
00:01:43,480 --> 00:01:48,630
when they're narrower than 200 pixels,
the browser will redistribute the space.

27
00:01:48,630 --> 00:01:49,706
So, let's take a look.

28
00:01:51,382 --> 00:01:56,320
Great, the space in the flex
container is evenly distributed.

29
00:01:56,320 --> 00:01:59,380
The flex items have flexible widths and

30
00:01:59,380 --> 00:02:04,020
notice what happens once the flex
container starts to get narrow.

31
00:02:04,020 --> 00:02:07,970
The items begin to break
onto multiple lines.

32
00:02:07,970 --> 00:02:12,500
So, at this point,
each flex item is 200 pixels wide.

33
00:02:12,500 --> 00:02:16,684
Once they're narrower,
than the flex-basis value of 200 pixels,

34
00:02:16,684 --> 00:02:20,876
the browser starts redistributing
the space inside the flex container.

35
00:02:24,018 --> 00:02:29,214
And if I go back and change the items'
flex-basis value to 100 pixels,

36
00:02:31,349 --> 00:02:35,906
The items are now equally sized
until they're narrower then

37
00:02:35,906 --> 00:02:38,950
the flex-basis value of 100 pixels.

38
00:02:43,218 --> 00:02:47,898
When setting both the flex-grow and
flex-basis value of a flex item,

39
00:02:47,898 --> 00:02:51,954
it's recommended that you use
the flex shorthand property,

40
00:02:51,954 --> 00:02:54,920
instead of the individual properties.

41
00:02:54,920 --> 00:02:58,951
Let me show you why [SOUND].

42
00:02:58,951 --> 00:03:03,361
Flex is the shorthand for
flex-grow, flex-basis, and

43
00:03:03,361 --> 00:03:06,884
a less commonly used flex-shrink property.

44
00:03:06,884 --> 00:03:11,040
The flex-shrink property does
the opposite of flex-grow.

45
00:03:11,040 --> 00:03:15,680
So instead of growing the item within
the available space it shrinks it.

46
00:03:15,680 --> 00:03:19,020
You can read more about flex-shrink
in the teacher's notes.

47
00:03:19,020 --> 00:03:23,780
The flex shorthand property intelligently
sets some of the values for

48
00:03:23,780 --> 00:03:26,350
you when you don't specify them.

49
00:03:26,350 --> 00:03:30,110
So for example,
I'm going to delete the flex-grow and

50
00:03:30,110 --> 00:03:34,990
flex-basis properties from the item
rule and set the flex value to one.

51
00:03:34,990 --> 00:03:42,580
Now, using only one number value sets
the flex-grow value of the items.

52
00:03:42,580 --> 00:03:45,150
So here, I'm setting flex-grow to one.

53
00:03:45,150 --> 00:03:49,800
Now, the second and
third values, for flex-shrink and

54
00:03:49,800 --> 00:03:53,820
flex-basis, are optional
in the flex shorthand.

55
00:03:53,820 --> 00:03:59,400
So, setting one number value still
makes the flex items flexible.

56
00:03:59,400 --> 00:04:02,720
The value one sets the flex-grow to one, and

57
00:04:02,720 --> 00:04:07,070
it automatically set the flex-basis value to zero.

58
00:04:07,070 --> 00:04:11,890
Which makes the items proportional within
the space the flex container, but the flex

59
00:04:11,890 --> 00:04:17,270
items do not redistribute the space inside
the flex container when it's narrowed.

60
00:04:17,270 --> 00:04:18,130
As you can see here.

61
00:04:18,130 --> 00:04:20,840
So, they don't break to new lines.

62
00:04:20,840 --> 00:04:25,260
Because a flex-basis of zero
means that the items can shrink

63
00:04:25,260 --> 00:04:27,620
all the way to a width of zero pixels.

64
00:04:28,720 --> 00:04:33,821
Now I still want their initial
size to be 200 pixels, so

65
00:04:33,821 --> 00:04:39,025
I'll go back to the flex property and
set the second value in

66
00:04:39,025 --> 00:04:44,878
the shorthand to 200 pixels this
is the flex-basis value [SOUND].

67
00:04:44,878 --> 00:04:48,388
So, my layout works exactly
like it did earlier,

68
00:04:48,388 --> 00:04:51,790
before I applied the flex shorthand.

69
00:04:51,790 --> 00:04:55,380
So, now if I only want to
grow the size of an item,

70
00:04:55,380 --> 00:04:59,570
I can use the flex-grow property
on that item so for instance,

71
00:04:59,570 --> 00:05:05,590
I'll go back to the style sheet and
target item two and

72
00:05:05,590 --> 00:05:09,800
set its flex-grow value to two.

73
00:05:09,800 --> 00:05:13,910
So item two now gets twice as much space.

74
00:05:14,950 --> 00:05:18,140
Now I'm not using the flex shorthand here

75
00:05:18,140 --> 00:05:22,940
because I only want to affect
item two's flex-grow factor.

76
00:05:22,940 --> 00:05:28,390
Using the flex shorthand will reset
item two's flex-basis back to zero,

77
00:05:28,390 --> 00:05:31,510
so, as you can see it doesn't grow at all.

78
00:05:33,280 --> 00:05:38,126
So, unless you explicitly want to give
a flex item a different flex-basis,

79
00:05:38,126 --> 00:05:42,155
you can simply use flex-grow to
expand any of the other items.

80
00:05:47,818 --> 00:05:52,659
Finally, if you're not setting
a flex-basis or flex-shrink value,

81
00:05:52,659 --> 00:05:57,010
you can still set a flex-grow
using the flex shorthand.

82
00:05:57,010 --> 00:06:03,060
So, in the item rule, I'm going to delete
the flex base's value of 200 pixels,

83
00:06:03,060 --> 00:06:07,860
and then in item two,
I'm going to replace the flex-growth

84
00:06:07,860 --> 00:06:13,050
declaration with the flex shorthand and
I'll set the value to two.

85
00:06:13,050 --> 00:06:18,360
Back in the browser, item two still gets
twice as much space as the other flex

86
00:06:18,360 --> 00:06:25,460
items but remember, the flex shorthand
sets the flex-basis value to zero.

87
00:06:25,460 --> 00:06:29,980
So the flex items do not redistribute
the space inside the flex container

88
00:06:29,980 --> 00:06:31,740
by breaking to a new line.

89
00:06:33,110 --> 00:06:37,980
Coming up in the next videos, you'll learn
how to align flex items on the cross axis,

90
00:06:37,980 --> 00:06:42,000
and how to achieve perfect horizontal and
vertical centering with flex box.