WEBVTT

1
00:00:00.500 --> 00:00:02.350
- [Instructor] You can
control how content fits

2
00:00:02.350 --> 00:00:08.030
in a Flexbox layout using some
of these additional classes.

3
00:00:08.030 --> 00:00:09.070
There's a set of utilities

4
00:00:09.070 --> 00:00:13.000
for aligning individual
items inside Flex containers,

5
00:00:13.000 --> 00:00:15.440
so this will let you
control their alignment

6
00:00:15.440 --> 00:00:18.580
separate from anything
else that is going on.

7
00:00:18.580 --> 00:00:21.370
You have the usual break points here,

8
00:00:21.370 --> 00:00:24.420
and you have the same styles

9
00:00:24.420 --> 00:00:27.210
or the same keywords that you saw before,

10
00:00:27.210 --> 00:00:31.250
start, end, center, baseline and stretch.

11
00:00:31.250 --> 00:00:34.010
And again, I think I
could talk about these,

12
00:00:34.010 --> 00:00:36.760
but it's better if we can
see what they're doing.

13
00:00:36.760 --> 00:00:38.920
So Align and Self.

14
00:00:38.920 --> 00:00:43.870
So notice here, what I'm
doing is I'm using align-self

15
00:00:43.870 --> 00:00:47.920
on these items that are white,

16
00:00:47.920 --> 00:00:50.280
sort of these two items
here, Bubbles and Fred

17
00:00:50.280 --> 00:00:53.990
are the ones that have
this individual alignment.

18
00:00:53.990 --> 00:00:59.090
So aligning self-start, we'll
just align them to the top.

19
00:00:59.090 --> 00:01:01.460
So normally, these items would fit

20
00:01:01.460 --> 00:01:02.730
the height of the container,

21
00:01:02.730 --> 00:01:07.320
but by saying align-self-start,

22
00:01:07.320 --> 00:01:10.170
you align them to the top
and these are responsive,

23
00:01:10.170 --> 00:01:11.300
so at the medium break point,

24
00:01:11.300 --> 00:01:13.430
they will just do whatever
the other ones are doing

25
00:01:13.430 --> 00:01:15.410
in all these examples.

26
00:01:15.410 --> 00:01:20.820
And then in the second one,
I'm saying align to the end.

27
00:01:20.820 --> 00:01:22.520
The next one is align to the center,

28
00:01:22.520 --> 00:01:24.600
just those two individual items,

29
00:01:24.600 --> 00:01:28.420
and then the next one I'm
aligning to the baseline.

30
00:01:28.420 --> 00:01:31.130
So these two items will share a baseline

31
00:01:31.130 --> 00:01:34.350
and aligned to that, at
the medium break point.

32
00:01:34.350 --> 00:01:37.070
And then align-self-stretch
will just make them behave

33
00:01:37.070 --> 00:01:39.780
like they normally would behave anyways.

34
00:01:39.780 --> 00:01:43.540
But it's sort of like a reset
because it is the default.

35
00:01:43.540 --> 00:01:44.450
You also have the ability

36
00:01:44.450 --> 00:01:49.030
to fill the available
horizontal space if possible.

37
00:01:49.030 --> 00:01:53.120
So if there are more than
one elements with Flex Fill,

38
00:01:53.120 --> 00:01:55.970
then they'll share all
of the available space.

39
00:01:55.970 --> 00:01:59.290
Of course there are break
points, and of course,

40
00:01:59.290 --> 00:02:03.400
you should definitely spend
some time trying these out.

41
00:02:03.400 --> 00:02:09.300
So here, what we have is
the flex-fill property,

42
00:02:09.300 --> 00:02:11.860
and I'm using it just on
this element right here,

43
00:02:11.860 --> 00:02:14.710
so if I take this off,
they'll just take up

44
00:02:14.710 --> 00:02:18.140
whatever space they would normally take.

45
00:02:18.140 --> 00:02:21.070
Wherever I apply that flex-fill,

46
00:02:21.070 --> 00:02:22.750
it would just have that element

47
00:02:22.750 --> 00:02:24.490
take up that amount of space.

48
00:02:24.490 --> 00:02:26.380
And of course, these
are responsive seconds,

49
00:02:26.380 --> 00:02:28.360
say like flex-md-fill,

50
00:02:28.360 --> 00:02:31.950
and this would only happen
at the medium break point,

51
00:02:31.950 --> 00:02:34.320
but I'll just keep this as flex-fill

52
00:02:34.320 --> 00:02:37.110
and you can use any of the break points,

53
00:02:37.110 --> 00:02:41.920
and also you can try adding
them to multiple elements.

