1 00:00:00,620 --> 00:00:08,060 well in this video we are going to start to see how to work with flex with flex I can distribute 2 00:00:08,060 --> 00:00:19,339 in a comfortable and fast way the different components of my page, we have seen the 3 00:00:19,339 --> 00:00:25,399 way to work with gris with gris you work in several layers and then you make a table with 4 00:00:25,399 --> 00:00:30,260 which you work in rows and columns you can combine different cells you can do there 5 00:00:30,260 --> 00:00:39,460 different stories but it is not exactly the same as with flex with flex we play more with coordinates 6 00:00:39,460 --> 00:00:47,399 it is worth saying to the left up down distributed it is worth a little that is the difference I 7 00:00:47,399 --> 00:00:55,399 like to work more with flex because it does it automatically and for example controlling the 8 00:00:55,399 --> 00:01:02,679 bra pues ya puedes controlar hasta cierto punto la 9 00:01:04,019 --> 00:01:08,159 la redimensión de las páginas vale sin tener que utilizar los puntos de 10 00:01:08,159 --> 00:01:11,799 ruptura pues hay que acordarse de algunas cosas 11 00:01:11,799 --> 00:01:18,159 antes de usar flex primero que tiene un contenedor vale tiene un contenedor 12 00:01:18,159 --> 00:01:24,260 padre que va a actuar sobre todos los componentes hijos como no puede ser de 13 00:01:24,260 --> 00:01:31,019 another way ok then there will be parts 14 00:01:31,019 --> 00:01:37,819 of flex classes of flex that will work on that father and other classes 15 00:01:37,819 --> 00:01:43,659 on those children is worth then be clear that on the one hand 16 00:01:43,659 --> 00:01:47,579 some classes are going to work on the father others on the son the ones that are 17 00:01:47,579 --> 00:01:53,420 on the father are going to affect in all the in all the children and the ones that 18 00:01:53,420 --> 00:01:58,980 are in the children will have more priority than that of the father and they will only 19 00:01:58,980 --> 00:02:04,519 affect that child where we put that class is worth with those classes with 20 00:02:04,519 --> 00:02:12,180 the ones that we put in the good father container 21 00:02:12,180 --> 00:02:17,099 you can work or you will work horizontally or vertically is worth 22 00:02:17,099 --> 00:02:21,219 to place the different components horizontally or vertically 23 00:02:21,219 --> 00:02:27,580 for example the content this is going to work vertically however justify is going to work 24 00:02:27,580 --> 00:02:35,460 horizontally ok then that is what we are going to see now a little if you get into the help of the time 25 00:02:35,460 --> 00:02:47,520 wind you are going to see that you have down here the fleece angry ok which is a bit also what 26 00:02:47,520 --> 00:02:53,639 we were seeing the other day and this is the justify the link with ten well we have here different 27 00:02:53,639 --> 00:03:02,879 options we are going to see some important direction ok we are going to see some and so we are 28 00:03:02,879 --> 00:03:12,460 working as always on the technical documentation ok this is our page right now it has nothing 29 00:03:12,460 --> 00:03:24,580 we come to the visual studio code ok we are here we are going to see it yes and we start working 30 00:03:24,580 --> 00:03:35,340 ok then I already have the fichero app.js x is worth it because the first thing I am going to do is a 31 00:03:35,340 --> 00:03:42,060 container I am going to put the container class I am going to put a background color ok 32 00:03:42,060 --> 00:03:48,360 well to appreciate that surface well on which we are working then we can put here 33 00:03:53,139 --> 00:03:58,340 this good more than putting it in the container we are going to put it to what is going to be the father tip 34 00:03:58,340 --> 00:04:03,159 ok here the only thing I am going to say is how I want the text for example of the dicks that I am going to 35 00:04:03,159 --> 00:04:11,300 use it I want it centered and a little the mx margins that you already know on the right and on the 36 00:04:11,300 --> 00:04:19,199 left because it is automatic that I put it automatically and a margin at the top because it is 37 00:04:19,199 --> 00:04:25,480 for example 5 is worth something like that a little a container here in the end what interests me the most is 38 00:04:25,480 --> 00:04:34,180 this class container is valid is now what I am going to create is the dip that is going to be the father 39 00:04:34,180 --> 00:04:43,000 of all the items that I want to order through flex ok then we are going to put a dip here 40 00:04:47,040 --> 00:04:53,560 we are going to put classes but we are going to put classes here for example the bg orange 41 00:04:55,480 --> 00:05:02,759 400 for example ok I'm going to put a margin and a padding 42 00:05:02,759 --> 00:05:09,319 a padding of 4 we are going to put a margin because I don't know a little for that 43 00:05:09,319 --> 00:05:14,339 separation is worth it and we don't get together and here we are going to put as a little in the 44 00:05:14,339 --> 00:05:20,420 tailwind documentation we are going to put the 01 45 00:05:20,420 --> 00:05:25,480 we are going to do 3 deep like these 46 00:05:25,480 --> 00:05:33,720 and they are here we are going to put the 02 and the 03 is worth and then we would have 47 00:05:35,720 --> 00:05:42,720 good because it is something similar to this that we have made those blocks with the 01 we are going to 48 00:05:42,720 --> 00:05:50,889 make this a little bigger so that you can see it well we are going to do it here 49 00:05:50,889 --> 00:06:00,329 well then we have made those blocks we are going to see if here if they let me enter the clas 50 00:06:04,250 --> 00:06:13,389 we are going to put a 400 that you can see okay well then here you see how the different components are 51 00:06:13,389 --> 00:06:23,589 distributing the different components and with the different classes 0 1 0 2 0 3 it is worth within the father 52 00:06:23,589 --> 00:06:34,430 well then if we go to the help it is worth the first thing I find is the flex direction it is worth 53 00:06:34,430 --> 00:06:42,230 then it tells you that you can adjust it in a row you can adjust it in a reverse row it is worth the 54 00:06:42,230 --> 00:06:49,250 reverse a reverse row in column or a reverse column 55 00:06:49,250 --> 00:06:53,449 ok then we are going to start doing tests of that type 3 the first thing 56 00:06:53,449 --> 00:06:59,209 I'm going to put and you always have to put is flex ok then notice that as soon as 57 00:06:59,209 --> 00:07:04,430 you put flex it already takes these deep that we had put that before I was not 58 00:07:04,430 --> 00:07:13,329 always putting it in that it will occupy all the whole space because because he 59 00:07:13,329 --> 00:07:20,709 put it in column if I put here flex col ok 60 00:07:20,709 --> 00:07:26,970 look at how he is putting it on me now he puts it in column and occupies 61 00:07:26,970 --> 00:07:31,230 all that space that we have given him remember that we have put a margin that 62 00:07:31,230 --> 00:07:36,269 we have put a pavín that is worth but in principle it is doing it to me so notice that here it puts 63 00:07:36,269 --> 00:07:47,089 0 1 0 2 and 0 3 if I here I take and put the reverse it is worth already exposing 0 3 0 2 0 1 then I can 64 00:07:47,089 --> 00:07:53,050 go ordering and as always I can modify them with the different breaking points remember that 65 00:07:53,050 --> 00:07:58,629 you can put in a way when it has a certain resolution and when it changes 66 00:07:58,629 --> 00:08:05,350 resolution that is modified, for example, in reverse, we can work instead of in columns 67 00:08:05,350 --> 00:08:16,089 we can work in rows then to see ok this is the one that is giving me as soon as I put 68 00:08:16,089 --> 00:08:23,769 flex is the one that gives me by default ok and the same if we put the reverse because it does it in the 69 00:08:23,769 --> 00:08:29,050 inversa y a la inversa es decir en vez de ponerlo a la izquierda lo va a poner a la derecha y además 70 00:08:29,050 --> 00:08:39,490 va a dar la vuelta a los diferentes y vale bueno pues esto es un poco la dirección vale el flex 71 00:08:39,490 --> 00:08:45,649 road road reverse call con reverse tenemos el bra que también es interesante y me dice flex 72 00:08:45,649 --> 00:09:00,649 BRAP, the FRAP, the REVERSE and the NO BRAP. Well, this is, we are going to remove the REVERSE here and I am going to leave it with the ROW. 73 00:09:00,649 --> 00:09:10,649 Well, if I come to the development options, I am going to make this smaller. 74 00:09:10,649 --> 00:09:22,460 notice that what it does to me is try to adjust to that space, it is worth that you can want this, well 75 00:09:22,460 --> 00:09:29,820 in principle it is not desirable, it is worth me now what I am looking for is that when the space begins to be 76 00:09:29,820 --> 00:09:36,840 very small, that is, it begins to modify the size of the blocks, then it begins to divide 77 00:09:36,840 --> 00:09:43,220 in column ok then we can take here and tell it to put the flex 78 00:09:45,019 --> 00:09:57,580 ok then look at how when I have it set to the size with which I am working that there is no 79 00:09:57,580 --> 00:10:04,980 problem because it is already valid and as I am making it smaller it is accommodating to that space and 80 00:10:04,980 --> 00:10:19,190 no puedo modificar ese tamaño vale entonces tenemos el fresco el revés que pues como ya 81 00:10:19,190 --> 00:10:23,950 habréis intuido lo que va a hacer es darle la vuelta según lo vamos haciendo más pequeño es 82 00:10:23,950 --> 00:10:30,350 decir poner el 3 arriba y el 1 abajo vale entonces ahí lo tenéis como se va ajustando 83 00:10:30,350 --> 00:10:42,789 ok and well it can also be interesting and he does not work what he does because he is the one that is 84 00:10:42,789 --> 00:10:49,690 by default and what does this one do because at no time will he do it more he will divide it into 85 00:10:49,690 --> 00:10:56,649 different rows ok then well this is a bit of the brap that we are finding 86 00:10:56,649 --> 00:11:11,659 we can keep finding, for example, so we can use justify, for example, okay 87 00:11:12,580 --> 00:11:17,960 and this is what I tell you that this works justify in horizontal and 88 00:11:20,799 --> 00:11:33,639 the content in vertical, okay, so we can find all this from this 89 00:11:33,639 --> 00:11:42,220 here it is worth this one vertically we have to align the site in the good cell we have there are different 90 00:11:42,220 --> 00:11:50,980 options we have the good bra this now we see it but it is ring 91 00:11:54,019 --> 00:11:59,980 I am going with the justify then the justify we have left that it works horizontally 92 00:11:59,980 --> 00:12:08,759 ok and we have the normal justify the star in good we are going to start trying this then 93 00:12:09,820 --> 00:12:16,279 we are going to remove this one that does not give me a problem that in principle it will not give me any problem and I 94 00:12:16,279 --> 00:12:23,659 am going to leave the justify and the normal ok ok and this one does not do anything for me 95 00:12:23,659 --> 00:12:30,580 good because because it is the one that is by default if I am instead of the normal one we put it 96 00:12:36,779 --> 00:12:51,879 ok this one has already made you in horizontal it has displaced these of these blocks 0 1 0 2 0 3 97 00:12:51,879 --> 00:13:01,120 vale y los pone al final si los ponemos en el start pues no lo va a poner al principio vale 98 00:13:02,600 --> 00:13:09,240 si le metemos el centrado pues entonces va a y me los va a centrar vale 99 00:13:10,240 --> 00:13:18,299 si vamos a cerrar esto casi lo veis lo veréis mejor le metemos él 100 00:13:18,299 --> 00:13:29,340 well, these that are here with the between, the addon, the evenly, the stretch, well, these what 101 00:13:29,340 --> 00:13:36,659 they do is play with the margins, it is worth if you put the between, then notice that what it does 102 00:13:36,659 --> 00:13:46,259 is distribute them in the space of the dip of the father, it is always worth respecting those margins that we have 103 00:13:46,259 --> 00:13:54,299 given in the father or in the container, it always respects me then that is an option you can 104 00:13:54,299 --> 00:14:00,080 want that and in such a way that those, for example, if they were images or buttons or a bar or something 105 00:14:00,080 --> 00:14:10,899 like that, you will always have it placed, you can take it and put the Aaron then Aaron, which is what it 106 00:14:10,899 --> 00:14:17,080 does, it always leaves the same margin to the left and to the right, it seems that in 0 2 there is more margin 107 00:14:17,759 --> 00:14:31,000 But that is not real. You have to think that the margin is, for example, from this vertex, from this edge to this other, it is this size. 108 00:14:31,000 --> 00:14:44,759 So here it would be that size that would be up to the middle of 0.3 and the other that would be 0.2, so when the two come together it seems that there is the double of space, but no, it is the same margin added twice and here the same thing happens to me. 109 00:14:44,759 --> 00:14:53,769 ok if what you do want is the event and this 110 00:14:53,769 --> 00:14:59,230 here it is that it is respecting me well all those margins here yes it does not make 111 00:14:59,230 --> 00:15:06,250 that sum of those two here it will put me all to the same spatial is worth the same 112 00:15:06,250 --> 00:15:11,409 spaced the same padding inside the father is worth 113 00:15:11,409 --> 00:15:23,039 if we put it, the stretch came, this one is not going to do anything to me because I need to play 114 00:15:24,700 --> 00:15:30,539 I need to put this in columns, it is worth what it does is adjust it to the entire size, it is worth a little 115 00:15:30,539 --> 00:15:36,779 as we had it at the beginning, well, this one is not usually used a lot if you do not put it instead of in a 116 00:15:36,779 --> 00:15:43,500 row in columns and you are going to see it, it is going to be distributed as we had it at the beginning 117 00:15:43,500 --> 00:15:59,720 ok ok look at how what I tell you stretches it and occupies everything well what else can we find 118 00:16:02,019 --> 00:16:10,899 here in the aids these are good here it is for the items put them at the end of that space 119 00:16:10,899 --> 00:16:19,360 we are going to play with the link with this is what I say that the content what it does to me is to work 120 00:16:19,360 --> 00:16:25,840 vertically, it is worth until now justify what it has done has been to work 121 00:16:28,720 --> 00:16:39,639 horizontally now what we are going to do is work vertically 122 00:16:39,639 --> 00:16:50,080 ok then to work vertically I am going to put this here I am going to remove it and I am going to put 123 00:16:50,080 --> 00:17:08,259 an h 14 here h 14 ok that I have not taken it ok we are going to put it here then to see it well h 14 we are going to 124 00:17:08,259 --> 00:17:33,950 to put the gray bg here and here I am going to take this h 14 we are going to take it as well 125 00:17:53,859 --> 00:17:56,599 to see if we put the h 14 class 126 00:17:58,299 --> 00:18:03,680 father and I put the gray bg here 127 00:18:24,880 --> 00:18:37,240 he is not taking it to see if we are going to put 64 each better like this if it is valid effectively 128 00:18:39,460 --> 00:18:52,319 64 ok I'm going to make this smaller well a little like that ok then look at how I have those 129 00:18:52,319 --> 00:19:00,900 blocks and how now by default what you do is occupies the one that is using the star is 130 00:19:00,900 --> 00:19:11,039 occupying the entire surface of the father ok if we go to the link content I can play here ok 131 00:19:11,039 --> 00:19:17,339 and instead of using the stream that is the one that is by default we are going to put the normal content ok 132 00:19:17,339 --> 00:19:23,099 then we are going to put it and notice that so far I have been working all the time on the father ok 133 00:19:23,099 --> 00:19:34,680 we are going to put the content then we have said the normal ok if we come to our page it has not 134 00:19:34,680 --> 00:19:42,299 done anything to us ok because it uses the same as the stretch then we are going to put the start which is 135 00:19:42,299 --> 00:19:54,700 this one is not taking it from me and it may be because I need the black flex 136 00:19:57,839 --> 00:20:04,559 there you are, we need the brap, it is worth for it to work for us in this case the content is worth 137 00:20:04,559 --> 00:20:12,140 then this one you are already seeing that it works for us in vertical and if I put the normal then 138 00:20:12,299 --> 00:20:34,660 If we put the start, it takes the divs and puts them above, if I put the end, it will put them below, we can center it. 139 00:20:34,660 --> 00:20:47,660 Okay, we can tell it between, okay, a little the same as before, 140 00:20:47,660 --> 00:20:58,660 content between, content, let's put it in level, okay, so this seems like it's not doing anything, 141 00:20:58,660 --> 00:21:08,319 but if we go back to the development tools and we start to do this smaller, 142 00:21:09,500 --> 00:21:18,700 look at how it now begins to go ordering, putting those margins, it is worth 3 and we put 143 00:21:18,700 --> 00:21:31,529 we have said between it is worth looking at how when I start to make it smaller you see 144 00:21:32,670 --> 00:21:37,529 well he is ordering it to me then he is working vertically, it is worth that it is a bit of what 145 00:21:37,529 --> 00:21:45,230 you have to remember what else I can do or what else allows me to do tailwind I have the self 146 00:21:45,230 --> 00:21:57,529 self-auto, the start, the end, the center, the stretch, okay? And these do work on the children, okay? 147 00:21:57,529 --> 00:22:05,789 So this, well, here it is no longer going to work, we are no longer going to play with the big father, we are going to 148 00:22:05,789 --> 00:22:13,009 work with the big son, okay? Let's see then how this would be, because I have here, for example, 149 00:22:13,009 --> 00:22:28,450 we are going to put it here, it is the good one, it is worth that I would have to do this, take the 2 and throw it down, 150 00:22:28,450 --> 00:22:38,730 but it is not doing it for us, that is because when we play with the children we have to do it with 151 00:22:38,730 --> 00:22:46,319 everyone is worth then this one I tell him this one I want it up and this one too 152 00:22:52,289 --> 00:23:06,039 is worth and content between this was worth then look at how in this way we can also 153 00:23:06,039 --> 00:23:12,720 go ordering the different components now directly on the children is worth 154 00:23:12,720 --> 00:23:26,099 what else can we do because we can take and for example go to see this flex no because 155 00:23:26,099 --> 00:23:30,839 so far the only thing I'm doing is modifying the positions to the left to the right 156 00:23:30,839 --> 00:23:39,980 up down in the center is worth in rows in columns well and if what I want is to make it 157 00:23:39,980 --> 00:23:46,740 bigger, it is worth because so far it is adjusting with flex the size to what it contains to the 158 00:23:46,740 --> 00:24:02,509 text, that is, if I take here in 0 2 and put and it is white villa, it is worth because this one is adjusting to 159 00:24:02,509 --> 00:24:10,109 that text, well, it is very good, but what if I want to do, for example, for a bar I want 160 00:24:10,109 --> 00:24:20,509 that this this deep this block occupies me all the space that is between 0 and 0 1 and 0 3 for 161 00:24:20,509 --> 00:24:30,569 example ok then for that we are going to remove these self you can combine everything ok but now it 162 00:24:30,569 --> 00:24:39,990 is to have it all in the same row and so I think it is easier to see imagine I have this 163 00:24:39,990 --> 00:24:45,490 so ok we have the flex 164 00:24:45,490 --> 00:24:48,349 I have 165 00:24:51,069 --> 00:24:54,349 we have told him here 166 00:25:01,299 --> 00:25:07,640 we have said that we are going to use the flex to a self-started none is good 167 00:25:07,640 --> 00:25:14,559 the one what it does is that it adjusts the width of the high to all the space is worth 168 00:25:14,559 --> 00:25:18,980 then it is to play with those sizes then imagine that I put the flex here 169 00:25:18,980 --> 00:25:36,890 1 for example it is worth then look at how now I have changed this size it is worth I have changed that 170 00:25:36,890 --> 00:25:48,849 size 3 we are also going to remove the height and so it is worth then I have the 01 I have the 171 00:25:48,849 --> 00:25:56,450 is Villablanca, it is worth if, for example, we also put the flex 1 class, flex 1 172 00:25:57,950 --> 00:26:07,690 01, it is worth because it occupies this space, it is worth and where I have put the flex 1, it is adjusting it to 173 00:26:07,690 --> 00:26:13,470 occupy all the size, it is worth that it is also interesting also because that especially at the time of 174 00:26:13,470 --> 00:26:18,869 I see it as very clear when using the snap bar that are the navigation bars 175 00:26:18,869 --> 00:26:24,509 that are always at the top ok and that has some buttons and has a logo and things like that 176 00:26:24,509 --> 00:26:35,589 ok then with flex it allows me a lot to use this type of things ok well then this the flex auto 177 00:26:35,589 --> 00:26:51,700 for example you see how it is adjusting because if I put flex here and we put initial on it, it will 178 00:26:51,700 --> 00:26:59,240 take its size, okay, there are some that what they do to you is the initial what they are is able to shrink 179 00:26:59,240 --> 00:27:06,380 but not to get bigger, it is worth then they shrink so that it occupies the initial size, well 180 00:27:06,380 --> 00:27:12,920 with all that it is worth that it is in the documentation for not making the video much longer 181 00:27:12,920 --> 00:27:22,000 it is all here it is worth having the examples as always but they have nothing more to think about if I work 182 00:27:22,000 --> 00:27:29,380 on the father in the children if what I want is to work horizontally or vertically if what I want 183 00:27:29,380 --> 00:27:39,160 is to change the sizes of the items or the divs, it is worth the blocks, it is a bit to have as always 184 00:27:39,160 --> 00:27:48,279 the layout in the head, which is what we want to do, well, so far this video a greeting until later