1
00:00:00,640 --> 00:00:06,310
OK, so let's learn about how to display Flex and the Flex Direction, not displaying something as Flex

2
00:00:06,310 --> 00:00:13,840
defines the flex container in line or block, depending on the given value, it enables flex context

3
00:00:14,170 --> 00:00:15,910
for its direct children.

4
00:00:17,310 --> 00:00:19,070
So let's try this out.

5
00:00:21,700 --> 00:00:27,330
Now, we left off with our basic styling here and also Tapan here, comment of this place.

6
00:00:27,340 --> 00:00:36,370
So let's type in display flex for both the children container and also the pound container.

7
00:00:43,240 --> 00:00:50,590
Nothing to save and a couple of things, you notice that the items just changed its size and also their

8
00:00:50,590 --> 00:00:51,310
direction.

9
00:00:52,440 --> 00:00:59,610
Before we had this done, let me also comment about the display flags at the parent level.

10
00:01:01,870 --> 00:01:09,290
Does it save you could see these items are in a column, but as soon as displayed them as flex or display

11
00:01:09,400 --> 00:01:15,730
of the container as flex, now the items are aligned in a row with one, two, three, four, five and

12
00:01:15,730 --> 00:01:16,180
six.

13
00:01:19,110 --> 00:01:27,540
So what I want to say here is that actually and I'm going to remain within our power container and here

14
00:01:27,570 --> 00:01:29,250
we're just going to type in a comment.

15
00:01:33,120 --> 00:01:35,750
Flex direction,

16
00:01:40,970 --> 00:01:46,610
and now we're going to start with the properties of the parent and the first property of the pound will

17
00:01:46,610 --> 00:01:49,760
be the direction of the Fleck's, not by default.

18
00:01:50,540 --> 00:01:52,410
Fleck's direction is in a row.

19
00:01:52,670 --> 00:02:07,280
So if I were typing Flex Direction and choose RO, nothing will change because I said by default, flex

20
00:02:07,280 --> 00:02:10,780
plexus in a real direction, but be flexed in a row.

21
00:02:11,060 --> 00:02:20,030
We have a second we have a second command reflects the action called reverse and this is just reverse

22
00:02:20,030 --> 00:02:25,730
the direction of the flex so that you can see the items are now from six to one.

23
00:02:26,210 --> 00:02:29,210
But it actually didn't change the items placement.

24
00:02:29,210 --> 00:02:35,060
Only the direction in which the items are flexing should make this a bit smaller.

25
00:02:35,060 --> 00:02:41,750
Just the things smaller now opposite the row items can also flex in the direction of a column.

26
00:02:42,800 --> 00:02:50,180
And if I had say you can see all the items are now flexing in a common direction and the same thing

27
00:02:50,180 --> 00:02:52,940
goes for column reverse.

28
00:02:54,080 --> 00:02:56,540
You just changed the direction of the flex.

29
00:02:56,970 --> 00:02:59,840
Okay, so that's pretty much it for Flex Direction.