1 00:00:05,710 --> 00:00:13,790 To deal with the various flexibles properties, let's start modifying our stylesheet and our ative or 2 00:00:13,840 --> 00:00:15,080 HDMI fi. 3 00:00:15,310 --> 00:00:20,470 Meanwhile, it's still the media screen and let's leave only body inside the sheet. 4 00:00:21,940 --> 00:00:30,850 Inside Avivi, instead, let's modify the title in box and let's insert some DVS. 5 00:00:31,880 --> 00:00:34,160 Within which we will insert. 6 00:00:37,550 --> 00:00:39,350 Space one. 7 00:00:41,030 --> 00:00:43,010 Space to. 8 00:00:44,300 --> 00:00:46,190 And space. 9 00:00:47,720 --> 00:00:48,260 Three. 10 00:00:50,340 --> 00:01:00,720 Obviously, by saving and refreshing, we see that our sheet now is composed only by the Eitel and the 11 00:01:00,720 --> 00:01:04,410 three things inserted, one below the other. 12 00:01:05,380 --> 00:01:14,830 The property we are dealing with in this lesson is Fleck's Direxion, consenting us to choose the direction 13 00:01:14,830 --> 00:01:19,810 of the main axis where the various boxes will be positioned. 14 00:01:19,840 --> 00:01:28,810 Therefore, if inserting the elements horizontally or vertically before everything, let's add an additional 15 00:01:28,810 --> 00:01:34,540 div with a class, which in this case would be container. 16 00:01:38,500 --> 00:01:46,930 Which obviously will contain our spaces, therefore, let's insert a clause in Dave at the end. 17 00:01:48,170 --> 00:01:55,940 And let's align them and let's say let's move now to our stylesheet, which, as you know, is already 18 00:01:55,940 --> 00:01:57,480 linked to this page. 19 00:01:57,530 --> 00:02:02,210 The first thing to do would be insert in the container class. 20 00:02:03,290 --> 00:02:08,630 Within which to define, first of all, display flags. 21 00:02:09,590 --> 00:02:15,410 So that the system may identify the Fleck's boxes as setting to display. 22 00:02:16,780 --> 00:02:22,210 After that, we will insert flex direction that for the time being. 23 00:02:23,450 --> 00:02:25,460 We are setting as Khalil. 24 00:02:27,680 --> 00:02:29,210 That means vertically. 25 00:02:32,360 --> 00:02:41,990 Then let's move to our ATV fire and let's set a class to every single div, so espie one. 26 00:02:46,110 --> 00:02:48,000 Espie to. 27 00:02:50,430 --> 00:03:00,930 And Class Aspey three, let's say, and let's go back to our stylesheet at this point in our classes, 28 00:03:01,080 --> 00:03:06,630 starting from Aspey one, let's define a background color. 29 00:03:08,070 --> 00:03:09,300 Let's start with. 30 00:03:10,700 --> 00:03:18,110 Black for SP1, one unlet said 14 pixel font size. 31 00:03:23,730 --> 00:03:28,890 Two hundred pixel width and let's place a ten piece of padding. 32 00:03:31,180 --> 00:03:37,360 Let's go to our ASPEY one, creating ESP two and SB three. 33 00:03:38,430 --> 00:03:41,490 Well, we will modify only the background color. 34 00:03:43,560 --> 00:03:47,640 Therefore, red and therefore blue. 35 00:03:50,190 --> 00:03:54,420 After saving, let's refresh and see the result. 36 00:03:56,270 --> 00:04:00,170 As you see inside our container. 37 00:04:01,130 --> 00:04:04,880 In the car alone, the three days we created. 38 00:04:05,900 --> 00:04:07,460 I've been 32. 39 00:04:08,800 --> 00:04:17,110 Obviously, we can also choose to insert them horizontally, therefore here as well, we would just 40 00:04:17,110 --> 00:04:22,400 need to insert a row, they would be displayed one beside the other. 41 00:04:22,990 --> 00:04:31,510 There are also the column reverse function and role reverse function, which obviously we make as B 42 00:04:31,510 --> 00:04:37,330 three appear first and spe one last order for role reversal. 43 00:04:39,190 --> 00:04:41,440 The procedure is the same. 44 00:04:42,750 --> 00:04:51,480 As you see, therefore, we have used the first function of our patterned container inside the Fleck's 45 00:04:51,480 --> 00:04:56,460 boxes to sort what was inserted inside Ative. 46 00:04:58,030 --> 00:04:59,410 Really easily. 47 00:05:00,410 --> 00:05:08,600 Without having to define additional details, to make our lives appear in the correct way, one below 48 00:05:08,600 --> 00:05:11,990 the other or else one beside the other. 49 00:05:12,830 --> 00:05:16,640 Therefore, let's go back now to our Cullom view. 50 00:05:18,820 --> 00:05:27,970 That's also third black instead of green, so that in the next lesson, there may be less problems in 51 00:05:28,300 --> 00:05:32,450 identifying the texts and inside container. 52 00:05:32,670 --> 00:05:35,170 Instead, we will insert white. 53 00:05:36,410 --> 00:05:48,350 Now, let's save refresh and we have our flex box perfectly visible now we can step onto the flex wraps.