Activa JavaScript para disfrutar de los vídeos de la Mediateca.
Back end Vs Front end - Vídeo 22 - Contenido educativo
Ajuste de pantallaEl ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:
Trabajando con la clase FlexBox de Tailwind CSS
well in this video we are going to start to see how to work with flex with flex I can distribute
00:00:00
in a comfortable and fast way the different components of my page, we have seen the
00:00:08
way to work with gris with gris you work in several layers and then you make a table with
00:00:19
which you work in rows and columns you can combine different cells you can do there
00:00:25
different stories but it is not exactly the same as with flex with flex we play more with coordinates
00:00:30
it is worth saying to the left up down distributed it is worth a little that is the difference I
00:00:39
like to work more with flex because it does it automatically and for example controlling the
00:00:47
bra pues ya puedes controlar hasta cierto punto la
00:00:55
la redimensión de las páginas vale sin tener que utilizar los puntos de
00:01:04
ruptura pues hay que acordarse de algunas cosas
00:01:08
antes de usar flex primero que tiene un contenedor vale tiene un contenedor
00:01:11
padre que va a actuar sobre todos los componentes hijos como no puede ser de
00:01:18
another way ok then there will be parts
00:01:24
of flex classes of flex that will work on that father and other classes
00:01:31
on those children is worth then be clear that on the one hand
00:01:37
some classes are going to work on the father others on the son the ones that are
00:01:43
on the father are going to affect in all the in all the children and the ones that
00:01:47
are in the children will have more priority than that of the father and they will only
00:01:53
affect that child where we put that class is worth with those classes with
00:01:58
the ones that we put in the good father container
00:02:04
you can work or you will work horizontally or vertically is worth
00:02:12
to place the different components horizontally or vertically
00:02:17
for example the content this is going to work vertically however justify is going to work
00:02:21
horizontally ok then that is what we are going to see now a little if you get into the help of the time
00:02:27
wind you are going to see that you have down here the fleece angry ok which is a bit also what
00:02:35
we were seeing the other day and this is the justify the link with ten well we have here different
00:02:47
options we are going to see some important direction ok we are going to see some and so we are
00:02:53
working as always on the technical documentation ok this is our page right now it has nothing
00:03:02
we come to the visual studio code ok we are here we are going to see it yes and we start working
00:03:12
ok then I already have the fichero app.js x is worth it because the first thing I am going to do is a
00:03:24
container I am going to put the container class I am going to put a background color ok
00:03:35
well to appreciate that surface well on which we are working then we can put here
00:03:42
this good more than putting it in the container we are going to put it to what is going to be the father tip
00:03:53
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
00:03:58
use it I want it centered and a little the mx margins that you already know on the right and on the
00:04:03
left because it is automatic that I put it automatically and a margin at the top because it is
00:04:11
for example 5 is worth something like that a little a container here in the end what interests me the most is
00:04:19
this class container is valid is now what I am going to create is the dip that is going to be the father
00:04:25
of all the items that I want to order through flex ok then we are going to put a dip here
00:04:34
we are going to put classes but we are going to put classes here for example the bg orange
00:04:47
400 for example ok I'm going to put a margin and a padding
00:04:55
a padding of 4 we are going to put a margin because I don't know a little for that
00:05:02
separation is worth it and we don't get together and here we are going to put as a little in the
00:05:09
tailwind documentation we are going to put the 01
00:05:14
we are going to do 3 deep like these
00:05:20
and they are here we are going to put the 02 and the 03 is worth and then we would have
00:05:25
good because it is something similar to this that we have made those blocks with the 01 we are going to
00:05:35
make this a little bigger so that you can see it well we are going to do it here
00:05:42
well then we have made those blocks we are going to see if here if they let me enter the clas
00:05:50
we are going to put a 400 that you can see okay well then here you see how the different components are
00:06:04
distributing the different components and with the different classes 0 1 0 2 0 3 it is worth within the father
00:06:13
well then if we go to the help it is worth the first thing I find is the flex direction it is worth
00:06:23
then it tells you that you can adjust it in a row you can adjust it in a reverse row it is worth the
00:06:34
reverse a reverse row in column or a reverse column
00:06:42
ok then we are going to start doing tests of that type 3 the first thing
00:06:49
I'm going to put and you always have to put is flex ok then notice that as soon as
00:06:53
you put flex it already takes these deep that we had put that before I was not
00:06:59
always putting it in that it will occupy all the whole space because because he
00:07:04
put it in column if I put here flex col ok
00:07:13
look at how he is putting it on me now he puts it in column and occupies
00:07:20
all that space that we have given him remember that we have put a margin that
00:07:26
we have put a pavín that is worth but in principle it is doing it to me so notice that here it puts
00:07:31
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
00:07:36
go ordering and as always I can modify them with the different breaking points remember that
00:07:47
you can put in a way when it has a certain resolution and when it changes
00:07:53
resolution that is modified, for example, in reverse, we can work instead of in columns
00:07:58
we can work in rows then to see ok this is the one that is giving me as soon as I put
00:08:05
flex is the one that gives me by default ok and the same if we put the reverse because it does it in the
00:08:16
inversa y a la inversa es decir en vez de ponerlo a la izquierda lo va a poner a la derecha y además
00:08:23
va a dar la vuelta a los diferentes y vale bueno pues esto es un poco la dirección vale el flex
00:08:29
road road reverse call con reverse tenemos el bra que también es interesante y me dice flex
00:08:39
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.
00:08:45
Well, if I come to the development options, I am going to make this smaller.
00:09:00
notice that what it does to me is try to adjust to that space, it is worth that you can want this, well
00:09:10
in principle it is not desirable, it is worth me now what I am looking for is that when the space begins to be
00:09:22
very small, that is, it begins to modify the size of the blocks, then it begins to divide
00:09:29
in column ok then we can take here and tell it to put the flex
00:09:36
ok then look at how when I have it set to the size with which I am working that there is no
00:09:45
problem because it is already valid and as I am making it smaller it is accommodating to that space and
00:09:57
no puedo modificar ese tamaño vale entonces tenemos el fresco el revés que pues como ya
00:10:04
habréis intuido lo que va a hacer es darle la vuelta según lo vamos haciendo más pequeño es
00:10:19
decir poner el 3 arriba y el 1 abajo vale entonces ahí lo tenéis como se va ajustando
00:10:23
ok and well it can also be interesting and he does not work what he does because he is the one that is
00:10:30
by default and what does this one do because at no time will he do it more he will divide it into
00:10:42
different rows ok then well this is a bit of the brap that we are finding
00:10:49
we can keep finding, for example, so we can use justify, for example, okay
00:10:56
and this is what I tell you that this works justify in horizontal and
00:11:12
the content in vertical, okay, so we can find all this from this
00:11:20
here it is worth this one vertically we have to align the site in the good cell we have there are different
00:11:33
options we have the good bra this now we see it but it is ring
00:11:42
I am going with the justify then the justify we have left that it works horizontally
00:11:54
ok and we have the normal justify the star in good we are going to start trying this then
00:11:59
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
00:12:09
am going to leave the justify and the normal ok ok and this one does not do anything for me
00:12:16
good because because it is the one that is by default if I am instead of the normal one we put it
00:12:23
ok this one has already made you in horizontal it has displaced these of these blocks 0 1 0 2 0 3
00:12:36
vale y los pone al final si los ponemos en el start pues no lo va a poner al principio vale
00:12:51
si le metemos el centrado pues entonces va a y me los va a centrar vale
00:13:02
si vamos a cerrar esto casi lo veis lo veréis mejor le metemos él
00:13:10
well, these that are here with the between, the addon, the evenly, the stretch, well, these what
00:13:18
they do is play with the margins, it is worth if you put the between, then notice that what it does
00:13:29
is distribute them in the space of the dip of the father, it is always worth respecting those margins that we have
00:13:36
given in the father or in the container, it always respects me then that is an option you can
00:13:46
want that and in such a way that those, for example, if they were images or buttons or a bar or something
00:13:54
like that, you will always have it placed, you can take it and put the Aaron then Aaron, which is what it
00:14:00
does, it always leaves the same margin to the left and to the right, it seems that in 0 2 there is more margin
00:14:10
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.
00:14:17
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.
00:14:31
ok if what you do want is the event and this
00:14:44
here it is that it is respecting me well all those margins here yes it does not make
00:14:53
that sum of those two here it will put me all to the same spatial is worth the same
00:14:59
spaced the same padding inside the father is worth
00:15:06
if we put it, the stretch came, this one is not going to do anything to me because I need to play
00:15:11
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
00:15:24
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
00:15:30
row in columns and you are going to see it, it is going to be distributed as we had it at the beginning
00:15:36
ok ok look at how what I tell you stretches it and occupies everything well what else can we find
00:15:43
here in the aids these are good here it is for the items put them at the end of that space
00:16:02
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
00:16:10
vertically, it is worth until now justify what it has done has been to work
00:16:19
horizontally now what we are going to do is work vertically
00:16:28
ok then to work vertically I am going to put this here I am going to remove it and I am going to put
00:16:39
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
00:16:50
to put the gray bg here and here I am going to take this h 14 we are going to take it as well
00:17:08
to see if we put the h 14 class
00:17:53
father and I put the gray bg here
00:17:58
he is not taking it to see if we are going to put 64 each better like this if it is valid effectively
00:18:24
64 ok I'm going to make this smaller well a little like that ok then look at how I have those
00:18:39
blocks and how now by default what you do is occupies the one that is using the star is
00:18:52
occupying the entire surface of the father ok if we go to the link content I can play here ok
00:19:00
and instead of using the stream that is the one that is by default we are going to put the normal content ok
00:19:11
then we are going to put it and notice that so far I have been working all the time on the father ok
00:19:17
we are going to put the content then we have said the normal ok if we come to our page it has not
00:19:23
done anything to us ok because it uses the same as the stretch then we are going to put the start which is
00:19:34
this one is not taking it from me and it may be because I need the black flex
00:19:42
there you are, we need the brap, it is worth for it to work for us in this case the content is worth
00:19:57
then this one you are already seeing that it works for us in vertical and if I put the normal then
00:20:04
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.
00:20:12
Okay, we can tell it between, okay, a little the same as before,
00:20:34
content between, content, let's put it in level, okay, so this seems like it's not doing anything,
00:20:47
but if we go back to the development tools and we start to do this smaller,
00:20:58
look at how it now begins to go ordering, putting those margins, it is worth 3 and we put
00:21:09
we have said between it is worth looking at how when I start to make it smaller you see
00:21:18
well he is ordering it to me then he is working vertically, it is worth that it is a bit of what
00:21:32
you have to remember what else I can do or what else allows me to do tailwind I have the self
00:21:37
self-auto, the start, the end, the center, the stretch, okay? And these do work on the children, okay?
00:21:45
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
00:21:57
work with the big son, okay? Let's see then how this would be, because I have here, for example,
00:22:05
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,
00:22:13
but it is not doing it for us, that is because when we play with the children we have to do it with
00:22:28
everyone is worth then this one I tell him this one I want it up and this one too
00:22:38
is worth and content between this was worth then look at how in this way we can also
00:22:52
go ordering the different components now directly on the children is worth
00:23:06
what else can we do because we can take and for example go to see this flex no because
00:23:12
so far the only thing I'm doing is modifying the positions to the left to the right
00:23:26
up down in the center is worth in rows in columns well and if what I want is to make it
00:23:30
bigger, it is worth because so far it is adjusting with flex the size to what it contains to the
00:23:39
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
00:23:46
that text, well, it is very good, but what if I want to do, for example, for a bar I want
00:24:02
that this this deep this block occupies me all the space that is between 0 and 0 1 and 0 3 for
00:24:10
example ok then for that we are going to remove these self you can combine everything ok but now it
00:24:20
is to have it all in the same row and so I think it is easier to see imagine I have this
00:24:30
so ok we have the flex
00:24:39
I have
00:24:45
we have told him here
00:24:51
we have said that we are going to use the flex to a self-started none is good
00:25:01
the one what it does is that it adjusts the width of the high to all the space is worth
00:25:07
then it is to play with those sizes then imagine that I put the flex here
00:25:14
1 for example it is worth then look at how now I have changed this size it is worth I have changed that
00:25:18
size 3 we are also going to remove the height and so it is worth then I have the 01 I have the
00:25:36
is Villablanca, it is worth if, for example, we also put the flex 1 class, flex 1
00:25:48
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
00:25:57
occupy all the size, it is worth that it is also interesting also because that especially at the time of
00:26:07
I see it as very clear when using the snap bar that are the navigation bars
00:26:13
that are always at the top ok and that has some buttons and has a logo and things like that
00:26:18
ok then with flex it allows me a lot to use this type of things ok well then this the flex auto
00:26:24
for example you see how it is adjusting because if I put flex here and we put initial on it, it will
00:26:35
take its size, okay, there are some that what they do to you is the initial what they are is able to shrink
00:26:51
but not to get bigger, it is worth then they shrink so that it occupies the initial size, well
00:26:59
with all that it is worth that it is in the documentation for not making the video much longer
00:27:06
it is all here it is worth having the examples as always but they have nothing more to think about if I work
00:27:12
on the father in the children if what I want is to work horizontally or vertically if what I want
00:27:22
is to change the sizes of the items or the divs, it is worth the blocks, it is a bit to have as always
00:27:29
the layout in the head, which is what we want to do, well, so far this video a greeting until later
00:27:39
- Idioma/s:
- Idioma/s subtítulos:
- Autor/es:
- Mario S.
- Subido por:
- Mario S.
- Licencia:
- Dominio público
- Visualizaciones:
- 47
- Fecha:
- 29 de julio de 2024 - 20:41
- Visibilidad:
- Público
- Centro:
- IES VILLABLANCA
- Duración:
- 00′ 17″
- Relación de aspecto:
- 1.78:1
- Resolución:
- 1920x1080 píxeles
- Tamaño:
- 70.76 MBytes
