1
00:00:04,070 --> 00:00:08,870
Hello everyone and welcome back to our bootstrap course and this lecture we're going to be looking at

2
00:00:08,870 --> 00:00:15,770
more values that we can said using the Flex box bootstrap class.

3
00:00:15,770 --> 00:00:22,070
Now there are many different values and properties that you can set using flex not just flex row and

4
00:00:22,070 --> 00:00:28,700
not just align items justify content et cetera but there are many that you can use.

5
00:00:28,730 --> 00:00:30,440
So we're gonna be looking at just a few.

6
00:00:30,440 --> 00:00:37,190
In this lecture and I definitely challenge and encourage you to look up more as you need them you will

7
00:00:37,190 --> 00:00:40,540
find the best ones that you need for your specific project.

8
00:00:41,300 --> 00:00:46,310
But it's good to have a general overview of how they're used in general so that way you can be able

9
00:00:46,310 --> 00:00:48,610
to use whichever ones you want as you need them.

10
00:00:48,620 --> 00:00:52,220
So let's go ahead and start with an example I've just deleted all the code from the previous lecture

11
00:00:53,000 --> 00:00:57,780
because it was an example and you can find it all in the source code as well.

12
00:00:57,800 --> 00:00:58,040
OK.

13
00:00:58,070 --> 00:01:04,490
We're going to start off a building a class and it's going to be display flex and we'll go ahead and

14
00:01:04,490 --> 00:01:06,950
close off this div as well.

15
00:01:07,010 --> 00:01:14,720
Let's go ahead and give it a background color and give it a background of secondary and in here we're

16
00:01:14,720 --> 00:01:16,520
going to put in items.

17
00:01:16,670 --> 00:01:23,660
So I'm going to put in first one item we can call it item 1.

18
00:01:24,000 --> 00:01:32,570
And as you can see it will immediately take up all of the text and all of the space of the div rather

19
00:01:32,950 --> 00:01:35,120
I'm going to give it some padding.

20
00:01:35,120 --> 00:01:43,460
So this way it is more from the edge here and as well I'm going to give it a color so we can see how

21
00:01:43,460 --> 00:01:44,420
much with it has.

22
00:01:44,420 --> 00:01:48,050
So we do it background primary and there we go.

23
00:01:48,140 --> 00:01:49,220
The background is great.

24
00:01:49,280 --> 00:01:54,410
And the first item will take up just the default pixel size for each item.

25
00:01:55,310 --> 00:02:02,510
Let's go ahead and copy this to make a few more just like this and three item two we're gonna give this

26
00:02:02,630 --> 00:02:04,760
background color dark.

27
00:02:04,880 --> 00:02:05,140
Okay.

28
00:02:05,150 --> 00:02:09,730
So now we have a few items and we can also give them the text white property.

29
00:02:09,740 --> 00:02:15,380
Notice how when we use set the text white on the entire containing div it changes the text color of

30
00:02:15,380 --> 00:02:20,140
all the items inside as well so that you don't have to do them all individually.

31
00:02:20,140 --> 00:02:20,380
Okay.

32
00:02:20,390 --> 00:02:22,220
So now we have these items.

33
00:02:22,220 --> 00:02:28,130
Let's go ahead and look at some more values that we can put onto them what we can do is put on what

34
00:02:28,130 --> 00:02:30,670
is known as growing and shrinking.

35
00:02:30,860 --> 00:02:32,390
Let's go ahead and test this out.

36
00:02:32,400 --> 00:02:36,610
So we're going to give the grow property on to item one here.

37
00:02:36,620 --> 00:02:40,290
Now this is another bootstrap class called flex grow one.

38
00:02:40,390 --> 00:02:43,900
There's also flex grow 0 which is the default.

39
00:02:43,910 --> 00:02:45,770
And then there's flex grow one.

40
00:02:45,850 --> 00:02:53,750
So you'll notice as soon as I put flex grow one on to item one there is no more grey color here because

41
00:02:53,750 --> 00:02:59,420
the items now take up all the space but you'll notice that item 1 is slightly bigger than Item 2 and

42
00:02:59,420 --> 00:03:00,480
item 3.

43
00:03:00,500 --> 00:03:01,580
So what is happening here.

44
00:03:01,610 --> 00:03:08,210
Well by putting flex grow one it means that this item will take up all of the possible space of the

45
00:03:08,210 --> 00:03:13,440
div except for however much item two an item three need.

46
00:03:13,440 --> 00:03:18,680
So item two an item three will take up their minimum required space and item one will take up the rest

47
00:03:18,680 --> 00:03:25,370
of the space if we did not have flex grow one if we had flex grow zero then this would be the default

48
00:03:25,430 --> 00:03:29,390
which is that they all take up an even amount of space and there's even this little bit of space left

49
00:03:29,390 --> 00:03:29,810
over.

50
00:03:30,950 --> 00:03:31,400
Okay great.

51
00:03:31,400 --> 00:03:36,770
So if you put flex grow one that is what it looks like on item one and you can see as I stretched out

52
00:03:36,770 --> 00:03:43,850
the screen item to an item three do not change in size but item one grows as the name goes.

53
00:03:43,850 --> 00:03:51,560
It grows to become bigger as the div size gets bigger the div is still its entire width here and item

54
00:03:51,560 --> 00:03:53,170
one takes up as much as it can.

55
00:03:53,420 --> 00:03:56,030
Similarly to grow there is also shrink.

56
00:03:56,060 --> 00:04:02,800
So if we put shrink on to the item one instead of grow I can see they are the same size.

