Hoy es el curso de CSS y lo dejamos, si os habéis perdido la primera parte y pues lo que sea, pues queréis echarle un vistazo, que sepáis que lo tenemos aquí, una hora cuarenta y cinco.
Buenas tardes.
Mira, esto con mi peinado de aquí, ¿qué teníamos? Pues aprende CSS gratis, curso de CSS, de CSS desde cero para principiantes.
Vamos a ver otra vez, vamos a repasar cómo dejamos lo del box sizing, el modelo de la caja, porque eso es muy importante que lo entendamos.
Y a partir de ahí vamos a ver también lo que es el overflow, vamos a ver que el tema de desbordamiento, una cosa que da muchos problemas a mucha gente y de hecho el chiste más mítico de CSS viene por culpa del overflow.
Luego vamos a ver los diferentes position, porque la gente se hace un lío con los position.
¿Qué es esto de position static, absolute, sticky, fix? ¿Cuál es la diferencia de cada uno? Y vas a ver la diferencia y te juro que hoy los entiendes.
Hoy los vas a entender de una vez por todas y vas a decir, pues no era tan difícil, lo que pasa es que te lo estaban explicando mal.
Luego, ¿qué más? Vamos a ver también el z-index, una cosa que es muy compleja, pero lo vamos a simplificar al máximo y también lo vas a entender.
Y finalmente, flex, ¿vale? Flex es el modelo de la caja flexible que muchas veces a mucha gente le vuelve loco y también lo vas a entender súper fácil porque con ejemplos prácticos todo se entiende, se aprende y se valora.
Así que vamos a ver todos esos temas hoy aquí y vamos a empezar con el modelo de la caja que lo dejamos al final, pero lo vamos a repasar rápidamente solo para ver si ha quedado claro, ¿vale?
La semana pasada dejamos el modelo de la caja. El modelo de la caja de CSS es básicamente cómo se calculan el ancho y el alto de una caja, ¿no?
Cómo tenemos el contenido de una caja y aunque nosotros le decimos 100 píxeles por 100 píxeles de ancho y de alto, esto en realidad no mide exactamente eso y lo vas a ver.
Y lo cual, esto es uno de los grandes problemas que mucha gente tiene en CSS.
Si miramos cuánto mide esto, ¿vale? Vamos a poner cuánto mide. Fíjate aquí, verás aquí que sale la... pone la altura y anchura, pone 120 por 120.
Pero fíjate que aquí pone alto y ancho 100 píxeles.
¿Qué pasa? Que por defecto la caja en CSS es el alto y el ancho más el padding y el borde.
¿Qué significa esto? Que si tú pones un alto y un ancho de 100 píxeles y le dices que tiene que rodear un padding de 10 píxeles, esto ya va a ser 120 porque son 10 píxeles.
Arriba, abajo, izquierda, derecha. Aquí tienes un ejemplo súper bueno, ¿no?
Ves que tenemos el ancho y el alto de 100 píxeles y luego el padding.
Pero si le ponemos un borde, además, borde de 10 píxeles, esto lo que va a ocurrir es que va a hacer que nuestra caja, pues ahora ocupe 140 píxeles, ¿vale?
140 píxeles. El modelo de la caja, por defecto, se calcula así. Es el alto y el ancho más el padding más el borde.
¿Y esto por qué es un rollo? Porque te viene tu UX, tu amigo UX o amiga UX y te dice, yo quiero que este botón sean 150 píxeles.
Y claro, ¿qué haces? Pues tú dices, vale, pues 150 píxeles. Dices, vale, 150 píxeles, ¿vale? Y esto es un botón, ¿vale?
Dices, vale, genial, he hecho un botón aquí maravilloso y te dice, y tiene que ser de 24 píxeles.
Claro, tú haces esto, pero luego te viene la persona de UX y te dice, a ver, a ver, y dice, pero esto está mal, esto está mal.
Y es que resulta que aunque tú lo has puesto aquí 150 píxeles, resulta que la sección ocupa 190.
Y es por este problema, ¿no? El problema es que la medida que tú le estás poniendo, hay que sumarle el padding y el borde.
¿Cómo se arregla esto? Esto es como funciona por defecto.
Y muchas veces este problema, igual no lo encontráis porque por arte de magia y por algo todopoderoso,
resulta que se ha utilizado algún tipo de reseteo de CSS o alguna propiedad que hace que esto funcione de una forma distinta.
¿Y cómo funciona esto? Pues utilizando Box Sizing Border Box, ¿vale?
Y fíjate que ya cambia aquí bastante la cosa.
Por defecto, ¿cuál es? Es Content Box.
El Box Sizing, lo que mide la caja, viene por el Content Box, que quiere decir que vamos a sumar el contenido más el padding más el borde, ¿vale?
Y eso va a ser el ancho y el alto, va a venir por esa fórmula.
Pero si le ponemos Border Box, vamos a ver que nos cambia totalmente.
¿Y el Border Box qué quiere decir?
Pues que si tú aquí le pones que mide 150 píxeles, van a ser 150 píxeles.
Y si el ancho le dice que son 24, el ancho van a ser 40.
Aquí, 40.
Bueno, ¿por qué pasa esto? Mira, esto es súper interesante.
Esto pasa justamente por el tema del Overflow, ¿no?
Aquí podemos ver que pone 40 porque en realidad lo que está haciendo es que el texto ocupe un poquito más.
Pero aún así podríamos llegar a un momento en el que ahora realmente sí que no vamos a ver ningún...
¿Ves? Si ponemos 64 cuando ya el texto ocupa menos, pues vamos a ver que sí que son 64, ¿vale?
Esto del texto está bastante interesante porque por defecto veis que esto funciona así.
O sea, el texto se sigue viendo y por lo tanto la altura se ve que tiene un efecto en justamente esto.
También tened en cuenta una cosa.
Si se cuenta el padding y el borde, claro, el padding son 10 más 10 porque es arriba y abajo, más 10 del borde más 10 arriba y abajo, serían 40.
O sea que si vosotros le ponéis 14 píxeles, 24 tal, como mínimo tienen que ser 40 porque ya el padding y el borde son 40.
Aunque vosotros pongáis una altura e intentéis forzarla de que sea un píxel, si el padding y el borde ya es más, pues ya va a ser esa altura, ¿vale?
Eso utilizando el border box.
Tened en cuenta esto, ¿vale?
Ya la altura mínima va a tener que ser la que tenga el padding y el border y vas a ver que en cuanto yo suba esto, fíjate que ya sí que va empujando esto, ¿ok?
Entonces, ahí ya lo tenemos y ya tendríamos este problema solucionado.
Así que ya sabes cómo funciona el box sizing border box.
Y es el que sé, porque mucha gente, y esta es una pregunta que muy poca gente sabe la respuesta o la entiende.
Porque alguien dirá, si todo el mundo carga esto, ¿sabes? Todo el mundo pone el box sizing, todo el mundo carga esto.
¿Sabes? Todo el mundo, el box sizing border box, box sizing border box.
Vais a ver que en todos los sitios, mira, ¿qué es y para qué sirve? Mira, está mi dudé.
Pero este, este fue el artículo que en 2012, en 2012, popularizó el tener que utilizar box sizing border box.
Y entonces la pregunta del millón que muchas veces mucha gente se hace, sobre todo gente que no es, que no sabe mucho CSS es, oye, o no sabe cómo funciona el mundo del desarrollo web es,
Oye, ¿y por qué tenemos que aplicar esto a todas nuestras páginas web? Si lo hacemos constantemente esto, oye, ¿por qué no, por qué no lo cargamos por defecto?
¿Por qué los navegadores no lo cargan por defecto? Y la respuesta es la retrocompatibilidad.
Esto es una cosa que apareció en 2012. Tú imagínate que de repente, por lo que sea, ¿vale?
Imagínate que aquí cambiamos, por defecto es esto. Y de repente los navegadores dicen, no, ahora el alto y el ancho se calcula así, ¡pum!
Pues imaginad la de páginas web que se iban a romper de golpe, millones y millones de páginas web.
Entonces, muchas veces, aunque ahora queramos trabajar así, lo cierto es que por defecto no trabaja así.
Solo tenemos que añadir, ya sea de forma indirecta, si utilizas Tailwind, ya añade esto sin que tú te des cuenta,
pero ya sea de forma directa, que tú lo tengas que añadir. Y la razón por la que no la añaden los navegadores es retrocompatibilidad.
Que amigos y amigas, esta es una de las razones por las que muchas veces tanto JavaScript como CSS como HTML
tienen que evolucionar teniendo en cuenta todo lo que tienen detrás. Algo que no hay ningún lenguaje ahí fuera que tenga que ocurrir.
Porque pueden trabajar con mayors, cosa que con estos tres lenguajes es un poquito más complicado.
También trabajan con mayors, pero normalmente son 100% retrocompatibles, porque si no romperían muchas páginas web, ¿vale?
Solo para que lo sepáis.
Ahora que ya tenemos esto, vamos a ver un caso muy típico.
Imaginad que teníamos este ejemplo aquí, esto es una caja, 100 píxeles y todo esto.
Vamos a poner el borde, vamos a utilizar el border box, ¿vale?
Vamos a ponerle que sea un poquito más grande.
Y un error muy típico que tenemos aquí es el tema del desbordamiento.
Y esto es uno de los memes de CSS. Por ejemplo, este de CSS is awesome, ¿no?
Seguro, estoy seguro que esto lo has visto alguna vez en alguna camiseta o lo que sea.
Imaginad que tenemos el font size y lo hacemos muy grande, ¿vale?
¡Pum! ¿Qué pasa con esto?
Que fíjate que el texto está saliendo de la caja, está desbordando.
Esto ocurre cuando nosotros tenemos un tamaño fijo de una caja, pues nos podemos encontrar que el contenido no cabe en esta caja.
Esto os habréis pasado un montón. Seguro que habéis visto alguna taza, alguna camiseta y tal, ¿vale?
Es el chiste típico. CSS is awesome y aquí sale el awesome, ¿no?
Bueno, hay que entender que este meme, que la verdad es que está bastante divertido, en realidad ocurre por no saber CSS.
CSS, porque CSS sí que soluciona esto y hay diferentes formas de solucionarlo.
El tema es que si tú le estás forzando el alto y el ancho, es normal.
Claro, si pasase al revés, también le harían memes.
Si pasase al revés, haría otro meme.
Porque imagínate que tú le pones un texto, tú le has dicho, esto tiene que ser de 150 por 150.
Y le pones un contenido y se lo salta, ¿verdad?
Pues el tema es que también sería al revés un problema.
Al final tiene que tomar prioridad sobre uno de los dos.
Y la prioridad se la da a la altura y la anchura que tú le has dicho.
Esto es lo que se le llama un desbordamiento.
Y hay diferentes formas de solucionarlo, ¿vale?
Entonces, ¿cómo se soluciona esto?
Por defecto, cuando un contenido desborda, ¿qué se hace?
¿Cómo está funcionando?
Está funcionando como un overflow visible.
Que es lo que justamente está pasando.
Este sería el valor por defecto.
Está haciendo que el overflow, o sea, lo que está desbordando, es visible.
Esto es por defecto porque, si no, podríamos tener un montón de problemas.
Pero, obviamente, tenemos otros valores también.
Este es que el contenido no es recortado y se dibuja fuera de la caja contenedora.
Pero tenemos otros.
Por ejemplo, tendríamos el de hidden.
El de hidden directamente lo que hace es, oye, el contenido lo vamos a recortar y no lo puedes ver de ninguna forma.
Está ahí porque está ahí, pero no lo vamos a mostrar.
Y esto muchas veces se utiliza justamente para eso, para evitar que una vez que sale y se desborda el contenido, pues que aparezca mal por ahí en medio, ¿ok?
Ahora, hay veces que, pese a todo, nos gustaría poder acceder a ese contenido.
Fíjate que aquí no podemos acceder a ese contenido.
No podemos ver qué es lo que hay debajo de esto, ¿no?
No sabemos, no hay forma de ver ese contenido debajo de esto.
No lo podemos ver.
Entonces, ¿qué podemos hacer?
Otra solución es el de scroll.
Scroll lo que hace es recortar el contenido y el navegador web va a utilizar unas barras de desplazamiento donde se haya recortado el contenido, si es que se ha recortado o no, ¿vale?
Y esto lo que va a hacer es prevenir que aparezca afuera, pero vas a poder moverte por dentro gracias a las barras.
Fíjate que tenemos unas barras tanto horizontales, porque el contenido sale tanto de izquierda a derecha, de forma horizontal, como vertical, ¿vale?
Así que así sería con el workflow scroll.
Pero imagínate, si tú tienes el visible, sale así.
Si le pones el hidden, está ahí el contenido, pero no puedes acceder, no puedes scrollear.
Y entonces tendrías el scroll, que recorta exactamente igual, pero ahora sí que te pone unas barras para poder moverte.
Y además de esto, teníamos uno más que sería el auto, que si vas a utilizar scroll, normalmente es el recomendado.
Por auto, ¿qué quiere decir? Pues que dependiendo del navegador, lo que van a hacer es poner las barras de desplazamiento, pero igual en otro dispositivo no pone barras, lo pone de otra forma.
O sea, lo va a hacer de forma automática, depende cómo sea el desplazamiento en ese sitio.
Normalmente son barras, ¿vale?
Pero lo digo por si ves el auto, que sepas que se trata de esto.
Y lo interesante del auto es que, si por lo que sea, si tú pones el scroll, le estás forzando ya que siempre salgan las barras.
Y en Windows es posible que, si por lo que sea esto sí que cabe aquí, imagínate que solo pones esto,
puede ser que en otros navegadores veas aquí la barra, pero la veas desactivada.
Entonces, hay veces que te interesa más el auto porque va a determinar automáticamente si tiene que mostrar las barras o no,
si es que hay desbordamiento o no.
Por eso te recomiendo que siempre que quieras que salgan las barras, utilices el auto.
Porque va a determinar si tienen que salir las barras o no tienen que salir las barras, ¿vale?
Y el tema de que desaparezcan las barras, eso también tiene que ver con el navegador.
Yo porque estoy utilizando MacOS y por eso ni siquiera aparecen las barras.
Solo aparece cuando te están moviendo, ¿vale?
Cuando te mueves, entonces sí que aparece.
Pero en el caso de otros, igual siempre salen las barras aquí a la derecha pegadas.
Depende del sistema operativo y depende del dispositivo incluso, ¿vale?
Solo para que lo sepas.
¿Y qué más se puede hacer?
Pues pensad que una vez que tenéis este tipo de cosas, por ejemplo, si ponéis el overflow hidden, ¿vale?
También se pueden llegar a hacer otras cosas.
Por ejemplo, está el text overflow que lo que te permite es indicarle cómo se tiene que intentar evitar que aparezca la información.
Claro, aquí no se ve casi. Voy a hacerlo un poquito más pequeño para que lo veáis.
Pero, ¿ves? Si no cabe, lo que hace ese overflow hidden es que le puedes decir, vale, voy a ocultar el contenido que desborda la caja,
pero si es texto, quiero que el desbordamiento termine con un elipsis.
Y por eso me pone estos tres puntos suspensivos.
Fíjate la diferencia.
Si pones esto, te lo corta así, a saco, pero puedes utilizar para el texto el text overflow ellipsis,
que lo que hace es, vale, he detectado que este texto va a desbordar y lo que voy a hacer por lo tanto es ponerle puntos suspensivos
para que ese contenido quede claro que no cabe, pero no lo voy a recortar de golpe, sino que voy a poner puntos suspensivos y ya está, ¿no?
Por defecto, el text overflow también tiene un valor, que es clip, que es este que vemos aquí.
El text overflow clip lo que quiere decir es simplemente recortar donde sea y ya está.
Y luego tendríamos el de elipsis. Por desgracia, que lo sepas, esto te lo comento para que sepas sobre el futuro de CSS,
pero que sepáis que en el futuro la idea es que esto puedas poner aquí un símbolo.
Esto no funciona todavía, ¿vale? Esto todavía, por desgracia, no funciona, pero la idea, ¿ves que pone sintaxis clip ellipsis y pone aquí string?
Es porque en el futuro la idea es que tú puedas poner un text overflow y aquí poner lo que quieras, ¿vale?
Puedas poner un símbolo, puedes poner lo que quieras, pero como ves todavía no funciona, por desgracia.
Así que hay que tener un poquito de paciencia.
Pero con esto ya sabes al menos cómo puedes tratar los desbordamientos en CSS.
Algo que ocurre cuando el ancho y alto que tiene tu caja no es capaz de contener todo el contenido que le has puesto, ya sea imágenes, texto, texto o lo que sea.
No se podría poner un leer más. Se podría poner cuando se pueda, podrías hacer esto, pero el problema es que con CSS a día de hoy no se puede.
Tienes que utilizar solo ellipsis. Y lo tendrías que hacer más con JavaScript, entonces.
¿Se puede estilar la barra? Se puede estilar la barra. La barra se puede estilar con CSS, scrollbar, CSS, playground.
Lo podéis buscar por aquí, hay playgrounds. ¿Ves? Esta, por ejemplo. Y aquí podéis ver que se puede estilar.
Por ejemplo, podéis decir que sea más finita, que no tenga borde, que yo que sé. Le podéis cambiar los colores, podéis cambiarle el borde a radius, ¿vale?
Más borde a radius. Podéis hacer que tenga más altura, ¿ves? Que sea más ancha. Más lo que queráis. Le podéis hacer lo que queráis.
Ahora bien, yo no es una cosa que os recomiende mucho, ¿vale? Porque el problema de estilarlo es que...
Mira, también esta que pone Feral. Esta también está muy chula. ¿Dónde os recomiendo estilar la barra?
Yo la barra solo la estilaría en cajas internas. O sea, en esta tiene sentido porque está dentro.
Pero una barra a nivel de página web yo no la estilaría, en mi opinión, ¿eh? Para que lo sepáis.
Para que lo sepáis. ¿Se puede detectar con JavaScript si un texto es completamente visible?
Creo que no se puede, no se puede. Creo que no se puede con CSS hacerlo. Creo que no.
Lo tendría que mirar, pero que yo recuerde, no se puede. No te devuelve ya CSS algo para decirte,
sí, estoy utilizando esto. Sería increíble, pero por desgracia no. Habría que hacer alguna magia negra, por desgracia.
Vamos con otro tema interesantísimo del CSS. Esto muchas veces da problemas porque mucha gente se vuelve loca.
Y hoy lo vas a aprender. Ya has aprendido el desbordamiento, que está muy interesante.
Pero te voy a explicar hoy la magia del position. Voy a poner una cajita por aquí.
Me voy a copiar este HTML que tengo por aquí. Y voy a poner este CSS.
CSS que ya más o menos es parecido. Pero es solo, más que nada, para que veamos una cosita.
Imagínate que tenemos este CSS. Lo voy a hacer un poquito más pequeño para que lo veáis bien.
Vamos a hacer esto aquí. Y ahora te explico cómo es esto.
Vamos a hacer esto un poquito más pequeño.
Vale, imagínate. Tenemos aquí, voy a poner en el body, vamos a poner un color así.
A ver, esto tiene... Sí, qué bien. Qué maravilla.
Pues algo así. Vale.
¿Qué es lo que tenemos? Lo que tenemos aquí es una section, ¿vale?
Que tenemos un borde de 5 píxeles de color negro y una altura y una anchura de 250 píxeles.
Le vamos a poner el box sizing a border box.
Y fíjate que ha cambiado un poco porque así nos aseguramos que son 250 píxeles.
Y dentro tenemos un div con la clase container que...
Ahora aquí voy a ponerle container para que veamos que es un container.
Y que básicamente tiene el fondo de color azul, la caja de 100 píxeles, 100% y ya está.
¿Cómo funcionan las posiciones en CSS?
Y esto es súper importante.
Los elementos de CSS se posicionan por defecto de forma estática.
¿Y qué quiere decir?
Pues lo que quiere decir simplemente es que se quedan donde están definidos en el HTML
y se van apilando, dependiendo de diferentes cosas, pero se van apilando.
O sea, no hay ninguna historia.
Aquí como tenemos un section y dentro tenemos un div,
pues como puedes ver dentro del section este tenemos el div.
No hay ningún tipo de magia.
Está directamente, directamente está puesto donde le corresponde.
De forma estática.
Ya he determinado que hay una etiqueta dentro de otra etiqueta y ya está.
No se ha posicionado de una forma mágica, no ha hecho nada.
Es como lo pondríamos de forma totalmente normal.
Esto es como funciona por defecto.
Y a esto se le llama position static, ¿vale?
Toma su sitio y ya está.
Si pondríamos otro div, pues esto lo que haría es simplemente ponerlo justo debajo,
justo después y seguiría estando dentro del section, ¿vale?
Perfecto.
Esto es como funciona por defecto, que está muy bien, es muy divertido,
pero hay diferentes formas de indicar que nuestros elementos se tienen que posicionar con CSS.
Uno de los más importantes, por defecto tenemos el position static,
pero uno de los más importantes es absolute.
¿Y qué quiere decir que sea absoluto?
¿Absoluto a qué?
Bueno, si ponemos el position absolute, fíjate que parece, parece que no ha ocurrido nada.
No ha pasado, no ha pasado nada, no ha cambiado nada.
Y es que por defecto su posición donde tendría que ir este elemento section es ese,
aunque tengamos la posición absoluta.
Pero cuando ponemos que la posición es absoluta,
nosotros lo que vamos a poder hacer es determinar sus coordenadas en el documento.
Le vamos a poder decir, oye, pues ahora quiero que el top esté en la posición cero, ¿vale?
Posición cero.
Y el left, ah, es que lo, perdón, perdón.
Es que además lo estoy poniendo donde es.
Lo voy a poner en el container, ¿vale?
Para que lo veamos mejor.
Ahí está, ¿vale?
En el container.
Y ahora, el container es la caja azul.
Y ahora le vamos a decir que el top le vamos a poner cero.
¡Ojo!
¿Qué ha pasado aquí?
¿Qué ha pasado aquí?
Se ha salido de la caja.
Y ahora le decimos left cero, ¿vale?
Fíjate dónde me la ha llevado.
Si le digo, no, la posición right cero.
¿Qué quiere decir esto?
Cuando decimos top cero, lo que quiere decir es que del punto de más arriba en el punto cero píxeles.
El punto de más arriba de cero píxeles, obviamente, es aquí.
Ahora, cuando decimos derecha cero, lo que queremos decir, empezando de la derecha, empezaríamos en la posición cero.
Y cuanto más le digamos, ¿vale?
Por ejemplo, 10 píxeles, sería 10 píxeles desde la posición más a la derecha.
50 píxeles desde la posición más a la derecha.
Y lo que estás viendo es que está empujando.
Y este espacio que ves aquí son los 50 píxeles.
Incluso podrías utilizar porcentajes.
Claro, un 50% se supone que debería ser un 50%.
Lo que pasa es que aquí hay que tener en cuenta que el ancho de la caja también determina esto.
O sea, el punto que ves aquí, este punto que ves aquí, es el que se ha quedado en mitad.
O sea, lo está posicionando bien, pero visualmente igual tú no lo ves así.
Igualmente, lo que está haciendo el Position Absolute es que de forma absoluta,
saltándose totalmente cualquier control que tuviésemos de cuáles eran los alimentos HTML que estaban conteniendo esto,
lo está posicionando, ¿vale?
¿Qué pasa aquí?
Bueno, que obviamente este Position Absolute se está posicionando respecto aquí.
Pues respecto al documento.
Como puedes ver, si le ponemos Write 0, Top 0,
¿ves? Se está pegando arriba a la derecha.
O sea, lo está posicionando relativo a todo el documento, ¿ok?
¿Qué pasa?
Que nosotros muchas veces vamos a querer que esto se posicione respecto a otras cosas.
Por ejemplo, yo me gustaría que esta caja yo moverla dentro,
pero no la quiero mover de todo el documento, la quiero mover dentro de esta cajita.
Pues imagínate que lo queremos poner abajo a la izquierda, ¿vale?
Abajo a la izquierda.
¿Veis? Se ha quedado aquí.
Joder, aquí.
No, aquí.
Aquí.
Se ha quedado aquí, ¿no?
¿La veis aquí?
Aquí está la cajita.
Pero imaginad que la quiero poner realmente aquí dentro.
¿Cómo podríamos conseguir esto?
Pues para eso tenemos otro Position que se llama Position Relative.
¿Qué hace el Position Relative?
Lo que ocurre con el Position Relative es que estamos creando un punto relativo
para que cualquiera de nuestros hijos pueda tomarlo como referencia.
Cuando tenemos un Position Absolute va a estar buscando a todos los padres,
a su primer padre, al abuelo y si no, al documento.
Va a estar buscando en todos los elementos HTML cuál de ellos es el elemento relativo.
Cuando no encuentra ningún elemento relativo,
lo que va a pasar es que va a utilizar el documento como referencia.
Pero ¿qué pasa?
Que hay muchas veces que vas a querer utilizar esto,
vas a querer moverlo dentro de esta caja.
Por lo tanto, necesitas un punto de referencia relativo.
Así que al padre, ¿vale?
Este section que sería el padre,
de hecho vamos a ponerle aquí Parent, ¿vale?
Vamos a ponerle Parent para que lo veas más claro.
Vale, pues vamos a ponerle el Position Relative
y esto nos va a permitir que cualquiera de nuestros hijos
ahora se puedan posicionar de forma relativa a ese.
Así que el container ahora, por ejemplo,
imagínate que lo quiero poner aquí arriba a la derecha.
Pues le ponemos Write 0 y Top 0.
Pero fíjate que ahora esas coordenadas siempre son relativas
al padre que está envolviendo este container, ¿vale?
Así que por eso es súper importante el Relative.
El Relative en realidad tiene mucha importancia
porque si vosotros siempre intentáis utilizar el Position Absolute
vais a ver que no tiene ningún tipo de sentido.
Vais a estar viendo que entonces no funciona correctamente.
Va a ser muy difícil que de forma absoluta
siempre estéis constantemente moviendo cosas en el documento.
Necesitáis pues este tipo de referencias relativas
para poder posicionar correctamente, ¿vale?
Así que aquí tendríamos el Relative funcionando
para que veáis que tiene su sentido.
Una cosa muy interesante de justamente el Position Absolute
es que también podríais llegar a centrar un Deep.
Y esto es una cosa que se puede utilizar mucho para modales, ¿vale?
Muchas veces me dice, ¿cómo centrar un Deep y tal?
Pues mira, aquí tendríamos una forma correcta, ¿vale?
Mira, fíjate.
Imagínate que tenemos este Position Absolute aquí
con el Right 0, Top 0.
¿Pero qué pasa?
Imagínate que dices, vale, quiero que sea
que esté lo más arriba a la derecha posible
y lo más abajo a la izquierda posible, ¿vale?
Fíjate dónde se ha puesto ahora.
Se ha puesto aquí y dices,
ostras, si yo le he dicho que tiene que estar a la derecha del todo,
arriba del todo, abajo del todo y a la izquierda del todo,
¿por qué me lo pone arriba a la izquierda, no?
Bueno, lo que está pasando es que en realidad
necesitaríamos decirle que los márgenes
tienen que estar automáticos.
Y fíjate dónde te ha dejado el Deep.
Te lo ha dejado en el centro.
Porque ha detectado que si tiene que tener
la misma distancia por todos los sitios
y le dices que el margen que tiene que utilizar
es automático,
lo que va a pasar justamente aquí es centrarlo.
Ahora bien, ¿esta es la forma que tendrías que centrar un Deep?
No.
Esta es una forma que puede ser interesante a veces,
por ejemplo, para modales.
Para modales, para diálogos y cosas así.
Pero vas a ver que hay otras formas mucho más sencillas
y más recomendadas para centrar contenido.
En este caso,
si es un contenido que va a quedar por encima
de toda la página web,
esto puede tener sentido.
Pero te recomiendo que no lo hagas.
De hecho, hay una forma todavía más corta de hacer esto
y es que tienes la posibilidad de utilizar
la propiedad Inset 0,
que es una forma corta de decirle
tanto arriba, abajo, izquierda, derecha.
¿Vale?
Inset 0.
Y así estarías haciendo exactamente lo mismo
y con el margin auto ya lo tendrías.
¿Vale?
Así que ahí lo tienes.
No es la mejor forma,
pero es una forma de lograrlo.
Que siempre es importante saber todas las formas posibles
y ya os digo que esta puede ser interesante
en algunos casos.
¿Vale?
Ya hemos visto tanto la de position absolute
y hemos visto position relative,
que ya veis que tiene bastante sentido.
Vamos a ver la tercera,
que también es bastante interesante,
que es position fixed.
Que esta es muy chula.
Mirad.
Imaginad que vamos a tener más contenido
para que aquí tengamos un scroll típico.
¿Qué es lo que hace el position fixed?
El position fixed lo que hace es parecido al absolute.
Lo vamos a poner aquí en el container.
Vamos a ponerle el fix.
¿Qué pasa?
¡Pum!
Fíjate lo que ha pasado.
Que me lo ha dejado aquí.
¿Vale?
Me lo ha dejado aquí.
Vamos a quitar esto del inset.
Vamos a poner que se quede arriba
y a la derecha.
¿Vale?
¿Y qué pasa?
A ver, el fix es parecido al absolute,
pero como puedes ver,
no se mueve al hacer scroll,
ya que se queda fijo en pantalla.
Así que las coordenadas que le vamos a poner aquí,
en el top y el right,
van a ser relativas,
no al padre,
que ponga relative,
no al documento,
sino a la pantalla.
¿Vale?
A la pantalla.
Se va a quedar fija en el viewport.
Si le pones top 0,
right 0,
lo que va a ocurrir es que se va a quedar fija
en el viewport en esa posición.
¿Vale?
Así que este position relative que tenemos aquí,
en realidad,
no sirve ahora mismo para nada.
Porque conforme vas a tener esto aquí,
fíjate que se queda,
aunque tú scrolles,
se queda siempre en la misma posición.
Y aquí,
ten en cuenta la cosa,
que aquí tenemos tres elementos.
Tenemos este de aquí,
este de aquí,
y este de aquí.
Para que lo vean más claro.
Fíjate,
ahí tienes el container,
pero si le doy a inspeccionar,
vas a ver que en la misma posición
tenemos estos tres elementos.
Este container tiene,
claro,
como tiene el fix y tiene que quedarse ahí,
tenemos tres elementos ahora mismo que están ahí.
Y fíjate,
con el scroll se queda exactamente igual.
O sea,
el position fix es fijo en el viewport.
Las coordenadas que le vas a poner
son las coordenadas como de la pantalla,
¿no?
De la ventana.
No se ve ni aplicado,
no le afecta ni el scroll,
ni si tiene un padre que sea position relative,
nada de esto,
¿vale?
Así que position fix significa,
este elemento quiero que quede fijo
y que no importa el scroll que haga,
que siempre se quede ahí.
¿Para qué puede ser útil este?
El fix puede ser útil,
por ejemplo,
habrás visto muchas veces abajo a la derecha
que ponen una ayuda de chat
para hacer el soporte técnico de chat
y lo ponen abajo a la derecha.
Pues para eso puede ser interesante.
Mira,
te voy a poner un ejemplo
de para qué se puede utilizar el fix.
En mi página de Midudev,
cuando tú entras,
fíjate que aquí abajo,
¿ves?
Aquí abajo hay como...
Midudev no dispone de conexión,
que es mentira,
porque sí que estoy conectado.
Pero ves,
cuando tú haces scroll,
aunque esto se queda aquí,
fijo,
se queda siempre aquí,
¿no?
Así que esto,
por ejemplo,
sería con un position fix.
También,
¿dónde puede ser interesante?
Con los menús estos que tienes.
O también,
seguro que has entrado
a alguna página web
que abajo del todo
te aparece un menú
y está fijo.
Por ejemplo,
en el AppNGS...
Ah,
AppNGS no,
perdón.
En aprendeyavascript.dev
aquí verás
que cuando esto lo ves
en modo móvil
tienes fijo
un menú abajo en la pantalla.
Vale,
aquí,
a ver...
Ah,
ostras,
no sale.
Ay,
me ha dejado fatal.
A ver,
pensaba que salía un...
Hostia,
no sale el menú.
No sé si es porque
en modo...
Pensaba que debería salir un menú.
Juraría que en móvil
salió un menú.
Igual lo he roto,
igual lo he roto.
Pero debería salir
un napbar.
No sé por qué,
no sé si es que dice
el que lo detecte
de una forma distinta,
pero debería salir.
Si no lo arreglaré.
Pero bueno,
el napbar ese típico
que ponen
también sería fijo.
Hay uno muy chulo,
muy chulo
que vais a ver
que es la leche
y vais a entender,
por fin vais a entender
cuál es la diferencia
entre fix y sticky.
¿Vale?
Porque sticky
es una cosa
que mucha gente
se confunde
con el fix,
pero son muy diferentes
y cada uno
muy interesante.
¿Vale?
¿Qué hemos dicho?
El fix se queda fijo
en pantalla
y no le afecta
el position relative.
¿Pero qué pasa?
Que tenemos otro
que se llama sticky.
¿Vale?
Fíjate el sticky
que es diferente.
Fíjate que ya
solo cambiarlo
ya cambia.
¿Por qué?
Porque el sticky
no se va a quedar
siempre fijo
en pantalla
sino que va a ser
y va a depender,
se va a quedar
pegado al contenedor
¿Vale?
Y va a tener
va a tener en cuenta
lo relative
y va a decir
vale,
yo voy a dejar
mi posición
siempre que pueda
dentro del contenedor
en el que estoy
y vas a ver ahora
la diferencia.
¿Vale?
Imagínate este
position sticky.
Fíjate,
fíjate que scrolleo
y mira lo que le pasa
a este container.
Fíjate
¿Qué está pasando?
Lo que está pasando
es que lo está
empujando.
Fíjate que lo hago así
y lo empuja.
Si fuésemos a más
vamos a hacer que esto
sea como más
vamos a hacer que tenga
más altura
para que lo veamos bien.
¿Vale?
Pero fíjate
vamos a poner
100
no
igual deberíamos
sí, vamos a poner 100.
Vale, imagínate
yo voy scrolleando
y fíjate que esto
lo que está haciendo
es quedarse ahí pegado
hasta donde puede
hasta donde puede
del contenedor
en el que se encuentra.
Fíjate
ves que no sale
no sale
esto es súper chulo
porque muchas veces
lo que puedes poner aquí
por ejemplo
esto lo habrás visto
en un montón de sitios
y esto solo con CSS
lo que significa sticky
es que se está quedando
pegado
al contenedor
en el que está
por lo tanto
no es que sea fijo
como lo hemos visto antes
¿no?
El fix
lo que estaba pasando
era esto ¿no?
Que se estaba quedando
donde no era
pero ahora lo que está haciendo
es quedarse fijo
donde debe ser
en el contenedor
también es verdad
que claro
aquí hay un tema
y es que
te habrás dado cuenta
que debería ser
position relative
porque si no
no debería funcionar
pero lo que ves
es que se queda hasta aquí
se queda hasta aquí
y ahí
como ve
dice
ah ya no puedo más
pues ahí me quedo ¿vale?
no continúo
y aquí igual
aquí se queda aquí
y entonces empuja
empuja
empuja
hasta que llega al siguiente
y ahí lo tendríamos
o sea que este sí que es importante
que entiendas
que tiene que ver
con el contenedor
en el que se encuentra
o sea no tiene nada que ver
con el fix
puede ser que visualmente
en algún momento
tenga alguna cosa
que digas
ostras
esto sí que
sí que le afecta
de alguna forma
pero que tengas en cuenta
que no tiene ningún tipo
de sentido
no se parece absolutamente
en nada ¿vale?
así que no tiene absolutamente
nada que ver
ese sería el position sticky
así que ya tenemos
el fix
el absolute
el relative
y el sticky
ya teníamos todos los diferentes
el static
es el que es por defecto
o sea el static
no tiene ningún tipo
de misterio
el absolute
ya lo habéis visto
que sería relativo
al primer contenedor
que fuese relative
que si no encuentra ninguno
sería el documento
tendríamos el relative
que no solo el relative
puede ser importante
en cuanto a posición
sino también de z index
que eso lo veremos
más adelante
y luego también
teníamos el fix
que puede ser interesante
para dejar fijo
algo en pantalla
respecto al scroll
y luego el sticky
para que se quede ahí
enganchado
ahora lo que vamos a ver
es el z index
porque vamos a ver
vamos a hacer una cosa
con el fix
aquí teníamos el fix
el fix
el fix
y vamos a quitar todo
no sé si quitar
o poner
aquí 500
vale
aquí el del fix
vamos a poner
no sé si había puesto
bottom
vale
vale
fíjate en el fix
que pasa una cosa
muy curiosa
fíjate aquí en el fix
pasa una cosa
bastante curiosa
fíjate que aquí
podemos ver
que queda por encima
de uno
pero por debajo
del otro
queda por debajo
del primero
pero queda por
no queda por debajo
del segundo
pero por encima
del otro
que está pasando
con este container
que cuando le hemos puesto
este fix
vamos a poner solo
uno
vale
este fix
que se queda ahí fijo
que parece justamente
el sticky
pero fíjate
que se queda así
el fix lo que hacía
era quedarse pegado
a pantalla
lo voy a poner a la derecha
para que lo veáis bien
vale
pero fíjate
que se queda ahí
y lo tenemos aquí
justamente
que queda por encima
de uno
pero por debajo
del otro
que es lo que está pasando aquí
esto lo que está pasando
es otra de las cosas
más complicadas
que ocurren
en el mundo
de css
vale
y es básicamente
el contexto
de apilamiento
que quiere decir esto
a ver
nosotros
en realidad
vemos las páginas web
que parece
que son 2d
parece que es una caja
que la tienes ahí
y dices
bueno esto es un plano
que está como si fuese un papel
y estás dibujando encima
pero no es exactamente así
te tienes que imaginar
que nosotros cuando vemos
los elementos
puede estar uno
por encima del otro
y en realidad
si fuésemos capaces
de rotar
la pantalla
deberíamos ver
en realidad
que tenemos elementos
que están por encima
de otros
y que realmente
sí que hay
como profundidad
en estos elementos
tenemos una capa
encima de otra
así que
digamos que
el apilamiento
cuando decimos
del contexto
de apilamiento
lo que quiere decir
es el concepto
de que en realidad
los elementos html
que vemos dibujados
son en 3d
por lo tanto
hay un eje z
un eje de profundidad
es un eje
imaginario
porque no lo vemos
cuando vemos las páginas web
pero
aunque el usuario
lo ve todo plano
en realidad
tenemos que pensar
que realmente
sí que hay una profundidad
y que en esa profundidad
los elementos
están ocupando
un espacio en html
porque aquí
lo podemos ver claramente
aquí podemos ver
que este container
está pasando
por encima de uno
pero por debajo del otro
o sea
¿cómo podría pasar esto?
pues justamente
por el contexto
de apilamiento
el contexto
de apilamiento
¿cómo se forma?
es bastante complicado
pensar de cómo se forma
pero voy a intentar
hacer un poquito
un resumen
el elemento raíz
crea un contexto
de apilamiento
cuando un elemento
tiene una posición
relativa
con un valor
de z index
distinto al auto
que ahora lo veremos
crea un contexto
de apilamiento
cuando tiene
un elemento flex
cuando tienen
elementos de
transfer
opacity
que sean diferentes
a los por defecto
por lo tanto
cuando pasan
este tipo de cosas
crea un nuevo contexto
y por lo tanto
puede tener un elemento
encima de él
¿vale?
hay un montón de casos
y como no me lo voy a saber
de memoria
os voy a decir una lista
muy buena
donde lo vais a encontrar
que es esta
en el contexto
de apilamiento
mira aquí tenéis
elementos con opacity
transform
mix blend
filter
perspective
isolation
position fix
hay un montón
¿vale?
un montón de formas
de crear
contextos de apilamiento
aquí justamente
estamos creando uno
porque fíjate
que lo pone aquí
pone position fix
¿ves?
position fix
¿qué está pasando aquí?
pues aquí tenemos
el position fix
ahora cuando esto ocurre
cuando se están apilando
una capa encima
de la otra
lo bueno
es que tenemos
una forma
de nosotros
determinar
qué capa
es la que tiene que quedar
por delante
de la otra
¿vale?
o sea
no es que esto
lo hacemos así
y ya decimos
bueno
pues ya está
no hay nada que hacer
¿qué le vamos a hacer?
no se puede arreglar
no
realmente sí que lo podemos
arreglar de una forma
y para eso
podemos utilizar
la propiedad
z-index
lo que está pasando aquí
¿qué es lo que está pasando aquí?
¿por qué en uno queda por debajo
y el otro queda por encima?
lo que está pasando
es que el primero
fíjate que en el primero
la caja azul
queda por encima del borde
en la primera
lo que está pasando
es que este container
es el que corresponde
con este
con este container
de aquí
este de aquí
y este container
de aquí está dentro
de este section
este section
es el primer borde
que podéis ver
el primero
que se queda por encima
y ahí
obviamente
el elemento
que está dentro
sí que por defecto
los elementos
que están dentro
de otro elemento
quedan por delante
de ese elemento
porque obviamente
es importante
que el contenido
siempre quede
por encima
del contenedor
esto es típico
imagínate que tienes
una caja
con un fondo blanco
¿vale?
y le pones un texto
¿qué esperarías?
¿que el texto
quedase por detrás
o por delante?
obviamente
esperarías
que el texto
quedase por delante
así que por defecto
siempre
y esto es muy importante
cuando lo entiendas
de por qué
quedan por encima
o por detrás
¿no?
es el hecho
de que
siempre vas a querer
que el contenido
tenga
una zeta
mucho mayor
para que esté
como más cerca
del usuario
y lo pueda ver
el ejemplo
del texto
es el más típico
pero puede ser
una imagen
puede ser más contenido
puede ser lo que sea
¿vale?
¿por qué en el segundo
queda por detrás?
¿por qué en este
fíjate
ves
en el segundo
queda por detrás
lo que está pasando
en el segundo
es que ya estamos
viendo aquí
el segundo section
y el segundo section
está separado
de este contenido
es como que
este div
está quedando
por detrás
de este section
y es que
tiene sentido
porque no es su hijo
no es su hijo
por lo tanto
ya tiene
un nivel
de z
que sería
mayor
pero nosotros
podríamos forzar
que quedase por delante
podríamos decirle
que los contenedores
el índice de z
sea 10
por ejemplo
¿vale?
10
¿qué quiere decir este 10?
¿qué quiere decir este 10?
a ver
lo que les estamos dando aquí
es un número
como para decirle
la prioridad
¿no?
la posición
que tendría que tener
en ese eje
de profundidad
que decimos
si le quitamos el z
por defecto
vemos que ya ha hecho
un cálculo
en el que ha dicho
vale
cuando es mi hijo
es normal
que quede por delante
pero en el siguiente
pues voy a hacer
que quede por detrás
de hecho
podría quedar
incluso totalmente
tapado
si aquí le ponemos
background
fff
vamos a ver
que esto todavía es peor
¿no?
¿veis?
está quedando por detrás
y ya desaparece
pero lo podríamos decir
es bueno
aunque tú tengas
un z index
por defecto
lo cierto es que
este container
quiero que tenga
como más
más
importancia
en el z index
y quiero que quede
por delante
entonces por defecto
lo que le estamos diciendo
es que este
tendría que tener
un z index
de 2
pero por defecto
el otro
tiene uno menor
por lo tanto
lo que vamos a hacer
con esto es conseguir
que quede
por delante
este z index
muchas veces
el problema
es que nos ponemos
y nos volvemos locos
y ponemos unos números así
¿no?
que la gente dice
ah pues voy a hacer un 9
y este tipo de cosas
lo que hay que intentar
muchas veces
es utilizar
solo y simplemente
los números
que necesitas
de forma controlada
incluso eso
lo podrías hacer
con custom properties
con variables
¿no?
para decir
bueno
voy a tener
como voy a estudiar
como en mi diseño
y voy a tener en cuenta
esa capa 3D
cuáles son los elementos
que tienen que quedar
más adelante
normalmente
suele pasar
que las modales
y todo este tipo
de cosas
tengan que tener
un número
mucho más grande
pero no tiene mucho sentido
que algunas cosas
empecemos ahí
a tener un z index
ahí muy bestia
porque si no
al final
lo que te cuesta
es pensar
cuál es el nivel
que tiene que tener
¿vale?
así que esto sería
un poco
como funciona
el z index
lo que os recomiendo
porque el z index
lo mejor es practicarlo
y aquí tenéis
de web dev
que está súper chulo
este
porque tiene algún
además de que tiene
algunos croquis
que os van a ayudar
un montón
tiene un montón
de ejemplos
que están súper bien
esto es un ejemplo
muy típico
y muy importante
porque
y os lo voy a enseñar esto
un tema que tenéis
que tener en cuenta
con el z index
mirad
vamos a cambiar
este section
¿vale?
vamos a poner
otro estilillo aquí
para que lo veamos
y vamos a poner
tres cajas
aquí
¡ay!
me he copiado lo que no era
sí
me he copiado lo que no era
vamos a poner
estas tres cajas
¿vale?
que es un ejemplo
similar a este
una cosa bastante importante
del z index
aquí lo único que he hecho
es un section
que tenemos una caja
con un div
un 1
un 2
un 3
y fíjate que lo que hemos hecho aquí
es que
el div
cada una de las cajas
tiene un margin top
menos 100
¿qué pasa con esto?
claro
cuando tú le pones
margin top
menos 100
menos 150
lo que está pasando
es que por arriba
va a tomar espacio
y fíjate que va a quedar
por encima o por debajo
dependiendo de cada uno
claro
aquí lo que podemos ver
es que está funcionando
más o menos como se le espera
cuanto más abajo
también está el contenido
es normal que tenga que tener
un z index mayor
es normal que el contenido
que está más abajo
en nuestro html
queramos que quede
por encima del otro
por eso está pasando esto
de forma por defecto
¿vale?
lo podríamos cambiar
pero podemos ver que por defecto
el 3
que sería el contenido
que tenemos aquí
aquí podemos ver
que queda por encima del 2
porque está un poquito más arriba
y el 2 queda por encima del 1
porque está un poco más arriba
o sea lo que está haciendo por aquí
es justamente como machacarlo
¿no?
esto sería un poco lo del z index
pero ahora no lo estamos utilizando
alguien puede decir
ostras
vamos a utilizar el z index
para arreglarlo
quiero que el amarillo
este de aquí
quiero que el amarillo
quede por encima de todos
lo que estamos utilizando aquí
es un selector
¿vale?
deep first child
y aquí lo que estamos haciendo
es que esto quede
queremos que quede por encima de todos
¿vale?
pues le pondríamos un z index
9, 9, 9, 9
y no funciona
¿por qué no funciona?
porque a ver
el z index por defecto
tiene que tener algún tipo de relación
claro
yo le estoy diciendo
z index 9, 9, 9
pero hemos dicho
que hay que crear
como
contextos de apilamiento
¿no?
le estamos diciendo
oye
pero tienes que apilarse
¿y cómo hemos dicho que se crean?
claro
no estamos creando ninguno
tendríamos que crearlo nosotros
entonces
si queremos que
el 1
sea el que quede por encima
que lo puedes hacer así
tendríamos que asegurarnos
que todos tienen un position relative
¿vale?
position relative
y ves
ahora sí
que ha detectado
ha dicho
vale
ahora que sé
a qué son relativos
los div
tienen el position relative
ahora voy a crear
un nuevo stack
de apilamiento
y ahora sé
que este
9, 9, 9
es mayor
que el que va a tener
por ejemplo
el rojo
y el azul
pero podríamos hacer
decir
bueno
vamos a hacerlo
de otra forma
vamos a decir
mira
vamos a hacer un selector
que quede el segundo
¿vale?
el segundo
lo hacemos así
en este child
y vamos a hacer
que tenga el background
de calor 0, 9, F
y así lo tenemos todos
imagínate que queremos ahora
que sea el segundo
que quede por encima de todos
pues tendríamos que hacer
un z index
todavía mayor
al que lo habíamos puesto antes
¿ves?
y ahora quedamos
tendríamos que
el 2 está por encima de todos
el segundo sería
el amarillo
porque le hemos puesto
un valor más bajo
y finalmente
tendríamos el last child
porque es el que tiene
el valor por defecto
y es el que tenemos
el más bajo
tenemos que entender
que en ese stack
de apilamiento
tendría que tener
un z index
de 0
¿vale?
pero esto lo podríamos cambiar
fijaos que no hace falta
poner números muy grandes
una vez que tienes claro
cómo quieres que quede cada uno
z index 2
z index 1
y así nos aseguramos esto
a este le ponemos
z index 3
y ya quedaría por encima
del otro
¿vale?
al final lo importante
es que entendamos
cómo funciona
el stack de apilamiento
cuando se activa realmente
que si le quitas
el position relative
entonces no lo tiene
y cuando se crean
también se pueden crear
con el position fix
que lo hemos visto antes
y con diferentes cosas
¿vale?
hay que practicar el z index
a ver
el z index
lo importante es no abusar de él
porque el problema
no es del z index en sí
que de hecho
también se pueden poner
valores en negativo
sino es cuando se abusa
y no se entiende
entonces claro
cuando abusas
y no lo entiendes
entonces te empiezas
a poner un montón
de z index
por todos los sitios
y eso lo que hace
es que sea complejo
trabajar con z index
¿no?
esta general
no entendía
lo del contexto
de apilamiento
os recomiendo mucho
mucho mucho
el de mdn
el tema del apilamiento
porque ahí lo explican
muy bien
y os dicen
todas las veces
que se crean
¿vale?
y aquí los tenéis
todas las propiedades
y en qué situaciones
se hacen
¿no?
yo leí que es ponerlo
mejor de 100 en 100
no
o sea
no es verdad
o sea
quiero decir
puede ser una forma
de hacerlo
hacerlo de 100 en 100
pero no es tan importante
cuál es el número
sino más el control
y además
hay a veces
incluso
funciones
de sash
o custom properties
que podéis hacer
para controlarlo
¿no?
yo comí 999
para el mayor de todos
es que
a ver
utilizar el 9999
es lo típico
pero no es lo que os recomiendo
os recomiendo de
mira
a mí
si lo queréis hacer
cada 100
puede ser
no mala
puede no ser
una mala idea
pero
lo importante
es que lo tengáis
controlado
¿ya explicaste los float?
no
porque yo considero
que los float
a día de hoy
no son necesarios
entonces
yo no explicaría
ni siquiera los float
porque no me parecen
ni importantes
ni interesantes
a día de hoy
y por eso vamos a explicar
flexbox ahora
¿el contexto de apilamiento
es el mismo para todos
o se crean por cada elemento
cuando lo descloqueas?
el contexto de apilamiento
es compartido
desde la raíz
para todos
pero se va creando
uno nuevo
dentro de cada elemento
claro
va haciendo un nuevo
contexto de apilamiento
que es justo lo que hemos visto aquí
¿no?
aquí fíjate
que aquí con este
position relative
no está afectando
y hasta que no hemos hecho
el position relative
y crea el contexto de apilamiento
entonces es que sí
que lo hemos tenido
¿no?
si sticky no se puso en write
a pesar que lo tenía
o vi mal
hostia
pues no me fijé
pero puede ser
pero puede ser también
porque en realidad
no sé si llegué a poner
el position relative
no me fijé
¿no?
los float me sirvían
por un aspecto muy particular
de una maqueta muy específica
que requería que la imagen
desbordara su contenedor
claro
es muy específico
vamos a hablar de flex
que al final
muchas veces
lo que pasa con flex
hay muchas preguntas
de cuándo utilizar flex
y cuándo utilizar grid
y no sé qué
hoy vamos a hablar
de flex
que me parece como
uno de los más interesantes
e importantes
flex
porque con flex
puedes hacer
el 95%
incluso lo que haces
con grid
muchas veces
lo puedes hacer con flex
te puede solucionar
mucho la vida
te puede quitar
un montón de problemas
y al final
lo importante
es que al menos
sepas flex
grid
es genial
para muchas cosas
pero vamos a ver
sobre todo
cuándo puede ser
interesante grid
os lo comentaré después
de grid
pero vamos con flex
que flex
es muy especial
os conté
de display
que había diferentes displays
vamos a ver
vamos a
vamos a quitar todo esto
voy a dejar el 1,2,3
ok
vamos a poner un section
por ahora vamos a poner
que es section
que es el padre
vamos a poner aquí
el parent
vale
vamos a poner parent
y vamos a poner aquí
un item
entonces vamos a poner
tanto aquí
aquí y aquí
class item
vale
y con esto
ya tendríamos
nuestros items
esto por aquí
esto por aquí
vale
¿qué hacemos con el item?
voy a hacer que sean cajitas
vamos a hacer que sean cajitas
con un pixel
vamos a hacer que tenga una opacidad
.9
más que nada
lo mismo
algo parecido
pero vamos a hacerlo solo con cajitas
para que lo veamos muy claro
vamos a hacer que tengan
un color así
luego le cambiamos
mira
vamos a hacer algo similar
pero que sea como lo que teníamos
pero desde cero
¿vale?
el item
el primer child
vamos a hacer que tenga el color
que sea yellow
y el
uy
oh oh oh
¿qué he hecho aquí?
first child
lo he hecho bien ¿no?
first child
item
claro es que da igual
no
punto item
vale
es que he puesto algo mal
me parece ¿no?
antes
last child
venga ponemos otra vez el color rojo
y tal
vale
entonces
hasta aquí habíamos visto el display
el display block
el display block
lo que hacía era crear
y mostrar ese contenido
como si fuese una caja
y en lugar de hacer que el contenido
se leyese de forma en línea
lo que hacemos es tener un bloque
y el siguiente elemento
aparece después del salto de línea ¿no?
entonces aquí podemos ver que
este contenedor
este div
que es lo que le está afectando
este bloque
este de aquí
display block
este es donde tenemos el display block
lo tenemos aquí
por defecto
div
tiene display block
por eso
si le quitamos esto
y le quitamos esto
vas a ver que
se comporta exactamente igual ¿no?
pero ¿qué pasa?
que también
podríamos decirle el item
le podemos decir
que se mostrase en línea ¿no?
si se muestra en línea
¿qué es lo que pasa?
bueno
como puedes ver
que se muestre en línea
significa que se va a comportar
exactamente igual
que como si fuese texto
o sea
que va a ir uno
en línea con el otro
en dirección
a como leeríamos el texto
en nuestro caso
es de izquierda a derecha
pero en otro sitio
¿vale?
en otro país
esto que estamos viendo nosotros
de izquierda a derecha
en otro sitio
lo podrían ver de derecha a izquierda
¿vale?
para que lo tengas claro
cuando decimos que sea en línea
es siguiendo
siguiendo la línea del texto
y se pone uno
detrás del otro
como funciona el texto
una palabra detrás de la otra
es en línea ¿vale?
y lo que está ocurriendo aquí
es que después
cada elemento va
uno seguido del otro
no hay un salto de línea
y el problema
igual que le pasa al texto
es que tanto el alto
como el ancho
no le afecta
lo que estamos teniendo aquí
es que si yo le digo
que cada item
son 100% píxeles
o sea
100 de ancho
y 100 de alto
fíjate que no está ocurriendo este
no está pasando aquí
que sean 100 píxeles
lo está ignorando
porque
cuando mostramos
la caja
en línea
lo que está haciendo es
lo que sea el contenido
y después
el siguiente contenido
siguiente contenido
sin salto de línea
y nada ¿vale?
ahora
si ponemos el blog
¿qué es lo que va a pasar?
el blog
sí que va a hacer esto
le va a afectar
el ancho y alto
y después
cada contenido
lo que va a ocurrir
es que va a ser
el sentido
de la lectura general
que es de arriba
a abajo ¿no?
lo está apilando
de arriba a abajo
cada contenido
no lo pone en línea
sino de arriba a abajo
que sería también
la dirección
en la que leemos
los textos
de arriba a abajo
y finalmente
hace un salto de línea
para poner el siguiente contenido
por eso
aunque este 2
aunque este 2
realmente cabe aquí
lo que estamos viendo
es que le está dando ahí
un salto de línea
para poner el siguiente
¿vale?
muy bien
ahora
tenemos
más displays
tenemos diferentes displays
y uno de ellos
es
display flex
¿display flex qué es?
es una propiedad de CSS
que establece
cómo tienen que funcionar
realmente el contenedor
respecto a sus hijos
o sea
que el flex
no lo tenemos que utilizar
directamente en el hijo
sino que tenemos que utilizar
en el contenedor
esto lo tendríamos que poner
aquí
display flex
y esto directamente
lo que va a ocurrir
es que vamos a tener
un contenedor
que es flexible
y que nos va a permitir
a nuestro
a todos los hijos
ser alineados
de otra manera
mucho más eficiente
tanto horizontal
como vertical
incluso cuando tenemos
tamaños desconocidos
o dinámicos
¿vale?
y fíjate ya
la diferencia
del display flex
que lo que ha ocurrido
es
uno
a los hijos
le está afectando
el alto y el ancho
pero ha detectado
que sí que tiene
espacio suficiente
para ponerlos a los lados
y lo ha puesto al lado
¿por qué?
porque ha determinado
que tiene una dirección
en la que puede
este contenido estar
y por defecto
la dirección
en la que nosotros
estamos trabajando
es como filas
así que como una fila
ya ha dicho
vale
la dirección del contenido
de este contenido flexible
va a ser una fila
y por lo tanto
voy a poner
el contenido
en fila
en nuestro caso
en nuestro caso
de lectura
es de izquierda a derecha
pero luego veréis
por qué es importante
entender esto
o sea
no es correcto
no es correcto
y tenlo muy en cuenta
pensar y decir siempre
que es de izquierda a derecha
o sea decir
en fila es de izquierda a derecha
no es así correcto
y luego vas a ver por qué
y lo vas a ver clarísimo
¿vale?
aquí que le podemos poner
el flex direction
el flex direction
por defecto
es row
¿vale?
es en filas
pero también le podríamos indicar
cuál es la dirección
en que nosotros queremos
que funcione
que realmente no sea así
le podemos decir
que sea por columnas
¿y qué va a pasar
con las columnas?
que aunque tú
ahora estés viendo
que sea muy parecido
visualmente
a lo de deep
lo que está pasando
realmente no es tanto
que está haciendo
un salto de línea
sino que está
apilando todos sus hijos
como si fuese una columna
¿y cómo es una columna?
pues arriba uno
abajo el otro
y abajo el otro
¿vale?
pero si tuviésemos otro ancho
podríamos tener algo al lado
lo podríamos llegar a hacer
podríamos apilarlo
de formas totalmente distintas
si quisiéramos
pero una cosa
que ya te estarás dando cuenta
si podemos tener la dirección
que sea columnas
o filas
es que flex
es unidireccional
es de un solo eje
siempre
siempre
siempre
flex
vamos a estar trabajando
de un solo eje
ya sea filas
o columnas
y esta
es la diferencia
clave
con grid
porque grid
justamente
es una cuadrícula
sería correcto
cuadrícula
que no me salía
una cuadrícula
entonces
en flex
siempre vamos a estar trabajando
en un eje
ya sea un eje
en filas
o en columnas
pero
en grid
al final
es una cuadrícula
entonces
al ser una cuadrícula
¿qué pasa?
que vais a poder trabajar
bidimensionalmente
vais a poder trabajar
tanto en filas
y en columnas
a la vez
y es una de las cosas
más interesantes
que tiene
ahora bien
si solo necesitáis un eje
podéis utilizar también grid
porque os permite trabajar
en dos ejes a la vez
pero también
podréis utilizarlo solo para uno
pero para flex
solo podéis trabajar
en una
filas
o columnas
ya veis que no podéis decirle
ni diagonales
ni cosas raras
flex direction
¿no?
flex direction
o column
o row
ahora bien
ahora bien
tened en cuenta
que también
hay otros
algunos valores
un poco especiales
por ejemplo
tenéis row reverse
que fíjate lo que hace
es darle la vuelta
le estaría haciendo
el sentido contrario
estaría poniendo
el último al final
y sería
en filas
pero al revés
sin necesidad de hacer
ninguna cosa
esto está bastante interesante
porque hay veces
que hay mucha gente
que para hacer el reverse
utiliza javascript
y hay veces
que con esto
te lo puedes ahorrar
porque en lugar de hacer
un reverse del array
lo puedes hacer visualmente
en el caso de que sea
un array conocido
que no sea dinámico
y que al final
pues a lo mejor
imagínate que son
15 opciones
y dices
reverse
hay gente que lo hace
con javascript
pero es muy fácil
hacerlo muchas veces
con esto
y así te quitas
un montón de complejidad
y lo mismo
con la columna
también le puedes dar
la vuelta a la columna
y ahora vais a ver
más cositas
que tienen cosas
muy chulas
pero imaginemos
que seguimos aquí
con el flex
esta es la dirección
por defecto
por defecto
es display flex
la dirección
es por filas
fíjate que la dirección
de escritura
es importante
si tú le pones
direction
que el direction
es justamente
lo que indica
es la dirección
de escritura
pues tú en la dirección
le podrías poner
rtl
rtl que quiere decir
right to left
o sea escribes
de derecha a izquierda
entonces fíjate
que solo poniendo
flex direction flex
ya le ha dado
la vuelta al contenido
¿entiendes?
ya le ha dado
la vuelta al contenido
porque el contenido
ahora se muestra
correctamente
porque la gente
que escribe
de derecha a izquierda
lo que está pasando
es que lee
de derecha a izquierda
y entonces ya tenemos
aquí
que lo primero
que leerán
es el 1
luego el 2
y luego el 3
o sea que ahí
ya tenemos la diferencia
que es clave
y lo mismo
pasaría un poco
con el writing mode
podemos poner
writing mode
y le decimos
que es vertical
de izquierda a derecha
y fíjate que pasa
que está cambiando
totalmente
fíjate que flex
lo interesante que tiene
es que aquí
ya podemos ver
como está ajustando
nuestro contenido
a esto
estamos viendo aquí
que tenemos aquí
el primero
el primero
lo tenemos aquí
y como estamos haciendo
que la escritura
es vertical
de izquierda a derecha
pues está ajustando
el contenido
esto es espectacular
porque aunque vosotros
en el 95%
98%
del trabajo
que hacéis
solo pensáis
en español
y está bien
no pasa nada
pero es importante
que entendáis esto
porque esta es la implicación
importante que tiene
de flex
cuando hablamos
de filas
y de columnas
y es que
se adecua
también
a la escritura
a los diferentes idiomas
y es clave
porque queráis o no
internet
es mundial
no es solo en español
no es solo occidental
es de un montón de sitios
entonces
tenéis que tener en cuenta
también esto
de que
también
tanto el row
como el column
se afecta
dependiendo de la dirección
de escritura
tendríamos el tema
del flex grab
tenemos el flex direction
y tenemos otra cosa
que por defecto
sería el flex grab
que por defecto
es no grab
ahora
si no hay suficiente espacio
en el contenedor
los elementos
se van a desbordar
vamos a ver
vamos a hacer aquí
un borde
vamos a poner
4 píxeles
solid
y en negro
vamos a forzar
que tenga
300 píxeles
y
o menos
no sé
200
200
200 píxeles
vale
que está pasando aquí
lo que está pasando aquí
fíjate
yo le he puesto que sea de 200 píxeles
si miramos a ver aquí
vamos a ver
de cuánto lo ha dejado esto
y cuánto está haciendo que ocupe cada cosa
vale
vamos a poner esto por aquí
quitamos al 100%
y esto lo ponemos abajo
para que veamos bien
vale
y aquí tenemos el section
bueno
es 208 por el borde
vale
pero bueno
ahí
coño
yo le he puesto flex
aquí le he puesto flex direction flex
pero bueno
era row
y como por defecto era row
pues ya funcionaba
no sé por qué he puesto flex
pero me he equivocado
era row
entonces
dicho esto
fijaos que yo le he puesto aquí
que el padre
son 200 píxeles
y cada item
tiene que ser de 100 píxeles
pero claro
si cada item
es de 100 píxeles
el tema
es que
no debería caber
no debería caber
pero por defecto
tenemos este flex grab
que le decimos
no grab
lo que está pasando por aquí
es que ya está ajustando
claramente el contenido que tenemos
para decir
bueno
como no me
no cabe
lo que voy a hacer es
hacer más pequeño
cada uno de los elementos
vale
lo que estamos teniendo aquí
es
esto
fíjate
se ve
se ve un poquito
que hay como una flecha ahí
y es bastante curiosa
lo que está pasando ahí
es que está diciendo
mira
debería haber sido
esta anchura
pero lo he ajustado
he hecho un shrink
vale
que sería como
lo he encogido
a este ancho
para que realmente
quepa perfectamente
porque si no
lo que iba a pasar
es que no iba a caber
y claro
si no cabe
pues al final se ve mal
y la hemos liado parda
¿por qué está pasando esto?
esto está pasando por magia
este no grab
¿no?
este no grab
¿qué es lo que quiere decir?
lo que quiere decir
es que por defecto
no va a hacer
si no hay suficiente espacio
en el contenedor
lo que va a hacer
es decir
bueno
no quiero que me lo pongas
en una línea más
hazlo como tú quieras
intenta lo que tú quieras
pero tiene que caber aquí
¿vale?
esto no quiero que me lo cambies
por nada del mundo
tiene que caber aquí
de alguna forma
hay veces que se puede hacer
con desbordamiento
depende de unas cuantas cosas
que ahora veremos
pero lo que sí que tiene claro
es que no está haciendo
un salto de línea
para hacer que quepa el contenido
bueno
¿qué es lo que vamos a hacer aquí
en este caso?
pues fíjate
qué pasa si le pones grab
¡pum!
¿qué está pasando?
cuando le decimos el grab
es que le estamos diciendo
oye
te doy la posibilidad
de que si no cabe
hagas un salto de línea
¿qué es lo que ocurre?
que no cabe
porque cada item
es de 100 píxeles
tenemos 200 disponibles
por lo tanto
lo que dice es
vale
como no cabe
porque tenemos 100 píxeles
pues lo que hago es
otro salto de línea
mira
y aquí tenemos algo interesante
porque ves que pone 200 píxeles
y no cabe
no cabe porque
dos items
deberían ser 200 píxeles
pero no cabe
y esto
no sé si con el box sizing
lo arreglaremos
vamos a ver
border box
no
no
no solucionamos
porque
no sé si aquí también
lo deberíamos poner
no
pensaba que a lo mejor
a lo mejor iba a caber
pero no cabe
porque va justo
no cabe
pensaba que no iba a caber
por el borde
pero lo cierto es que no cabe
porque no cabe
no cabe por poco
no cabe por poco
pues así sí que cabe
y sería justamente
por el borde
pero pensaba que con el border box
igual conseguiríamos que
que cupiera
pero no cabe
pues eso
pero es por el borde
por lo que no cabe
dicho esto
el tema es que como no cabe
pues lo que está haciendo
básicamente es
saltárselo a una nueva línea
pero ten en cuenta
que por defecto es no wrap
así que es importante
que sepas que por defecto
es este valor
porque muchas veces
la gente lo que le pasa
es que se vuelve loca
de
¿por qué me está cambiando
el tamaño?
¿por qué me lo pone
toda una fila?
¿por qué no sé qué?
¿no sé cuánto?
o sea que ya está
lo que no cabe es otra cosa
en ya sabes dónde
joder sabitar
como estás atento
y estás aquí
encima
en una clase de CSS
madre mía
estás más perdido
más perdido
que el día que te encontraste
eso en la boca
que te puse tío
el trozo de carne
sí el trozo de carne
ya sabes
cuando fuimos al asador
aquel
que fue buenísimo
en fin
el wrap lo que va a hacer es
si no cabe
te permito que hagas
un salto de línea
si pones no wrap
es que no tienes que tener
el salto de línea
¿vale?
tienes que saber
que hay una forma abreviada
de utilizar los dos
puedes utilizar flex flow
y le puedes indicar
por un lado
la dirección
row
y luego decirle
si quieres no wrap
o wrap
¿vale?
entonces aquí lo puedes decir
en una
muy poco usado
la verdad
el flex flow
lo he visto muy poco
pero que sepas
que es una forma abreviada
de hacer exactamente lo mismo
por si te interesa
vamos a poner
el espacio
controlar el espacio
de los elementos flexibles
que tenemos dentro
vamos a poner con el no wrap
que queda un poquito mejor
¿vale?
bueno
suponemos
esto ¿no?
que tenemos este contenido
200 píxeles
y cuál es el problema
imagínate
si le ponemos un poquito más
350
bueno claro
350 no lo vamos a ver
vamos a hacerlo más pequeño
vamos a poner 300
y vamos a hacer que los items
sean solo de 50
¿no?
vale
fíjate lo que pasa aquí
que son de 50 píxeles
y tenemos aquí
más
más espacio disponible
podríamos rellenar ese espacio
ahora veremos
como lo podemos rellenar
¿no?
¿cómo
realmente hacemos
que aunque sea 50 píxeles
le digamos
oye
quiero que estos elementos
se adecúen a ese eje
y que pueda
pueda crecer
todo lo que yo quiera
a ver
el contenedor
tiene más espacio
para mostrar los elementos
se están alineando
ahora mismo
al principio
pero yo lo que me gustaría
es que
se ocupase
en todo el espacio
¿por qué está haciendo esto
por defecto?
por defecto
lo que está ocurriendo
es que aquí tenemos
diferentes propiedades
voy a poner esto por aquí
en CSS
tenemos diferentes propiedades
una es flex grow
que por defecto
es cero
que quiere decir
los elementos
no crecen
¿vale?
no crecen
luego tendríamos
flex shrink
que por defecto
es uno
que quiere decir
los elementos
pueden reducir
su tamaño
a un tamaño
más pequeño
que su flex basis
¿vale?
y su flex basis
por defecto
es auto
¿vale?
que los elementos
tienen un tamaño base
en auto
en automático
que por automático
en este caso
va a tener en cuenta
sobre todo el width
que le hemos puesto aquí
claro
le hemos puesto un width
de 50 píxeles
pues va a esperar
que sean 50 píxeles
entonces ya podemos ver
que lo que está ocurriendo
es
uno
le estamos diciendo
que los elementos
que tenemos en flex
no pueden crecer
o sea que no pueden crecer
no podemos hacer
que crezcan
si le ponemos un 1
podrían crecer
pero en este caso
no va a hacer nada
por el flex basis
flex shrink
le estamos diciendo
que los elementos
pueden reducir su tamaño
y de hecho
antes hemos visto
que lo han hecho
si nosotros le ponemos
aquí un 100
fíjate que aquí
¿qué ha pasado?
que el no grab
que hacía que evitase
un salto de línea
y el ancho
a 100 píxeles
junto con el flex shrink 1
que este es el valor
por defecto
estos son los valores
por defecto
¿vale?
que esto
valores
por defecto
lo que está ocurriendo aquí
es que como sí que le estamos
permitiendo
que puedan reducir su tamaño
gracias a esto
realmente está haciendo
esto de
que se queda así
si no
claro
lo que pasa es que tiene el auto
que el auto ya no está salvando
sino lo que podríamos hacer
es que se redujese
su espacio
para también ajustarse
al tamaño
¿vale?
así que este sería por el defecto
ahora cambiaremos el auto
porque el auto es el que tiene
el tamaño base
que nos está engañando
y tal
y que sepáis que todo esto
sería como el flex initial
sería como la forma inicial
de tratar el flex
¿vale?
ahora la clave está en el flex basis
porque imagínate que en el flex basis
le decimos
oye
el tamaño es 200 píxels
¿ok?
le decimos que
es que claro
tengo el grab aquí
y le decimos aquí
que no puedes
ni ser más pequeño
ni más grande
ni lo que sea
el flex basis
va a ser el tamaño base
que vamos a tener
por lo tanto
vamos a tener ahí un tamaño
que sea de 200 píxeles
por defecto
y le podemos decir
que crezcan
o que no crezcan
y todo esto
¿vale?
yo os estoy viendo
¿y por qué no está cambiando
nada de esto?
a ver
a ver
a ver si es que la he liado ahora
porque me estoy volviendo
un poco loca ahora
con el flex
a ver
a ver
¿qué está pasando?
¿esto cuánto ocupa?
que me lo diga
flex
¿vale?
100
100
50
50
¡ah no!
claro
es que
hostia
pero ¿por qué no me ha dicho
nadie nada?
que le estamos poniendo
donde no es
claro
es que le estamos poniendo
todo esto
todo esto flex y tal
todo esto
se lo hemos puesto
donde no es
claro
es que todo esto
que se lo he puesto aquí
no va aquí tío
madre mía
ya estaba flipando
y es que esto va aquí tío
es que van el item
y a lo mejor me lo habéis dicho
y no me había enterado
igual es Savita
el que me ha puesto nervioso
sí
Savita me lo dijo
sí sí
Savita me va a decir lo que yo sé
no es verdad
no te lo sabías
por lo que era decir
sí sí sí
porque estamos en un curso de CSS
bueno pero se me ha ido
se me ha ido
se me ha ido
claro es que
claro como
tengo que estar arriba abajo y tal
claro es que esto no va el padre
esto va en el hijo
esto va en los hijos
¿vale?
ahora ya tiene sentido
ahora ya tiene sentido
vaya ya
claro claro claro
¿vale?
ahora ya lo tenemos
¿vale?
vale aquí por ejemplo
claro es que si no lo tenía sentido
ya estaba flipando
el tema es que estos
flex grow
flex ring
flex basis
esto va en los hijos
¿vale?
y por defecto
ya hemos dicho que es el flex initial
de hecho estos son los valores por defecto
el flex grow a 0
el flex ring a 1
y el flex basis a auto
¿vale?
ahora sí
ahora sí
entonces los elementos no crecen
pero sí que pueden reducir su tamaño
ahora sí que le podemos decir esto de los 200 píxeles
¿vale?
ahora sí que podemos ver esto
que ahora sí que está ocupando 200 píxeles
100 píxeles
lo que sea ¿no?
claro en este caso no ocupa más
pero fijaos que aquí
este ocupa un poquito más
y los otros ocupan un poquito menos
ahora sí que podemos ver
que le está afectando perfectamente
¿vale?
entonces
¿el padre cuánto ocupaba?
100 píxeles
perfecto
lo que podemos hacer es
por ejemplo
que ajustando el tamaño
esto sería ajustando a 100 píxeles
y que sí que se puedan hacer un poquito más pequeño
pero podemos hacer
que se ajuste automáticamente a su contenido
¿vale?
si le ponemos un flex no grab
y le decimos que se ajuste automáticamente a su contenido
y que se pueda hacer tan grande también
se pueda reducir o hacer más grande
fijaos que ahora independientemente de cuál sea
oye, he hecho esto
independientemente de cuál sea el ancho del padre
le hemos puesto 200 píxeles
imagínate ahora 100
pero si ahora lo hacemos más grande
lo que estamos haciendo con esto es
oye, los elementos pueden crecer
los elementos se pueden reducir
y el tamaño es automático
esto lo que estamos haciendo es
del espacio que tiene
va a ajustarse a todo lo que tenga disponible
independientemente
va a tener en cuenta el contenido
fíjate que el primero este
ocupa más automáticamente
pero lo que estamos haciendo aquí
es que estos 200 píxeles
los está rellenando completamente
porque le hemos permitido que se hagan más grandes
y que además se hagan más pequeños
que se ajusten automáticamente ¿vale?
y esta sería la forma del flex auto
que es como la más popular
porque es como el contenido
se va a ajustar automáticamente al contenedor
y ya está ¿no?
otra cosa que podríamos hacer es
independientemente del contenido
que todos tuviesen el mismo ancho
o sea, en lugar de utilizar el flex basis
le podríamos decir
vale, los elementos pueden crecer
los elementos se pueden hacer más pequeños
pero vamos a hacer que la base sea cero
y esto lo que vamos a hacer
es que todos tengan el mismo ancho
fíjate que ahora independientemente del contenido
ahora todos tienen el mismo ancho
si le pones un auto
¿ves?
sí que se va a ajustar automáticamente
según el tamaño base
según el contenido que tiene cada uno
si le pones el cero
independientemente del contenido
los tres van a tener el mismo espacio
y la forma abreviada de hacer esto
sería flex 1
que esto también lo habréis visto un montón de veces
¿de dónde sale este flex 1?
pues flex 1 lo que quiere decir es
los elementos pueden crecer
los elementos pueden reducir su tamaño
a un tamaño más pequeño
que el flex basis
y el flex basis si lo pones cero
que al final es el tamaño base
claro, si es cero
si todos parten desde la misma base
si cada uno se tiene que distribuir el espacio
va a ser el mismo espacio para todos
pero si le pones auto
lo que va a hacer es tener en cuenta
el contenido de cada uno
para distribuir el espacio
¿vale?
así que ahí tendríais un poquito la diferencia
y una cosa que es súper interesante de esto
una vez que por ejemplo
ponemos esto del flex basis
lo ponemos a cero
bueno, a cero
vamos a quitar todos estos
hemos dicho que la forma corta sería esta
flex 1
pero una cosa muy interesante
es que el 1
también puede servir como una medida relativa
para indicar cuánto espacio
tiene que tomar cada uno de los elementos
¿vale?
por ejemplo
cuando le decimos flex 1
vamos a poner los tres aquí
vamos a poner el item
ntchild 2
y este va a ser el background blue
y quitamos esto aquí
¿vale?
ya tenemos aquí el primero
el segundo y el tercero
una cosa bastante interesante
es que cuando le decimos flex 1
le decimos
oye
todos tienen que tomar el mismo espacio
pero imagínate
que por lo que sea
queréis que el primero
tenga el doble de espacio
que el resto
pues lo que podéis hacer es
vale
pues el primero
quiero que tenga
el doble de espacio
que el resto
por lo tanto
el primero
va a tener de ancho
el doble
que los otros elementos
y aquí lo podéis ver
por ejemplo
este
si lo medimos aquí
vamos a ver
que tiene
unos 350
si vamos al otro
pues deberían ser unos 100
no
a ver
he mirado el que no es
son 160
¿vale?
unos 160
y mirando este
pues vamos a ver
que tiene 80
¿vale?
o sea que tiene el doble
lo mismo podríais hacer
si en lugar de tener 2
vamos a decir que tenga 4 veces
¿vale?
pues podemos decir
el primer hijo tiene 4
el segundo tiene el doble
del que solo tiene 1
y así lo podemos ver
¿no?
podemos ver
que el último hijo
que por defecto
pues ahí tendría el flex 1
se ha quedado con 1
el segundo hijo
tiene el doble
del que solo tiene 1
y el primer hijo
tiene 4 veces
del que solo tiene 1
y el doble
del que solo tiene 2
¿vale?
es una referencia relativa
de cuánto espacio
tienen que tomar
respecto al padre
¿no?
le estamos diciendo
este tiene que tomar
4 veces
lo que ocuparía
1 de los espacios
es una forma
cuando lo pensamos
muchas veces
en proporciones
como las columnas
es como decir
mira
si tengo
10 columnas
pues aquí
quiero que se queden 8
aquí una
y aquí una
¿no?
es como la proporción
que tiene que tomar
del espacio
cada uno de ellos
¿vale?
lo digo porque
podéis poner el flex 1
para que todos
tengan el mismo espacio
pero imaginad
que el del medio
queréis que tenga
el doble de espacio
pues le pondréis un 2
y tomará el doble
del espacio
de lo que tienen
cada uno
de los elementos
que tienen un 1
¿vale?
si le ponéis un 2
van a tener
el primero y el segundo
el doble del espacio
que el que tiene el 1
¿vale?
así que es bastante importante
esto porque al final
es una forma
de distribuir el espacio
de forma mucho más sencilla
y de forma
que no tengas que preocuparte
de pensar en píxeles
en tantos por ciento
ni cosas así
porque además
en tantos por ciento
lo importante ahora es
justamente el espacio
que tienen disponible
y punto
una cosa también
muy interesante de flex
es que podéis utilizar
el orden
para cambiar visualmente
cómo se ven los elementos
por ejemplo
ves aquí que tengo
primero
segundo
y tercero
una cosa muy chula
es que podéis utilizar
la propiedad order
para decir
bueno
el primero quiero que su orden
sea 3
¿vale?
ay
sea 3
y el segundo
quiero que su orden
sea 1
y el tercero
quiero que su orden
sea 2
¿qué hemos hecho con esto?
pues los hemos desordenado
con CSS
lo que está pasando aquí
es que le estamos dando
como el orden
en el que los hijos
se tienen que mostrar
en nuestro contenedor flexible
fijaos
que el primer hijo
ahora aparece el último
porque le hemos dicho
que el orden es 3
aquí lo importante
es un poquito
como el z index
le podéis poner el valor
que queráis
y lo que va a hacer
es ordenarlo
según el valor numérico
que tenéis en el orden
así que si le ponéis
el número que sea
lo va a dejar el último
porque este número
es mayor
y van a empezar
primero a poner
el número menor
el primero
y así
consecuentemente
lo importante de esto
muchas veces
y lo que está muy chulo
es que podéis cambiar
visualmente
el cómo se ve algo
cambiarle el orden
sin necesidad
de hacer ningún tipo
de javascript
que a veces
esto muchas veces
puede ser bastante problemático
¿no?
pues podéis utilizar el orden
solo para esto
podéis decirle
bueno
imagínate que el usuario
reordena con un drag and drop
podéis utilizar el orden
para en lugar de cambiar
el html
simplemente cambiar el order
y ya está
y cada uno
le podrías dar
una prioridad diferente
para ponerlo en un sitio
o en otro
y ya está
aunque
y aquí va mi recomendación
es importante
que tengas en cuenta
que el html
es lo importante
o sea
si algo en orden
tiene que estar arriba
por tema de importancia
porque es donde tiene que estar
tienes que cambiar el html
y lo que tiene sentido
pero hay veces
que por temas visuales
o incluso responsive
hay veces que
algo que está arriba
pues que es que esté abajo
y tal
puedes utilizar
ya sea el order
o puedes utilizar
el flex direction
para cambiarlo
y hacer
y hacer lo que sea
reverso
y cosas así
¿vale?
pero es importante
que tengáis en cuenta
que si semánticamente
tiene sentido
que esté arriba
haced que esté arriba
el html
si visualmente
solo visualmente
por un tema
de responsive
porque en ese momento
queda mejor ahí
porque lo está ordenando
el usuario
y es algo temporal
y tal
pues igual lo podéis utilizar
que muchas veces
tiene sentido
exacto
en responsive de footer
se suele utilizar mucho
totalmente
menos mal que no fue
los colores de la bandera
rusia
joder
no hombre
a ver
no sé
son tres colores normales
y corrientes
no sé por qué estáis viendo
banderas
donde no las hay
vamos a quitar los órdenes
vamos a quitar los órdenes
vamos a quitarle
también los flex
porque ahora
os voy a explicar
una de las cosas
yo creo que es lo más importante
de flex
seguramente
de lo más importante
de flex
es el tema
de cómo
cómo se queda
cada una de las cajas
vamos a poner que width
vamos a poner 50 píxeles
y vamos a poner
que sea
50 píxeles
y esto le vamos a poner
un poquito más
vamos a ponerle
mil píxeles
no 500 píxeles
vale
no
tres
cuatrocientos píxeles
bueno
aquí es donde viene
lo divertido
amigos
lo divertido
y donde
justamente
os voy a mandar
deberes
hay un juego
muy interesante
que hoy
espero que hagáis
que es
flex
froggy
me parece
flex froggy
es este juego
flexbox froggy
es un juego
que es totalmente gratuito
que está en español
y que os enseña
flexbox
y al final
flexbox
vais a tener que pelearos
un montón
vais a tener que preparar
y tal
y aquí tenéis 24 ejercicios
que son totalmente interactivos
para poner en práctica
todo lo que aprendéis
de flexbox
pero lo más importante
justamente
que vais a practicar ahí
es el tema
de cómo posicionar
vuestros elementos
y esto es lo más difícil
alinear los elementos
en flexbox
no es que sea difícil
pero básicamente
es lo más divertido
¿no?
entonces
os comentaba
que en flexbox
teníamos
el eje
¿no?
el eje principal
vamos a trabajar siempre
en un eje
que va a ser la distribución
en la que queremos
ya sea en filas
o en columnas
pero también
tenemos otro concepto
que es el eje
cruzado
porque si tú trabajas
en filas
al final
esos elementos
que hay dentro
también tienen
sus propios ejes
tanto horizontales
como verticales
y también vas a querer
centrarlos
ya sea vertical
o horizontalmente
entonces vamos a ver
cómo funciona esto
exactamente
a ver
el más importante
de todos
el más importante
obviamente
cuando trabajamos
en flex
es la distribución
del espacio
en el eje principal
el eje principal
es el que le hemos indicado
o el que está utilizando
por defecto
o sea
en línea
el eje principal
sería el flex
direction
row o column
en este caso
column
¿vale?
sería así
y row sería así
esto
esto
es el eje principal
sobre el que vamos
a trabajar
¿vale?
eje principal
entonces
¿cómo distribuimos
el contenido
en el eje principal?
lo podemos hacer
con un justify content
y aquí le podemos decir
diferentes cosas
le podemos decir
que lo justifique
en el centro
y fijaos
que en el eje principal
o sea
en la fila
lo está
centrando
cuando le ponemos center
en su eje principal
lo está centrando
le podemos decir
más cosas interesantes
como el space around
por ejemplo
para que deje
el espacio
el mismo espacio
alrededor
o sea
el espacio
que está dejando
aquí
¿vale?
es el mismo
que tiene aquí
lo que pasa
es que aquí
es el mismo espacio
que está dejando
este aquí
y este espacio
que está dejando aquí
es el mismo
que está dejando aquí
así que por eso
está dejando
space around
luego tendríamos
el space between
esto lo que va a hacer
es que a los laterales
no deja espacio
sino que simplemente
entre los elementos
es que lo va a separar
entonces space between
es solo espacio
entre los elementos
y luego tendríamos
el space evenly
que es similar
similar al between
pero
fíjate
que la diferencia
es que el espacio
que ves aquí
es el mismo
que hay aquí
el mismo que hay aquí
el mismo que hay aquí
o sea
tiene el mismo espacio
entre cada elemento
y los laterales
es un poco
un poquito diferente
al between
porque el between
hay el
al around
perdón
perdón
al alrededor
porque el around
fíjate que aquí
hay el doble de espacio
que el que hay aquí
¿vale?
así que
es una diferencia sutil
pero importante
hay más
por ejemplo
por defecto
lo que tenemos
es un flex start
o sea
al inicio de la fila
pero fíjate que el flex end
lo deja al final
uno de los más importantes
obviamente es el center
que es el que hemos visto
que los centra
y ya está
pero imagínate
que los quieres centrar
y por lo que sea
no solo quieres centrar
sino que también
los quieres separar
pero los quieres separar
un poquito
tampoco los quieres separar tanto
y claro
el space between
space around
space evenly
como que los separa demasiado
pues lo que puedes decir
es utilizar un gap
y en el gap
le puedes decir
cuál es la separación
que queréis
entonces
tenemos un gap
que este gap
lo que está afectando
siempre va a ser
entre elementos
no entre los laterales
¿vale?
entre elementos
aquí le podemos poner
16 píxeles
y podemos utilizar
todos y cada uno
de los valores
que hemos ido viendo
¿vale?
también podéis utilizar
porcentajes
podéis utilizar un montón
pero aquí lo que está dejando
son 16 píxeles
¿vale?
así tendríamos el gap
no tiene mucho sentido
utilizar el around
con el gap
porque entonces ya
empiezan las cosas raras
¿vale?
tenéis aquí
una separación
con un gap de 16
pero además
otra separación
que le hemos puesto
en space around
y en el flex start
sí que funcionaría
lo que pasa
es que la separación
la dejaría siempre
entre los elementos
¿vale?
así que nada
le hacéis el flex center
y ya lo tenéis
¿vale?
con esto tendríamos
la justificación
de la distribución
del espacio
en el eje
ay perdón
el center lo dejamos así
en el eje
el eje principal
pero ¿qué pasa
con la distribución
en el eje cruzado?
y el cruzado
digamos
si el principal
es el row
el cruzado
¿cuál sería?
la columna
bueno
pues podríamos decir
align content
center
¿no?
pero ¿qué pasa aquí?
aquí no parece
que haya cambiado nada
¿no?
o sea
este
¿por qué
no ha cambiado nada?
no ha pasado nada
¿verdad?
el tema
es que sí que están
centrados ya
o sea
están centrados
porque todos
están ocupando
lo mismo
en su eje cruzado
que sería la columna
o sea
en la caja esta
de primero
ya está centrada
porque ocupa
50 píxeles
y en esa fila
de 50 píxeles
ya está centrada
vamos a intentar una cosa
para que veamos la diferencia
vamos a hacer que el primero
ocupe 25 píxeles
el segundo
que sean
30 píxeles
y el tercero
que sean
40 píxeles
¿no?
vale
entonces
ahora me ha dejado fatal
porque esperaba que me lo
me lo dejase
¡ah!
¿qué ha pasado?
me esperaba que me lo dejase
centrado
pero no me lo ha dejado
centrado en el eje
¿por qué no me lo has dejado
centrado en el eje?
pensaba que me lo iba a centrar ahí
¿por qué me lo has dejado
centrado en el eje?
vale
line items
center
no
¿ves?
esto no
yo pensaba que esto me lo iba a centrar
¿por qué no me lo está centrando?
a ver si
o sea
esto
esperaba que estos
en su eje cruzado
me lo centrase
el align items
a ver si pones un flex
no
pensaba que me lo iba a centrar
en el eje
en su mismo eje
no
el align items
es para otra cosa
el align items
que lo vamos a hacer después
es para centrarlo
a nivel de todo el
¿ves?
a centrarlo de todo
pero yo no quiero centrar eso
sino que al final
el align self es solo para uno
¿tiene que ser flex grab?
¡ay coño de la madre!
es que he quitado el grab
la madre que me parió
no
pero flex grab
hay flex
flex grab
grab
no pero
tampoco es justo lo que queríamos
no es lo que queríamos
no
me ha dejado ahí fatal
text align
text align
sí, sí
no me ha dejado fatal
porque esto lo tenía clarísimo
como decir
no
esto seguro que funciona así
no sé qué
las alturas están bien
o sea que
no
no tiene mucha historia
a ver
el align content
básicamente
es la distribución
del espacio
en el eje cruzado
o sea
eso no hay ningún tipo de duda
el tema es que el eje cruzado
debería ser la columna
seguro que es una chorrada
que ahora mismo lo veo
no sé por qué
pero el tema es que
la idea
es que
una cosa es
centrar a nivel de fila
¿no?
que sería el eje principal
que para eso
utilizamos el justify content
y luego dentro de la fila
lo que me gustaría
es alinear
verticalmente
dentro del espacio
que tiene aquí
y aquí lo que esperaría
con el align content
es que este
me lo despegase
y me lo dejase en medio
que no me lo hace
¿vale?
que no sé por qué me lo hace
debe ser una tontería
como un piano
pero que no
no lo
no lo termino de ver
entonces
el flex direction
flex flow
esto tiene que ser
row y no grab
o sea
pero es que este es el por defecto
y finalmente
la altura y tal
o sea
lo tenemos todo
correctamente
que te falta un
high
y usar align items
es que a ver
el align items
si es que ya sé lo que va a pasar
el align items
el align items
te lo centra
a nivel de todo el contenedor
y eso no es lo que queremos
que está interesante también
pero
pero no queremos
el align items
para todo el contenedor
align items
que está interesante
pero es para otra cosa
no es para
para
para esto
¿vale?
o sea
el align items
alinea los elementos flexibles
en el elemento
en el eje cruzado
pero yo lo que quería
era el contenido
¿vale?
no era todo el item
pero bueno
no pasa nada
ya no pasa nada
solo que el box está muy grande
el height
a ver
vamos a ver
sí sí no
puede ser
puede ser
que a lo mejor es eso
que está muy grande el height
o sea que al final
haciéndolo así
el tema es
que haciendo
el align items
vamos a ver correctamente
que esto sí que lo está haciendo así
o sea
esto sería con el multilínea
o sea ya
eso ya lo he tenido claro
que lo hemos tenido así
o sea
el tema es
que con esto
estaríamos centrando
ahora vamos a decirlo bien
desde el principio
¿vale?
y porque el problema está
que es cuando tenemos
más de una línea
solo que utiliza el content
y ya lo hemos liado
el justify content
la distribución del espacio
en el eje principal
¿vale?
o sea que esto lo que haría
es centrar
en el eje principal
que es la fila
justify content center
fíjate la diferencia
y luego en el align item center
lo que vamos a hacer
es centrar
los elementos flexibles
en la dirección cruzada
que serían en este caso
las columnas
pero también
si le diésemos la vuelta
lo veríamos al revés
o sea veríamos
que el primero
el primero
el justify content
vamos a hacer esto
el justify content
lo está haciendo
lo está centrando
claro en este caso
no se vería ninguna centrada
y el align items
lo estaríamos haciendo
en el eje cruzado
que serían las filas
o sea
lo estaríamos centrando
a nivel de filas
¿vale?
ese sería el tema
vamos a dejarlo en row
¿vale?
y ya lo tenemos así
entonces ya tenemos
el tema este
de la align
claro es que
el tema del align content
es que tenéis razón
que es que tendríamos
que tener más de unas filas
o sea
tendríamos que ponerle aquí
que fuese grab
y aquí en el align content
sí que podríamos ver
una diferencia
podríamos ver una diferencia
si le pudiéramos
a ver
500
o algo así ¿no?
y a ver flex end
flex start
vale
aquí sí que lo tenemos
el tema es que yo pensaba
que con el align content
con una sola línea
le íbamos a poder ver
el align content
lo que
como vais a ver
es
por defecto
lo está haciendo
que ocupe
todo el espacio
que puede
pero le podríamos decir
oye ponlo solo al principio
lo agrupas ahí
lo podríamos poner al final
esto es lo que estaba intentando
y luego lo podríamos poner
en el centro también
vale
y entonces así
en lugar de intentar utilizar
con el
lo dejas vacío
lo que va a intentar
es dejar
o utilizar el máximo espacio disponible
para el contenido
para las dos líneas
yo pensaba que con una línea
iba a funcionar
no ha funcionado
y eso es lo que me ha vuelto
un poco loco
vale
pero aquí sí que podemos ver
un poco la diferencia
la diferencia entre
alinear los items
vale
a alinear el contenido
la diferencia
la tenéis aquí
porque si esto
el align items
este
es a nivel
de cómo se alinean
en el eje cruzado
el centro
si le ponemos flex start
lo que vamos a ver
fíjate que este
ha subido para arriba
este para arriba
y tal
el align items
lo que vamos a hacer
es en el eje cruzado
que en este caso
son las columnas
al ponerle el center
vamos a ver aquí
que lo centra
pero dentro de la fila
está centrando la columna
el align content
sería a nivel
de todo el contenedor
si queremos todo el contenido
lo queremos al principio
si lo queremos al final
o queremos en el centro
y cuál ha sido mi error
que al principio
me he vuelto todo loco
y por qué no me funcionaba
mi error
es porque
pensaba que en una línea
iba a funcionar igual
que en una línea
esperaba que el contenido
como solo era ese espacio
también lo hiciese
pero no
lo correcto era utilizar
el align items
que eso era
justamente lo que quería hacer
de que se centrase
esa línea
dentro del eje
de la línea
cada una de las columnas
y luego dentro del contenido
pero eso lo íbamos a poder ver
cuando teníamos
más de una línea
todo el contenido
si lo íbamos a poder
centrar al principio
al final
o en el centro
así que por eso
ya veis
que es súper interesante
y súper importante
y por eso hay que jugar
al Flexbox Froggy
porque hay que practicar
este tipo de cosas
también os digo
que es verdad esto
que muchas veces
y es interesante
este tipo de cosas
lo más importante
que es importante
sabérselo
pero el align content
no se suele utilizar tanto
los que se suele utilizar más
son estos dos
uno para el eje principal
el justify
sería para el eje principal
en este caso
para las filas
porque estamos en row
y luego
el align items
que sería para el eje cruzado
¿vale?
que en este caso sería
cada una de las columnas
dentro de las filas
lo que me decíais mucho
que es muy interesante
es el align self
y es que dentro
de todo el orden
que hemos hecho
podríamos detectar
cada uno de los elementos
imagínate
vamos a poner
que el elemento 2
y el elemento 4
¿vale?
lo vamos a poner de color
bueno, elemento 5
lo vamos a poner
de color azul
y queremos que los
de color azul
ellos
por lo que sea
no se centren
¿veis que ahora
están centrados en el eje?
dentro de este eje
están centrados
pues podríamos decirle
que se alinee el mismo
le podemos cambiar
el alineamiento
le podemos decir
que se alinea arriba
o que se alinea abajo
y esto puede ser
muy interesante
para cuando tenemos
un montón de elementos
que los hemos centrado
y por lo que sea
ya sea una oferta especial
o lo que sea
podemos dentro
de un elemento
decirle
bueno
quiero que ese elemento
él
se alinee
de forma diferente
a como el padre
está diciendo
que se tienen que alinear
porque es el padre
el que dice
como se alinean
los elementos
pero uno mismo
puede decidir
bueno
yo voy a ser una excepción
y yo quiero centrarme
al principio
¿vale?
yo me voy a alinear
a la parte más de arriba
o al revés
podéis hacer que todos
se alinean arriba
y algunos pues abajo
en el centro
y todo esto
y para eso
es el align self
para una excepción
no para algo
no para hacerlos
o centrarlos todo
¿vale?
y está bastante chulo
la verdad
una cosa que no he hecho
y que os recomiendo mucho
que está muy chula
es que las herramientas
de desarrollo de Chrome
están súper súper súper bien
las de Chrome
y las de Firefox
las de Safari
no tanto
pero están bastante bien
justamente por esto
fijaos que aquí tenéis esto
que le podéis dar un clic
y aquí tenéis
con unos iconitos
súper chulo
podéis ver Flex Direction
¿veis?
y podéis incluso cambiar
visualmente
como lo podéis ver
¿vale?
le podéis dar a cada una
de unas
¿vale?
y vais viendo
cómo se va comportando
si es Flex Grab
o no Grab
si el contenido
se tiene que centrar
o no se tiene que centrar
y vais poniendo
en tiempo real
cómo le afecta
cada una de estas cosas
y se van a ir cambiando
y modificando
cada una de las propiedades
es que esto está súper bien
porque vais a entender
muy fácilmente
cómo funciona
cómo se ve
qué es lo que pasa
por qué esto no funciona
qué es lo que necesitas
y tal
y es tan fácil
como darle
a un iconito
que es este iconito de aquí
y veis aquí
como un
como una previsualización
un poco de cómo va a quedar
y cuando le deis clic
pues va a cambiar
tanto el valor
el valor
en el CSS
aquí
como la previsualización
que tenéis aquí
así que si tenéis problemas
como los que he tenido yo
que debería haber tenido
que tendría que haber revisado
pues ya sabéis
que lo podéis ver aquí
con las herramientas de desarrollo
selecciona el del padre
bueno
el del padre
es el que he seleccionado
¿no?
ah
¿no es seleccionado del padre?
yo diría que sí
¿no?
ah
aquí
ah
es verdad
que no es seleccionado
el del padre
no es seleccionado del padre
tienes razón
es seleccionado el del hijo
que bueno
que también le afectaba igualmente
pero bueno
que estaba interesante
pero sí es verdad
que no es seleccionado del padre
es seleccionado del hijo
pero aún así
esto es lo básico
y CSS
bueno
a ver
CSS
yo lo dije un día
CSS es un lenguaje
que es bastante más complejo
de lo que parece
porque tiene un montón
un montón de cositas
y ahora nos queda justamente
GRID
que GRID
es bastante más importante
la de cosas que se puede hacer
y que es bastante complejo
así que de deberes
lo que si no lo habéis hecho nunca
yo creo que deberías hacerlo
CSS es un lenguaje de programación
no
lo hemos dicho 80 veces
me parece una chorrada
el tema de discutir
si es de programación o no
pero sí que es un lenguaje
y eso no hay ningún tipo de duda
o sea
discutir eso sí que es una chorrada
porque CSS es un lenguaje declarativo
para el diseño de las páginas web
bueno
os dejo como deberes
que le dais cañita
al Flexbox Froggy
que es increíble
y que al final tenéis 24 niveles
y que estoy seguro
que con todo lo que habéis aprendido
no vais a tener ningún problema
para pasároslo
y que os va a ayudar un montón
así que muchas gracias
gracias por la paciencia
por el error ahí
que hemos cometido de Flex
la verdad es que
no sé por qué
lo he hecho ahí súper
pero bueno
es que es normal
pensar que hay dos horas
que no me he preparado nada
y que al final
pues lo hemos hecho ahí
a salto de mata
y tiene estas complejidades
que a veces pasa
pero gracias por vuestra paciencia
que lo hemos hecho
con todo el cariño del mundo
y ya está
con todo el cariño del mundo