54
00:02:41.920 --> 00:02:45.510
So if I add this flex-fill
to this other element,

55
00:02:45.510 --> 00:02:48.530
then you'll see that these two

56
00:02:48.530 --> 00:02:51.290
will share as much space as possible

57
00:02:51.290 --> 00:02:53.100
and then this one will remain

58
00:02:53.100 --> 00:02:56.520
whatever size it would normally
be, so these are going to try

59
00:02:56.520 --> 00:02:59.790
to take up all the space, so that's cool.

60
00:02:59.790 --> 00:03:03.300
So Flex Grow/Shrink is
similar to Flex Fill,

61
00:03:03.300 --> 00:03:07.060
but with the ability to
toggle things on or off

62
00:03:07.060 --> 00:03:08.820
through some classes.

63
00:03:08.820 --> 00:03:12.250
So you can specify that
an item try to grow

64
00:03:12.250 --> 00:03:15.880
to fill the available
space with grow or shrink.

65
00:03:15.880 --> 00:03:17.780
Of course there are break points,

66
00:03:17.780 --> 00:03:20.530
and there are two classes
that will allow you

67
00:03:20.530 --> 00:03:24.500
to either turn this ability on or off.

68
00:03:24.500 --> 00:03:28.740
So you can specify the flex,
and then a break point,

69
00:03:28.740 --> 00:03:30.710
and then either grow or shrink,

70
00:03:30.710 --> 00:03:33.790
whether you want the item
to try to grow or shrink,

71
00:03:33.790 --> 00:03:37.850
and then you can specify
a flex-grow of one,

72
00:03:37.850 --> 00:03:40.010
which would work just like flex-fill.

73
00:03:40.010 --> 00:03:43.200
And why am I explaining so
much? Let's go to the examples,

74
00:03:43.200 --> 00:03:47.680
because honestly, I think
picture's worth a thousand words,

75
00:03:47.680 --> 00:03:49.140
and a video is worth even more.

76
00:03:49.140 --> 00:03:52.400
So let's take a look at
what's happening here.

77
00:03:52.400 --> 00:03:55.000
So here I am adding a flex

78
00:03:55.000 --> 00:03:56.520
at the medium break point of course,

79
00:03:56.520 --> 00:03:59.930
although to see what happens
when I don't do that,

80
00:03:59.930 --> 00:04:03.270
we just go to a smaller break points.

81
00:04:03.270 --> 00:04:07.090
So this is going to try
to make this element grow

82
00:04:07.090 --> 00:04:08.410
to fit the available space.

83
00:04:08.410 --> 00:04:11.100
So here, this is sort
of doing the same thing

84
00:04:11.100 --> 00:04:13.690
as the regular flex-fill.

85
00:04:13.690 --> 00:04:16.610
You're just saying, I
want that element to grow,

86
00:04:16.610 --> 00:04:20.140
and if I change this to zero,

87
00:04:20.140 --> 00:04:22.070
you would see that that is a toggle.

88
00:04:22.070 --> 00:04:24.640
So this is maybe something useful

89
00:04:24.640 --> 00:04:27.870
for some component base architectures

90
00:04:27.870 --> 00:04:31.380
like React, or Vue, or Svelte,

91
00:04:31.380 --> 00:04:35.310
where you can dynamically turn
this functionality on or off

92
00:04:35.310 --> 00:04:38.270
by setting this to one or zero,

93
00:04:38.270 --> 00:04:40.890
so that Boolean is what
allows you to do that.

94
00:04:40.890 --> 00:04:43.780
So here I'm saying, I want
this item to try to grow,

95
00:04:43.780 --> 00:04:45.820
and what I'm doing on these other ones

96
00:04:45.820 --> 00:04:48.680
is I'm saying that I
want some of these items

97
00:04:48.680 --> 00:04:49.610
to try to shrink.

98
00:04:49.610 --> 00:04:52.050
So here I said, both of these other ones,

99
00:04:52.050 --> 00:04:54.730
the outside ones, the flex-grow.

100
00:04:54.730 --> 00:04:59.090
And then the middle one I
set to try to shrink, right?

101
00:04:59.090 --> 00:05:03.320
So again, the one or zero would
turn this thing on or off,

102
00:05:03.320 --> 00:05:06.430
and the grow or shrink would determine

103
00:05:06.430 --> 00:05:08.700
whether or not it tries to shrink an item

104
00:05:08.700 --> 00:05:10.380
or it tries to grow an item.

105
00:05:10.380 --> 00:05:12.810
When you are shrinking items,

106
00:05:12.810 --> 00:05:14.650
something else should be trying to grow

107
00:05:14.650 --> 00:05:17.223
or otherwise you really
wouldn't see that much.