57
00:04:02,810 --> 00:04:10,820
However if they are needed to be more space for the other values then the item one would shrink to allow

58
00:04:10,820 --> 00:04:11,870
space for the other ones.

59
00:04:11,870 --> 00:04:16,670
So what we want to do is set the width of the other two to be a bit bigger.

60
00:04:16,910 --> 00:04:20,420
And this should force the other one to shrink.

61
00:04:20,420 --> 00:04:20,710
Yes.

62
00:04:20,720 --> 00:04:21,550
There you go.

63
00:04:21,590 --> 00:04:27,460
Now you can see the div size is still the same it's a hundred percent of the width.

64
00:04:27,470 --> 00:04:34,010
Minus this padding on the side but item to an item three are bigger than item one because we hard set

65
00:04:34,010 --> 00:04:36,420
their widths to 100 using Bootstrap here.

66
00:04:36,530 --> 00:04:39,710
This is the bootstrap class with 100 which lets you set the width.

67
00:04:40,190 --> 00:04:45,580
Similarly you can do each 100 to set the height and because these need 100 pixels.

68
00:04:45,590 --> 00:04:55,850
Now as you can see item one will shrink to make space for the other two items okay or 100 percent here.

69
00:04:55,910 --> 00:04:56,420
Okay great.

70
00:04:56,420 --> 00:05:03,400
So now you know about growing and shrinking and these two are valuable because you may not content to

71
00:05:03,400 --> 00:05:08,260
grow and shrink for responsiblity on a smaller screen vs. the larger screen.

72
00:05:08,260 --> 00:05:15,480
You may want to keep one item small while the other two should grow or shrink depending on the requirements.

73
00:05:15,580 --> 00:05:17,290
The other value went to look at.

74
00:05:17,290 --> 00:05:19,850
In this lecture is going to be Phil.

75
00:05:19,990 --> 00:05:27,110
Phil is similar to grow and shrink in that it will set the size of content responsibly.

76
00:05:27,280 --> 00:05:35,220
So rather than hard setting the size of item one we set it to be dependent on the width of other content.

77
00:05:35,230 --> 00:05:37,690
Let's look at how we can use flex.

78
00:05:37,960 --> 00:05:45,900
Phil something got to do is remove the Flex shrink value for simplicity's sake and so we can understand

79
00:05:45,900 --> 00:05:48,800
and wants to go into a movie with 100 value.

80
00:05:48,850 --> 00:05:51,460
So we don't confuse any of the classes.

81
00:05:51,460 --> 00:05:55,930
So now we're just back to our basic flex div.

82
00:05:55,930 --> 00:06:01,960
And notice I didn't even make it a flex row but these are automatically put in two rows as the default

83
00:06:01,960 --> 00:06:05,540
for the Flex box property.

84
00:06:05,560 --> 00:06:05,790
Okay.

85
00:06:05,830 --> 00:06:10,190
So I have my three items here and now go to add flex filled to them.

86
00:06:10,390 --> 00:06:12,760
So I'm going to put flex fill just like that.

87
00:06:12,790 --> 00:06:17,570
Now you'll notice item 1 is filling up the remaining content loops.

88
00:06:17,770 --> 00:06:25,330
So this is similar to flex grow because it is growing but it is growing specifically to fill the rest

89
00:06:25,330 --> 00:06:28,180
of the content rather than in comparison to the other ones.

90
00:06:28,240 --> 00:06:30,850
Let's put flex Phil onto item 2 as well.

91
00:06:31,240 --> 00:06:37,090
And now you'll see these two will grow and item three you can put flex fill.

92
00:06:37,570 --> 00:06:39,860
And now all three will grow.

93
00:06:40,180 --> 00:06:48,770
Whereas if we put something like flex row one and flex grow one and flex grow one on two all three.

94
00:06:49,060 --> 00:06:50,990
They would also grow as well.

95
00:06:50,990 --> 00:06:55,790
And if we removed flex grow one from the third item the two will grow.

96
00:06:55,840 --> 00:06:59,560
Then item three would stay the same size.

97
00:06:59,560 --> 00:07:07,990
So as you can see that is similar to having the Flex grow property as well but this will force their

98
00:07:07,990 --> 00:07:14,650
width to be equal to their content while taking up all the available horizontal space.

99
00:07:14,650 --> 00:07:19,970
So now you know about flex grow and flex shrink as well as flex fill.

100
00:07:20,080 --> 00:07:25,860
And these are all different ways of sizing your values using flex box.

101
00:07:25,870 --> 00:07:33,460
Thank you all for watching and I challenge you to try to play around with different divs not only rows

102
00:07:33,490 --> 00:07:39,160
but also columns so you can make a flex column and then see how the growing and shrinking would affect

103
00:07:39,190 --> 00:07:40,320
that.

104
00:07:40,330 --> 00:07:44,450
Remember when you're working with columns you'll then have to set the height of the column.

105
00:07:44,530 --> 00:07:49,110
Otherwise the items will take up 100 percent of the height of the column.

106
00:07:49,140 --> 00:07:53,120
And so you won't see any differences because the items are this tall.

107
00:07:53,140 --> 00:07:55,430
So they have nowhere to move inside.

108
00:07:55,960 --> 00:07:56,600
Okay.

109
00:07:56,680 --> 00:07:59,200
Thank you all for watching.

110
00:07:59,200 --> 00:08:00,690
Thank you for making it this far.

111
00:08:00,790 --> 00:08:02,410
And we will see you in the next lecture.