WEBVTT 00:01.060 --> 00:03.730 Okay, let's talk about Flex now. 00:03.760 --> 00:05.170 What is a flex? 00:05.170 --> 00:08.260 And you can see it is already here. 00:08.260 --> 00:14.440 And the flex is the normal way to create a layout in React Native. 00:14.440 --> 00:18.970 And this is very the same as we have in our CSS. 00:19.090 --> 00:25.600 So if you are already familiar with CSS flex box, then you are good to go. 00:25.630 --> 00:28.720 You don't need to do anything else here. 00:28.720 --> 00:33.580 So basically the syntax and the layout will work in the same way. 00:33.580 --> 00:37.060 But in this video I will show you how we can actually use it. 00:37.060 --> 00:42.700 If you are not familiar with that, then we can, uh, have a, uh, some exercises here. 00:42.700 --> 00:44.800 So what is a flex? 00:44.800 --> 00:49.120 Flex is a way how we can organize some content on our screen. 00:49.120 --> 00:55.510 So basically giving the flex of one, that means we are telling to our application that we would like 00:55.510 --> 00:59.860 to have the this container will take the full, full size of the screen. 00:59.920 --> 01:06.410 So basically flex one, the bigger number you will have it, the more important it will be for the siblings. 01:06.410 --> 01:12.890 So, for example, if I have a home that is flex one and then I can have another element that is next 01:12.890 --> 01:13.490 to it. 01:13.490 --> 01:20.240 So at the moment we don't have that situation here, but I have one home here and then we have two tags. 01:20.240 --> 01:26.630 So what I could do is I can arrange this children for like this. 01:26.630 --> 01:29.060 This home is assigned to The View. 01:29.060 --> 01:33.560 So basically all the two tags here, that's the Children of The View. 01:33.560 --> 01:36.560 And I can say, okay, this is flex one. 01:36.560 --> 01:43.910 So the View will take the entire space here and I can align the items in the center and also I can just 01:44.270 --> 01:46.010 justify the content center. 01:46.010 --> 01:49.820 So if I would remove this here and save it. 01:52.510 --> 01:54.760 You can see this. 01:54.760 --> 02:00.070 I have the the text somewhere over here and then I have my name here. 02:00.070 --> 02:01.930 So I have the padding. 02:01.930 --> 02:04.540 If I would remove the padding, there will be somewhere here. 02:04.540 --> 02:13.180 So the way to distribute our content in between we have we have a few options there and then we have 02:13.180 --> 02:14.740 align items. 02:14.740 --> 02:25.750 Also, what we can have is we can have direction either row or column if I do column here. 02:29.880 --> 02:33.930 I need to do flex direction. 02:39.410 --> 02:45.640 You can see nothin actually is changed because the flex direction by default is column. 02:45.650 --> 02:47.240 I can change it to row. 02:51.850 --> 02:57.210 And instead of having that upside down, my content is now row. 02:57.220 --> 03:00.760 So that means it will go from left to right. 03:01.150 --> 03:11.740 So in that case, I can also do reverse if I want to reverse it and my name will be here on the left 03:11.740 --> 03:18.370 hand side and this will be a second, despite the fact this is first in our layout here. 03:18.370 --> 03:22.680 So I can do column, reverse row, reverse or just column or row. 03:22.690 --> 03:28.720 So basically that you can control if you have some kind of a header here, for example, and you would 03:28.720 --> 03:36.610 like to have some button here, then some text and another button then you can do a row, uh, kind 03:36.610 --> 03:39.700 of a flex for, for this setup. 03:39.700 --> 03:46.540 And then you can equally distribute this, uh, children in here or you can give them a specific flex 03:46.540 --> 03:46.960 power. 03:46.960 --> 03:50.140 So, for example, the first button might have a flex one. 03:50.170 --> 03:57.290 The main part might have a flex five and then another one flex one, and that will be equally distributed 03:57.290 --> 03:57.920 like this. 03:57.920 --> 04:00.560 So if we will have, let's say. 04:01.640 --> 04:10.820 I would like to change this for Bhutan and then I will just take it here. 04:11.330 --> 04:15.620 Let's try to do something like that. 04:16.160 --> 04:22.820 So we have a button and then we say, This is Flex. 04:25.420 --> 04:26.080 One. 04:27.220 --> 04:38.050 So what I can say is this name will be flex five and then I can have another style. 04:39.790 --> 04:42.790 Text is just an example. 04:42.880 --> 04:47.400 I can have a flex one. 04:47.410 --> 04:51.820 So now I will need to also apply the styles. 04:52.780 --> 04:55.760 So I will explain it in a second. 04:55.780 --> 05:01.690 What I've done because I don't think it's fast, just do a sub proof of concept. 05:03.830 --> 05:04.400 Here. 05:04.400 --> 05:10.420 And what what I've done is I have this kind of, uh, setup here. 05:10.430 --> 05:19.790 So what I have is I have this space here, and that's, uh, like a one seventh of the space here, 05:19.790 --> 05:21.500 and that's also one seventh. 05:21.500 --> 05:25.670 And there are on the edges here, and this is in the middle here. 05:25.670 --> 05:29.270 So that's like a column layout, if I will. 05:29.450 --> 05:32.510 Uh, this is a row layout if I will change it to column. 05:34.730 --> 05:37.910 It will be similar way, but it will be upside down. 05:37.910 --> 05:44.090 So the for the first part, which is power of one. 05:44.180 --> 05:48.380 Then we have another one and then the third one. 05:48.380 --> 05:56.660 So, uh, how this is calculated in, in terms of how much space they occupied, basically you will 05:56.660 --> 05:58.550 need to sum up all of them. 05:58.550 --> 06:06.260 So if I have two elements with a power of one, that's two and one element of power of five, that's 06:06.260 --> 06:07.370 altogether seven. 06:07.370 --> 06:12.410 So this one is one, this one is five, and this one is one. 06:12.410 --> 06:16.610 So, uh, you will have one seventh of this one. 06:16.610 --> 06:22.160 One seventh of this one and fifth of seventh of seven on, on this element. 06:22.160 --> 06:28.800 So basically the way to control the, the layout, you will control it with the flex. 06:29.180 --> 06:36.330 Uh, once we will create our own application, we will see how it works in a real world. 06:36.360 --> 06:41.730 But basically it's only a few kind of elements that you can work with. 06:41.730 --> 06:49.170 So basically we have a flex, then we have a line items and then we have justify content and then we 06:49.170 --> 06:55.800 have a flex direction here and then we can apply this to different containers there. 06:55.920 --> 06:58.500 So that's how the flex works. 06:58.590 --> 07:05.160 As I said, we'll come back to this later on, but that's very important thing to know in React Native 07:05.190 --> 07:09.840 because that will be our main tool to create the layout in our application.