Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,630 --> 00:00:07,380
Let's keep scrolling down here and they give us a really nice interactive demo here where you can see
2
00:00:07,380 --> 00:00:14,460
the different properties coming from flex box that we can use to arrange and configure the layout of
3
00:00:14,460 --> 00:00:15,560
our grid.
4
00:00:15,570 --> 00:00:24,570
So here you can see that these are a grid with the container prop a direction of row a justified prop
5
00:00:24,660 --> 00:00:27,130
and then a line items prop.
6
00:00:27,330 --> 00:00:34,940
So we'll start with that direction prop so a direction of row means that they are laid out horizontally.
7
00:00:34,950 --> 00:00:38,780
So one two and three in a row.
8
00:00:38,850 --> 00:00:40,450
So left to right.
9
00:00:40,590 --> 00:00:43,590
And that is actually the default direction.
10
00:00:43,590 --> 00:00:51,880
If you do not set one you can also set row reverse which as you can see puts the items in the reverse
11
00:00:51,910 --> 00:00:54,810
order while still being laid out horizontally.
12
00:00:54,820 --> 00:01:04,610
But this time right to left so the opposite of row direction then is the column direction here.
13
00:01:04,610 --> 00:01:11,600
Now you see that the grid items within our grid container are being laid out vertically from top to
14
00:01:11,600 --> 00:01:20,420
bottom and we also have a column reverse which again flips are grid items now being displayed from bottom
15
00:01:20,420 --> 00:01:21,980
to top.
16
00:01:22,070 --> 00:01:28,880
We'll use the direction often and by nesting it and then changing different containers to have different
17
00:01:28,880 --> 00:01:29,820
directions.
18
00:01:29,930 --> 00:01:33,570
You're able to really create just about any kind of layout.
19
00:01:33,620 --> 00:01:40,100
And I think that as we continue to build more of our content and see how this works you'll really get
20
00:01:40,130 --> 00:01:47,240
a second nature of understanding how different layouts will map to different grids with the different
21
00:01:47,240 --> 00:01:54,130
directions we need to be able to change more than just the direction though because our grid system
22
00:01:54,130 --> 00:02:00,700
needs to be able to control content anywhere on the page so to move it around once we have it going
23
00:02:00,700 --> 00:02:01,840
the right direction.
24
00:02:01,960 --> 00:02:08,480
That is where we will use our justify and a line items properties to justify.
25
00:02:08,480 --> 00:02:15,140
Property is going to align our items across the main axis of the grid.
26
00:02:15,380 --> 00:02:17,560
So to explain the main axis.
27
00:02:17,570 --> 00:02:20,360
Let's go back to our direction of row.
28
00:02:20,390 --> 00:02:26,660
And here I said the it's displayed horizontally from left to right.
29
00:02:26,720 --> 00:02:33,210
And so the main axis for our direction of row is horizontal.
30
00:02:33,260 --> 00:02:41,560
And then what's called the cross axis would be the up and down the vertical direction so since we are
31
00:02:41,560 --> 00:02:49,020
in a direction of row and our main axis is going to be the horizontal direction that means are justified
32
00:02:49,030 --> 00:02:54,820
property is going through our line our items across horizontal space.
33
00:02:54,850 --> 00:03:02,410
So if we cook the Flex start that should move all of our items over to the left side of the page and
34
00:03:02,410 --> 00:03:09,550
you can see that that indeed happens to get our items all the way to the end on the right side of the
35
00:03:09,550 --> 00:03:10,170
page.
36
00:03:10,210 --> 00:03:18,190
We can use the Flex end property and if we want to evenly distribute the space between all of our different
37
00:03:18,190 --> 00:03:25,360
items you can see the space between option and this space around is similar but instead of putting all
38
00:03:25,360 --> 00:03:32,040
of the space in between our items it's also going to add space around on the sides of all of them.
39
00:03:32,050 --> 00:03:39,040
So now you can see that those first and third grid items are moved in because now there's space around
40
00:03:39,040 --> 00:03:44,530
them but you can see that there's more space on the inside of these items here than there are on the
41
00:03:44,530 --> 00:03:45,450
outside.
42
00:03:45,490 --> 00:03:52,240
And if you want to evenly distribute that across all of the area you can select space evenly and now
43
00:03:52,240 --> 00:03:56,020
you can see a much more consistent spacing.
44
00:03:56,040 --> 00:04:04,530
Let's go back to center though and now let's change our direction to column so now like I said since
45
00:04:04,530 --> 00:04:14,000
the justify property controls the main axis the main axis for our column direction is up and down is
46
00:04:14,010 --> 00:04:22,220
the vertical direction so now if we choose the flex a start that should push our items to the beginning
47
00:04:22,220 --> 00:04:25,130
of the vertical direction which should be at the top.
48
00:04:25,130 --> 00:04:28,820
So if we select like this you can see it moved up a little bit there.
49
00:04:28,820 --> 00:04:32,980
It's a little hard to see because there's not a ton of vertical spacing here.
50
00:04:33,110 --> 00:04:39,680
But if we select the Flex and you can see that now move all the way to the bottom and space between
51
00:04:39,890 --> 00:04:45,480
distributes more spacing between our elements a space around does the same thing.
52
00:04:45,650 --> 00:04:49,240
And the space evenly distributed as well.
53
00:04:49,250 --> 00:04:55,550
I think that it's not completely adding the space down here because of the way that they have the items
54
00:04:55,700 --> 00:05:02,510
being displayed but that's just for their example and you can see that it's still altering the spacing
55
00:05:02,540 --> 00:05:06,280
for our main axis which is the vertical direction.
56
00:05:06,290 --> 00:05:13,450
In this case let's go ahead and change our direction back to row and our justify back to center.
57
00:05:13,470 --> 00:05:20,350
And now let's take a look at the line items property which distributes our items along the cross axis.
58
00:05:20,370 --> 00:05:23,400
So the opposite direction of our main axis.
59
00:05:23,400 --> 00:05:28,060
So for a row our main axis is the horizontal direction.
60
00:05:28,140 --> 00:05:33,480
And so our cross axis would be the vertical up and down direction.
61
00:05:33,480 --> 00:05:40,230
So our own line items if we selected flex start should push all of the items to the beginning of the
62
00:05:40,260 --> 00:05:43,380
Cross axis which would be the vertical direction.
63
00:05:43,380 --> 00:05:45,970
So that should push everything up to the top.
64
00:05:46,020 --> 00:05:52,800
And if we select our Flex start for line items you can see that that indeed happens and we can also
65
00:05:52,800 --> 00:05:55,960
push everything to the bottom of our cross axis.
66
00:05:55,980 --> 00:06:02,790
So at the bottom of the vertical direction with Flex end and we can also stretch those out to fill up
67
00:06:02,790 --> 00:06:11,160
the entire available space to us as well the baseline property aligns all of the text within your items
68
00:06:11,160 --> 00:06:13,470
to a common baseline.
69
00:06:13,480 --> 00:06:21,930
But let's go ahead and set our line items back to center and let's check it out now on column so with
70
00:06:21,930 --> 00:06:29,620
a direction of column our main axis is now the vertical direction which means our cross axis is now
71
00:06:29,660 --> 00:06:32,000
the horizontal direction.
72
00:06:32,010 --> 00:06:40,170
So now if we change are a line items properties if we select the Flex start value it should move all
73
00:06:40,170 --> 00:06:48,090
of our items to the beginning of the Cross axis which we just said is the horizontal direction.
74
00:06:48,180 --> 00:06:55,150
And so setting the Flex start for our line items should push all of the items over to the left.
75
00:06:55,170 --> 00:06:59,010
So if we select flex start we can see that indeed happens.
76
00:06:59,010 --> 00:07:06,480
And again the Flex end will move all of our items to the end of the Cross axis which in a direction
77
00:07:06,480 --> 00:07:10,230
of column is our horizontal direction.
78
00:07:10,230 --> 00:07:16,710
So you do have to kind of remember that the justify and the line items properties they aren't always
79
00:07:16,770 --> 00:07:23,730
setting one direction or another they're distributing your items along a certain axis and that axis
80
00:07:23,730 --> 00:07:31,560
depends on your grid direction definitely spend some time playing around with this demo and I feel like
81
00:07:31,560 --> 00:07:38,010
you'll really get a good idea of how this is working and how we can use these properties to consistently
82
00:07:38,020 --> 00:07:43,620
layout our content but as we get some practice with that in our application I think it's really going
83
00:07:43,620 --> 00:07:50,970
to become clear to you guys we can keep scrolling down and here it actually shows how you can set a
84
00:07:50,970 --> 00:08:00,090
value of auto to your breakpoints so these grid items instead of setting an explicit value they're simply
85
00:08:00,090 --> 00:08:07,480
setting a value of auto which will make all of the items equally share the available space.
86
00:08:07,620 --> 00:08:14,850
They also gave an example in this bottom row how you can then set one of the items explicitly and the
87
00:08:14,850 --> 00:08:22,850
other items which are set to auto will then resize around that you can see the code for this they are
88
00:08:22,850 --> 00:08:30,500
simply just specifying the breakpoint property that control the smallest they want the grid item to
89
00:08:30,500 --> 00:08:39,090
be which then automatically creates the consistent layouts using the auto property is a good place to
90
00:08:39,090 --> 00:08:45,420
get started and see how your content is resizing where you can then go and set different values for
91
00:08:45,420 --> 00:08:52,760
all your different breakpoints they give us an example here of how you can use the grid to create very
92
00:08:52,760 --> 00:09:00,990
complex layouts that feel very consistent and aligned all very easily using the grid component.
93
00:09:01,000 --> 00:09:08,440
You can also combine the container and the item properties which you can see here where they add both
94
00:09:08,470 --> 00:09:13,150
the down here both of the container and the item properties.
95
00:09:13,180 --> 00:09:21,700
Since this grid item is not only an item of the main container but is also a container with a another
96
00:09:21,790 --> 00:09:28,250
component inside of it which in this case is coming up here from their other set of grids.
97
00:09:28,420 --> 00:09:35,080
This is similar to what we will be using for our footer links and how we will be arranging those.
98
00:09:35,080 --> 00:09:42,010
So we're actually going to go and take another look at our footer and how it's going to relate to this
99
00:09:42,010 --> 00:09:43,240
grid system.
100
00:09:43,240 --> 00:09:49,150
Before we go and actually try to implement because I know that this might still seem pretty abstract
101
00:09:49,150 --> 00:09:54,850
right now but I promise once we get in and actually start building with it it will become a lot clearer
102
00:09:55,060 --> 00:10:01,130
how this is all going to work together to create any kind of layout.
103
00:10:01,170 --> 00:10:01,490
All right.
104
00:10:01,520 --> 00:10:10,610
So let's come over and here you see the copy of our footer but I've added a couple of extra things so
105
00:10:10,610 --> 00:10:19,100
you can see the the footer links are covered with an opaque box and that box is representing the outermost
106
00:10:19,160 --> 00:10:27,770
grid container the arrow below the box represents the grid direction which in this case is going to
107
00:10:27,770 --> 00:10:28,870
be row.
108
00:10:28,880 --> 00:10:37,250
So that is the horizontal direction we can see starting with the home and then these services column
109
00:10:37,310 --> 00:10:44,060
the revolution column the about us column and then contact us column that all of these are progressing
110
00:10:44,060 --> 00:10:45,800
from left to right.
111
00:10:45,860 --> 00:10:54,320
And that is why our outer container will have a direction of row which is the default so we'll start
112
00:10:54,320 --> 00:11:01,100
out with that one big wrapping container and then inside of that container you can see now on this page
113
00:11:01,370 --> 00:11:09,540
that each of the columns is going to be a container as well these containers however are moving from
114
00:11:09,540 --> 00:11:17,290
the top to bottom and so they are going to have a direction of column so you can see for example on
115
00:11:17,290 --> 00:11:23,530
the services section that we're starting at the top with services custom software development IOW an
116
00:11:23,560 --> 00:11:28,390
Android app development and website development moving from the top down.
117
00:11:28,420 --> 00:11:37,430
So that is a column layout then inside of our columns we're left with each of the individual grid items
118
00:11:37,460 --> 00:11:40,150
and that will be our individual links.
119
00:11:40,220 --> 00:11:46,580
And so those will be just holding the text and then we'll make those react router links but all of those
120
00:11:46,610 --> 00:11:55,190
individual grid items are wrapped then by each of the column containers which are then all wrapped by
121
00:11:55,190 --> 00:11:58,610
our one main row container.
122
00:11:58,670 --> 00:12:05,030
So I hope that this makes a little more sense of how we're going to use those two different grid components
123
00:12:05,060 --> 00:12:13,250
the container and the items to create a nested structure which controls the overall display of each
124
00:12:13,310 --> 00:12:15,590
individual item.
125
00:12:15,590 --> 00:12:22,190
So like I said it will start to make a lot more sense once we actually just start building it and seeing
126
00:12:22,190 --> 00:12:25,830
the code and how it all starts to work together on the screen.
127
00:12:25,910 --> 00:12:31,550
So let's just go ahead and start jumping into working on this in the next video.
14939
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.