Masterización de diseños: cuadrícula de CSS y Flexbox Essentials

1. Introducción a la clase: Hola, y bienvenidos a nuestros nuevos diseños de clase, cuadrícula CSS y Flexbox esencial Hola. Por nombre es Jota coche corto y mesa Steck completa e instructor en línea Este curso integral está diseñado para ayudarte a construir wavesita de respuesta, flexible y de aspecto profesional, utilizando dos de las herramientas Ces más potentes. Cuadrícula CSS y CSS Flexbox. CSS grid es un sistema de diseño bidimensional que cambia el juego que permite un control preciso sobre filas y columnas, y Flexbox simplifica el diseño unidimensional Creando una alineación y espaciado perfectos para diseños dinámicos adaptables, y vamos a comenzar esta clase con la cuadrícula Ces. ¿Qué es el diseño de cuadrícula Css? Después aprendemos, rejilla Cess, fila de construcción y columnas. A continuación aprenderemos, Ces grid gap putorial Entonces grep, grit spani línea de cuadrícula Nombre, cuadrícula am, función minmax, cuadrícula implícita explícita, alineación de cinta de rejilla, alineación de pista , pies de auto autop, pies de rejilla, propiedad de agua de cuadrícula, cuadrícula anidada, elementos de cuadrícula superpuesta, etcétera Después vamos saltando a la sección CSS Flexbox. Él bar, reacción flexbox, flexbox wrap, flexbox flow, flexbox justify content, flexbox alineación, flexbox an content, flexbox ansel, flexbox order, flexbox property, flexbox brow property, flexbox basics, string, margin ato, C flexbox, flex anidado, al fin, aquí creamos un proyecto usando CSS Flexbox . Creará un desplegable, navegación principal. Este es el curso completo sobre arenilla Sess y la caja de Sess Ples. Al final de la clase, estará seguro de usar Sess greet and Pledge Box para crear un diseño receptivo y flexible que se adapte simplemente a cualquier dispositivo Tanto si eres principiante como si buscas mejorar tu habilidad b des, esta clase te equipará con todo lo que necesitas para reunir capas b ¿A qué esperas? Empecemos juntos. 2. Qué es el diseño de cuadrícula de CSS: Hola, chicos, bienvenidos de nuevo. En este tutorial, te voy a presentar qué es la cuadrícula CSS y cómo funciona. ¿Por qué deberíamos usar CSS grid? El primer nefdes, es un sistema de cuadrícula bidimensional. Es un nuevo sistema de maquetación. Lo llamamos bidimensional porque podemos manejar columnas rosen juntas Nuestro segundo beneficio es que el la cuadrícula reemplaza el diseño de flotación. Ya no necesitamos usar la propiedad float, como el nivel de margen, y no necesitamos enfocarnos en float left y float right. Podemos crear diseños muy fácilmente. Nuestro tercer beneficio es, crear nuestro código muy primero y diez. Porque no necesitamos enfocarnos en las propiedades flotantes, y esto aumenta la legibilidad del código Nuestro cuarto beneficio es que no necesitamos usar ningún framework CSS, como bootap, foundation, Cass materializado, etcétera Porque si entiendes la cuadrícula correctamente, entonces no necesitas usar ningún framework. Porque puedes manejar todas las cosas con Css grid. Tratemos de entender cómo funciona realmente la cuadrícula. Supongamos que esto es un profundo. Dentro de esta profundidad, tenemos seis deeps diferentes, y llamamos a esta estructura sistema de cuadrícula Sin usar flotación y margen, podemos proporcionar brechas aquí, y podemos manejarlo juntos. Llamamos a este contenedor padre es contenedor de cuadrícula. Para crear este contenedor de cuadrícula, necesitamos usar una propiedad CSS en nuestro padre, que es la propiedad display, display grid. Cuando usamos la cuadrícula de propiedades de visualización, automáticamente asume este contenedor padre como un contenedor de cuadrícula. Como puedes ver todos los elementos en este deb, lo llamamos elementos de cuadrícula Aquí puedes ver un deb individual, lo llamamos grid cell, y aquí puedes ver algunas líneas entre estas profundas, y lo llamamos grid line Aquí puedes ver cuatro líneas de cuadrícula. Todas estas son líneas verticales. Aquí se puede ver un hueco entre estas dos celdas, lo llamamos cuneta De igual manera, estas líneas son de trabajo en vertical. Como te dije, es trabajo en dos dimensiones, y podemos manejarlo muy fácilmente, y se trabaja como celdas de tabla, fila y columnas. Aquí se puede ver de acuerdo a la estructura, tenemos dos filas de cuadrícula en nuestra imagen. Aquí se puede ver en bordes amarillos, lo llamamos columnas de cuadrícula. Aquí se puede ver un hueco entre filas y columnas, y lo llamamos área de cuadrícula. En nuestros próximos videos, vamos a entender cómo podemos crear cuadrículas. En nuestro próximo video, voy a cubrir todas las propiedades de la cuadrícula en esta serie de tutoriales. También vamos a aprender cómo podemos crear un hermoso diseño usando las propiedades de la cuadrícula. Aquí puedes ver el nombre del navegador, que puede soportar nuestro sistema de cuadrícula. Internet Explorer no es compatible sistema de cuadrícula, compatible con H, compatible con Firefox, compatible con Chrome, compatible con Safari y también soporte para operadores. La mayoría de las veces, estamos trabajando con Chrome Safari y Firefox. Gracias por ver este video, Estatuto para nuestro próximo Tutorial. 3. Creación de cuadrícula de CSS con filas y columnas: Hola, chicos, me alegro de verles de vuelta. En este tutorial, vamos a aprender cómo podemos crear cuadrículas. Vamos a comenzar con dos propiedades. Nuestra primera propiedad es la columna de tabletas griegas, y nuestra segunda propiedad es la fila de tabletas griegas. Empecemos la práctica y tratemos de entender cómo funciona. Aquí puedes ver, ya creo un documento esteml, y abro este documento estel usando la extensión Live Server En nuestro lado derecho, puedes ver nuestro navegador web. Primero, voy a crear una D donde voy a crear un contenedor de cuadrícula. Dep Además, voy a asignar una clase a este contenedor de clase profunda Y dentro de esta profundidad, voy a crear otros seis deeps, D, y voy a establecer un ítem de clase y un ítem uno Voy a duplicar esta profundidad por cinco veces. Aquí utilizo varias clases, y voy a cambiar el nombre de la clase. Tema dos, ítem tres, ítem cuatro, ítem cinco y ítem seis. Dentro de esta profundidad, voy a escribir algún texto. Primero, segundo, tercero, cuatro pi, y el último es seis. Si pongo este expediente, aquí se pueden ver todos los deeps, primero, segundo, tercero, cuarto, quinto y sexto Primero, voy a establecer un color de fondo a este contenedor, contenedor punto fondo gris. Yo configuro este archivo, aquí se puede ver el resultado, y también voy a asignar una w a este contenedor. W, 700 píxeles. También voy a darle margen a este contenedor. Margen, para arriba, voy a usar 50 píxeles. Para Lp, voy a usar cero. Para bottom, voy a usar cero, y F p, voy a usar 50 pixel. Si configuro este archivo, aquí puedes ver el resultado, y ahora voy a proporcionar color diferente para diferentes artículos. Entonces voy a crear un elemento selector de punto uno. También voy a establecer un fondo a este ítem. Si configuro este archivo, se puede ver el resultado, y ahora voy a duplicar este ítem varias veces. Para el ítem dos, voy a decir color naranja. Para el ítem tres, voy a decir color verde. O punto cuatro, voy a decir color amarillo. O punto cinco, voy a decir color azul. Para el ítem seis, voy a decir color morado. Si configuro este archivo, puedes ver los resultados. Larry puede ver todo el color en nuestra t. volvamos al padre D, qué clase es contenedor? Voy a usar una propiedad, que es display, y voy a usar display grid. Si configuro este archivo, aquí se puede ver, no hay cambios porque no creamos fila y columna a esta cuadrícula. Primero, voy a crear columnas, así que voy a usar columna de plantilla de cuadrícula. Aquí podemos mencionar cuántas columnas queremos. Con eso, podemos mencionar anchuras de columna. Supongamos que quiero dos columnas, O primeras columnas, 200 píxeles de ancho, y nuestras segundas columnas, 250 píxeles Si configuro este archivo, aquí podemos ver, es crear nuestras columnas. Nuestra primera toma de columna, 200 píxeles de ancho y nuestra segunda columna toma 250 píxeles de ancho. Aquí puedes ver en una fila, creamos dos columnas. Supongamos que quiero cambiar el peso de la primera columna, algo de 350 píxeles. Si configuro este archivo, se puede ver el ancho de columna. Del mismo modo, podemos establecer la altura usando otra propiedad. Déjame mostrarte. Crea filas tate. Aquí podemos definir cuántas filas queremos. Aquí puedes ver, tenemos un total de tres filas en nuestro contenedor padre t. Para nuestra primera fila, quiero establecer una altura de 100 píxeles. Si guardo este archivo, aquí se puede ver el resultado. Es aplicar solo para nuestra primera fila. Para nuestra segunda fila, quiero establecer una altura de 200 píxeles. Para nuestra tercera fila, quiero establecer una altura de 100 píxeles. Si guardo el archivo, aquí puedes ver el resultado. Si nota, no afecta el ancho de nuestro contenedor, que es de 700 píxeles. No sólo eso, podemos agregar otra columna a esta d. Para ello, primero, voy a reducir el valor de esta primera columna. 150 píxeles. Para nuestra tercera columna, voy a tomar 150 píxeles una vez más. 150 píxeles una vez más. Si configuro este archivo, aquí podemos ver el resultado. Ahora crea tres columnas. Aquí podemos ver para nuestra primera fila, estableció una altura de 100 píxeles, y para nuestra segunda fila, estableció una altura de 200 píxeles, y no hay una tercera fila en este contenedor. Si tuviéramos la tercera fila en nuestro contenedor, va a establecer una altura de 100 píxeles. Déjame mostrarte. Quiero duplicar este artículo una vez más. Yo puse este archivo, lo siento, tenemos que dublgate nuestro profundo, no este Si dublgate esto profundo y configuro este archivo, aquí puedes ver el resultado Aquí puedes ver para nuestra tercera fila, crea una altura de 100 píxeles. Porque mencionamos 100 píxeles de altura para nuestra tercera fila. Aquí puedes ver un espacio en blanco, y ahora quiero llenar este espacio en blanco con nuestra tercera columna. Para ello, necesitamos usar una propiedad, que es auto. Si configuro este archivo, aquí se puede ver, se llena el área con nuestra última columna. Va a llenar todo el espacio restante con nuestra tercera columna. Supongamos que quiero cambiar nuestra segunda columna con, 100 píxeles. Si configuro este archivo, puedes ver el resultado. Si utilizo auto para nuestro segundo peso de columna, y si utilizo este valor para nuestro tercer peso de columna, y si configuro este archivo, aquí puedes ver un resultado. Ahora puedes ver nuestra primera columna tomar 150 píxeles de peso y nuestra última columna tomar 100 píxeles nosotros. Y nuestro espacio soso cubierto con segunda columna porque usamos valor automático para nuestra segunda columna Déjame mostrarte una cosa. Si usas el navegador Firefox o Chrome, solo tienes que pulsar E 12. Es la opción de desarrollador abierta en tu navegador. Si destacas el continente profundo, aquí puedes ver una opción llamada grit También se puede ver la propiedad, mostrar grano. También se puede ver un icono de grano de aire. Se llama Grit Editor. Si haces clic en él, aquí puedes ver muchas opciones. Por ahora, no voy a explicarlo. Voy a explicar todas las cosas más adelante, así que la cierro. Pero si hago clic en esto, opción de cuadrícula, aquí se puede ver alguna línea, y también se pueden ver los números de línea, y nosotros lo llamamos líneas de cuadrícula. Sólo es posible si se utiliza la propiedad de cuadrícula de visualización. Aquí puedes ver, usamos píxeles, pero también podemos usar porcentaje. Déjame mostrarte. Supongamos que quiero usar dos columnas. Para la primera columna, quiero usar el 40%. Para nuestra segunda columna, quiero usar 30%. Si configuro este archivo, aquí se puede ver el ds. Nuestra primera columna cubre 40% del área de nuestro ancho total de contenedor. Y ahora quiero usar tercera columna, y para nuestra tercera columna, voy a usar auto win. Si configuro este archivo, puedes ver el resultado. Nuestra primera columna toma 40% o segunda columna toma 30%, y nuestra tercera columna también toma 30%. Porque nuestra primera y segunda columna toman 70%. Si I -70% de 100%, El valor restante es 30% Por eso es tomar 30%. No sólo eso podemos usar pixel con porcentajes. Supongamos que para nuestra primera columna, quiero usar 100 píxeles. Si configuro este archivo, puedes ver el resultado. Nuestra primera columna es de 100 píxeles y nuestra segunda columna toma el 30% del ancho de nuestro contenedor y nuestra tercera columna cubre el espacio restante. No sólo que hay otra unidad, que es Afer significa fracción. Supongamos que 12 columna de una Afer y otra es una A. Si guardo este archivo, aquí se puede ver la mitad nuestro contenedor d. nuestra primera columna tomar, primera mitad y nuestra segunda columna tomar o segunda mitad. Si utilizo otro un valor y guardo este archivo, aquí puedes verlo crear un total de tres columnas, y todas las columnas toman un ancho similar, un ancho similar. Es igualmente dividir el ancho del contenedor, que es 700. Si utilizo dos un valor para nuestra tercera columna, y luego guardo el archivo, aquí podemos ver nuestra tercera columna tomar dos veces espacio luego nuestra primera columna y segunda columna. Aquí, puedes ver que podemos controlar rejillas sin usar float A continuación, voy a usar otra propiedad que es grid gap. Déjame mostrarte. Voy a usar 15 píxeles. Si configuro este archivo, aquí se puede ver, es proporcionar igual hueco entre filas y columnas. Si hago clic en esta opción de cuadrícula, la puedes ver. Ahora se puede ver con claridad. En el siguiente tutorial, te voy a explicar claramente, y hay otra unidad que podemos usar como un valor de columna de plantilla de cuadrícula, que es repetir. Déjame mostrarte. Repetir es básicamente una función. Supongamos que quieres dos columnas con igual ancho. En nuestro primer parámetro, necesitamos pasar cuántas columnas queremos. En nuestro caso dos, y luego hay que pasar el tamaño de ancho, que es de 150 píxeles. Si configuro este archivo, aquí podemos ver el resultado. Aquí sí necesitamos escribir el valor de ancho varias veces. Si queremos cuatro columnas, solo necesitamos teclear cuatro aquí. Si guardo este archivo, aquí se puede ver el resultado. Crea cuatro columnas con el mismo ancho. Por ahora, voy a usar dos columnas. Con eso, quiero usar uno por columna. Sí, podemos hacerlo. Escriba uno f R. Si guardo este archivo, aquí puede ver el resultado. Primero, creamos dos de igual tamaño con columna, y luego cubrió el espacio restante con nuestra tercera columna. Del mismo modo, podemos usar el valor porcentual y el valor de píxel aquí. Déjame mostrarte. Supongamos que quiero 40% de columna. Si guardo este archivo, aquí se puede ver el resultado. De igual manera, podemos usar nuestra unidad de fracción en nuestras reglas. No sólo eso, podemos usar la unidad de fracción para nuestras reglas. Pero antes voy a establecer una altura a nuestro contenedor padre. Altura. 700 píxeles. Si configuro este archivo, aquí puedes ver el resultado. Ahora quiero dos filas con igual altura. Entonces voy a usar la función de refit, dos filas con una f de altura Si configuro este archivo, aquí puedes ver el resultado. Aquí puedes ver que está dividido por partes iguales entre filas. Este valor sólo se aplica para dos filas primera y segunda. Si utilizo tres y luego configuro el archivo, aquí puedes ver que todas las tres filas están divididas por igual. Su altura es igual. Del mismo modo, podemos usar el valor de píxel aquí. Supongamos que para nuestra primera fila, voy a usar 100 píxeles. Para nuestra segunda fila, voy a usar el 30%. Para nuestra tercera fila, voy a usar una unidad AR. Si configuro este archivo, ahí se puede ver el resultado. Espero que ahora el concepto sea claro para ti. Estas dos propiedades son las más importantes para crear una estructura de cuadrícula. Nuestro primer nombre de propiedad es la columna de plantilla de cuadrícula, y nuestro segundo nombre de propiedad es el rol de plantilla de cuadrícula. En nuestro siguiente tutorial, vamos a entender qué es la brecha de cuadrícula. Gracias por ver este video, estén atentos para nuestro próximo Tutorial. 4. Tutorial de brecha de cuadrícula de CSS: bueno verlos de vuelta chicos, en este tutorial, vamos a aprender una nueva propiedad, red CSS grid, que es CSS grid gap. Tenemos un total de tres propiedades relacionadas con la brecha de cuadrícula. Nuestra primera propiedad es la brecha de fila de cuadrícula, y nuestra segunda propiedad es la brecha de columna de cuadrícula y la última es la brecha de cuadrícula. Tratemos de entender cómo funciona la propiedad de brecha de cuadrícula. Aquí se puede ver una brecha entre los elementos de la cuadrícula, llamamos brecha de cuadrícula. Si viene con fila es, entonces lo llamamos brecha de fila. Si viene con columna sabia, entonces lo llamamos brecha de columna. Empecemos lo práctico y tratemos de entender cómo es. Aquí puedes ver lado a lado, abro mi visa studio Creator y mi navegador usando la extensión del servidor Light, y ya creé el documento ESTEML en mi directorio Aquí puede ver, un total dos columnas de cuadrícula con un valor e, y tener un total de tres filas en nuestra cuadrícula, 100 píxeles, 150 píxeles y 100 píxeles. Entre estos rubros, quiero poner un hueco. Tal vez la fila es tal vez la columna sabia. Primero, quiero usar row is gap. Voy a usar un hueco de fila de cuadrícula de propiedad. Y quiero asignar una brecha de diez píxeles entre estos roles. Déjame mostrarte diez píxeles. Si configuro este archivo, aquí puedes ver el resultado. Aumentemos el valor, 30 píxeles. Aquí puedes ver las brechas entre roles. Se puede aumentar el tamaño de la brecha, la cantidad que desee. Esto es brecha de fila. Si desea espaciar entre columnas, entonces necesita usar la propiedad de brecha de columna de cuadrícula. Déjame mostrarte. Voy a escribir grilla columna gap. Voy a usar 20 pixel gap entre columnas. Si guardo este archivo, ¿cómo ves el resultado? Aquí podemos ver que el hueco de fila es 30 píxeles y el hueco de columna es de 20 píxeles. No solo eso, podemos usar cierta propiedad para estas dos propiedades. Para estos, necesitamos usar la propiedad d gap. Déjame mostrarte brecha. Primero, tenemos que pasar el valor de la fila, y luego tenemos que pasar el valor de la columna. Para fila, voy a usar 20 píxeles. Para columna, voy a usar 30 píxeles. Si usamos la propiedad d gap, necesitamos usar esta propiedad más. Voy a quitarlo. Si configuro este archivo, aquí podemos ver el resultado. La distancia entre filas es de 20 píxeles, y la distancia entre columnas es de 30 píxeles. Si utilizo igual valor para hueco de fila y hueco de columna, 30 píxeles para fila y 30 píxeles para columna, y guardo este archivo, aquí puede ver el resultado. Ahora quiero mostrar tres columnas en nuestro contenedor. Quiero escribir, repetir la columna C. Si guardo este archivo, aquí puedes ver el resultado. Además, se puede ver esta brecha similar entre los elementos de la cuadrícula. Aquí puedes ver un espacio en blanco porque utilizamos tres lados de fila diferentes. Si elimino este , me refiero al último, y configuro este archivo, Ahora se puede ver que no hay hueco. Nuestra altura de primera fila es de 100 píxeles y nuestra segunda fila HT es de 150 píxeles. Espero que ahora esté claro para usted, qué es la propiedad GID gap. Gracias por ver este video, estén atentos para nuestro próximo Tutorial. 5. Tutorial de posicionamiento de elementos de cuadrícula de CSS: Una vez más, estoy de vuelta con un nuevo tutorial reed Css grid. En este tutorial, vamos a aprender Cs grid it position. Tratemos de entender qué son los elementos de la cuadrícula. ¿Cuál es el significado de la posición del elemento de la cuadrícula? Aquí puedes ver un padre profundo y lo llamamos grid container. Todo lo profundo dentro del contenedor padre, lo llamamos elementos de cuadrícula. Ahora la pregunta es, ¿cuál es el significado del posicionamiento? Supongamos que desea mover el elemento de la rejilla tres en el lugar PP. También decides mover a Pi uno es el tercer lugar, algo así, y lo llamamos posicionamiento de cuadrícula. Como pueden ver, movemos el tercer ítem en el quinto lugar. De igual manera, movemos el quinto ítem en el tercer lugar. Relacionado con esta alineación, tenemos algunas propiedades sess. Déjame mostrarte. Como puede ver, tenemos propiedades proto siete seses, como inicio de fila de cuadrícula, final de fila de cuadrícula, fila de cuadrícula, inicio de columna de cuadrícula, e. Por fin, tenemos una propiedad acortada llamada área de cuadrícula Vamos a saltar a las vasijas al coator y tratar de entender cómo es así Aquí pueden ver, ya creo un documento de estimación, y abro mi navegador y mi calentador de bacalao lado a lado. Si te muestro, aquí puedes ver, tenemos un contenedor padre. Dentro de este contenedor padre, tenemos un total de seis de profundidad. Me refiero a seis elementos de la cuadrícula. Como puede ver, cada color de elemento de cuadrícula es diferente. Al principio, voy a mover el primer elemento de la cuadrícula al sexto lugar. Y de manera similar, voy a mover el ítem de seis cuadrículas al primer lugar. Como puedes ver, ya creamos nuestros selectores. Tema uno ítem dos, ítem tres. Como te dije anteriormente en esta serie de tutoriales, tenemos una opción de navegador en nuestra consola, que son las líneas de cuadrícula. Déjame mostrarte. Simplemente selecciona tu navegador y presiona pw me deb per mole. Voy a abrir este panel abajo de mi navegador. Voy a presionar esta opción. Aquí puedes ver una opción en mi contenedor de pluma, que es grid. Si hago clic en él, aquí pueden ver algunas líneas. Ahora puedes ver los números de línea de cuadrícula. Se puede ver la fila sabia. También lo puedes ver en columna sabia. En este tutorial, vamos a entender cuál es el caso de uso de estas líneas. Vamos a saltar al nuestro primer selector de elementos, W es el elemento uno. Como ya les dije, voy a mover este primer ítem en seis posiciones. Al principio, voy a usar una propiedad, que es el inicio de fila de codicia Al principio, necesitamos mover este elemento de la cuadrícula en la segunda fila. Como pueden ver, esta es la segunda fila. Voy a teclear dos aquí. Si configuro este archivo, ahora puedes ver nuestro ítem de primer grado pasar a la segunda fila, y también necesitamos declarar la posición final. Para ello, necesitamos usar otra propiedad de Sess, que es la fila de cuadrícula n. Una vez más, si te muestro mis líneas de cuadrícula, aquí puedes ver, o n posición es tres Por eso tenemos que pasar tres. Si usa la propiedad de ron de grano, tal vez crea algún problema cuando responde DE lado Si configuro este archivo, aquí se puede ver, no hay cambios. Pero es buena manera de usar esta propiedad. Ahora necesitamos trabajar con columnas. Como puede ver, necesitamos mover este elemento de la cuadrícula a la tercera posición. Para ello, voy a usar otra propiedad cess, grilla columna tercera. Aquí, voy a poner tres. Si configuro este archivo, puedes ver el resultado. Trasladamos con éxito nuestro primer artículo leído en el sexto lugar. Además, necesitamos declarar la posición n de esta columna, leer columna. Como pueden ver, nuestra fila termina en cuarta posición. Tienes que pasar cuatro. Si configuro este archivo, aquí puedes ver que no hay cambios. No es obligatorio, pero para fines receptivos, es muy importante. Ahora quiero mover este cuarto ítem en primera posición. Para eso, voy a copiar el código, y voy a saltar al cuarto selector de ítem, y voy a pasar el código. Nuestras filas iniciales, tipo uno, y nuestra fila final es dos. De igual manera, como puede ver, nuestra columna comienza con uno y termina con dos. Entonces para escribir columna iniciar uno y columna dos. Si me siento este archivo, aquí se puede ver el resultado. Trasladamos con éxito nuestro cuarto contenedor en primer lugar. Pero lo importante es que no cambiamos nuestra estructura etermal Aquí puedes ver nuestra estructura eteral. Usando las propiedades CSS greet, podemos cambiar sus posiciones sin cambiar su estructura real. Ahora te voy a mostrar el método taquigráfico, todas estas propiedades Ahora quiero mover el quinto ítem en primer lugar. Salto al selector de quinto elemento, y luego voy a usar una propiedad de cuadrícula de casos diferente. Si desea crear una taquigrafía para fila, entonces necesita usar la propiedad de fila de cuadrícula Déjame mostrarte. Fila de rejilla. Primero, necesitamos proporcionar la posición de fila inicial , que es una, y luego necesita usar s, y luego debe proporcionar la posición de fila final , que es dos. Del mismo modo, tenemos propiedad taquigráfica para columna, que es columna de cuadrícula Déjame mostrarte. Nuestras columnas comienzan con la línea número uno y terminan con la línea número dos. Si me senté este archivo, aquí pueden ver, movemos con éxito nuestro artículo de quinto grado en primer lugar. Pero ¿qué pasa con el artículo de cuarto grado? No eliminamos artículo de cuarto grado de este contenedor. Todavía existe en primer lugar. Apenas el punto cinco, se superpone al cuarto. Por eso no podemos ver el cuarto. No sólo eso, tenemos otra taquigrafía de esta propiedad Usando esta taquigrafía, podemos pasar cuatro valores a la vez, que es el área de la cuadrícula Déjame mostrarte. Supongamos que quiero mover el sexto ítem en segundo lugar. Para esto, necesitamos proporcionar inicio de fila y punto de inicio de columna. Nuestro punto de inicio de fila es uno, y nuestro punto de inicio de columna es dos, y luego necesitamos proporcionar punto final de fila y el punto final de columna. Nuestro punto final de fila es dos y nuestro punto final de columna es tres. Si configuro este archivo, aquí pueden ver, movemos con éxito nuestro contenedor seis en segundo lugar. Solo necesitas usar una propiedad de cuadrícula CSS, que es el área de cuadrícula. Solo necesita recordar, primero, debe proporcionar el punto de inicio de la fila y luego debe proporcionar el punto de inicio de la columna. A continuación, debe proporcionar un punto final de fila y debe proporcionar un punto final de columna. Espero que ahora te quede claro cómo funcionan las filas y las columnas. Hay muchos métodos en los que podemos posicionar nuestras cuadrículas. En mis próximos videos, te voy a enseñar a todos ellos. En nuestro siguiente tutorial, vamos a aprender cómo podemos cubrir nuestros elementos de cuadrícula. Supongamos que quieres cubrir tu tercer artículo. Solo quiero llenar esta área en blanco con este tercer ítem. Significa que va a tomar dos columnas ocho. Recuerdo este método span. Así que estén atentos para nuestro próximo tutorial. Gracias por ver este video. Nos vemos pronto. 6. Tutorial de expansión de elementos de cuadrícula de CSS: alegro de verlos una vez más, estoy de vuelta con un nuevo tutorial relacionado cess grid. En este tutorial, vamos a aprender Ces grid spanning Pero antes de comenzar lo práctico, necesitamos entender cuál es el significado de span? Vamos a simplificarlo. Aquí puedes ver un contenedor de rejilla. Dentro de este contenedor de rejilla, tenemos proto seis artículos Si notas puedes ver cada d ítem w es el mismo, y ahora quiero extender d1w Quiero extender el artículo número uno hasta dos artículos. De igual manera, quiero extender el ítem dos, la fila es, algo así. Para el ítem uno, utilizamos span de columna. Para el artículo dos, utilizamos el tramo de fila y otros artículos dispuestos automáticamente en su propio lugar. Empecemos la práctica y tratemos de entender cómo funciona. Aquí se puede ver, lado a lado, abro mis ises a la chaveta y mi navegador usando la extensión ligera del servidor Como puede ver, tenemos un total seis artículos de cuadrícula en nuestro contenedor padre, y lo organizamos en serie. Empecemos por las líneas de la cuadrícula. Voy a presionar dos. Si hago clic en esta opción, pueden ver las líneas de la cuadrícula, y ahora quiero abarcar nuestro primer ítem Arguías de columna, y quiero extender esta columna hasta la línea número tres Voy a escribir grilla columna n tres. Ya sabes que el ítem n es nuestro primer artículo. Si guardo este archivo, aquí se puede ver el resultado. Abarcar con éxito nuestro primer elemento de cuadrícula. Columna uno. Si te das cuenta, puedes ver todos los elementos de la cuadrícula cambian automáticamente sus lugares. Se puede ver que el ítem número seis ha bajado y no especificamos ninguna altura a nuestra tercera prima. Por eso se ve pequeño. Ahora voy a especificar altura para este tercer sorteo, cien píxeles. Si configuro este archivo, ahora puedes ver el resultado. Nuestra altura de primera fila es de 150 fixel, y nuestra segunda altura de fila es de 150 fixel, pero nuestra tercera altura de fila es de 100 píxeles Una vez más, voy a encender mis líneas de cuadrícula. Y ahora quiero extender nuestra segunda fila de ítem sabiamente, y quiero extenderla de este punto a este punto significa cuatro. Para ello, necesitamos trabajar con estas dos propiedades. Voy a copiar estas propiedades y pegarlas aquí. Voy a cambiar el punto final de gran fila, que es cuatro. Si configuro este archivo, aquí puedes ver el resultado. Ahora se ve como una página web. Este es nuestro encabezado, y esta es nuestra barra lateral. No solo eso, podemos usar propiedad de extremo corto para esto. Déjame mostrarte leer fila. Si comento esta propiedad dos, y si tecleo uno, slash, cuatro, y si configuro este archivo, aquí se puede ver el mismo resultado. No hay cambios. Espero que ahora te quede claro cómo funcionan las deletreaciones. Déjame mostrarte una cosa. Aquí puedes ver, tenemos un total de tres columnas con un valor de F. Para este ejemplo, voy a comentar sobre esta propiedad. Una vez más, voy a encender las líneas de la cuadrícula. Aquí puedes ver, tenemos un total cuatro líneas de columna en nuestra estructura. Pero, ¿qué pasó? Si pasamos cinco valor aquí, si configuro este archivo, aquí se puede ver, se extiende nuestra columna con valor por defecto. Ahora tenemos un total de cuatro columnas en nuestro contenedor. Pero aquí se puede ver, no declaramos cuatro columnas. Simplemente declaramos sólo tres columnas. Podemos extender nuestro artículo de rejilla más allá del contenedor. Luego agrega automáticamente elemento de la cuadrícula de acuerdo con el valor de la fracción. Pero esta no es la buena práctica. Voy a usar cuatro. Si pongo esta lámina, se puede ver el resultado. Ahora voy a arreglar el tercer ítem en su posición absoluta. Para ello, dentro del selector de ítem tres, voy a escribir grid row. Además, voy a encender las líneas de la cuadrícula. Nuestro tercer ítem comienza desde R número dos y termina dos fila número tres, y O siguiente propiedad es columna de cuadrícula. También inicia desde la columna número dos y termina en la columna número tres. Si configuro este archivo, se puede ver que no hay cambios. Esta es la posición absoluta del tercer ítem. Ahora no puedo mover esta grilla de este lugar, y ahora quiero extender segunda columna hasta la línea número tres. Para ello, voy a usar la propiedad de columna de cuadrícula. Y nuestro puntal de columna de la línea número uno, y termina en la línea número tres. Si configuro este archivo, ahí se puede ver un resultado diferente. Porque ya colocamos nuestro tercer dip en esa posición, por lo que nuestro segundo ítem de la parrilla no puede tomar su lugar. Luego se encoge automáticamente. Pero si te das cuenta, puedes ver usamos solo la propiedad de columna de cuadrícula. No utilizamos la propiedad de fila de cuadrícula. Si utilizo la propiedad de fila de cuadrícula, déjame mostrarte. Fila, e intenta mover este artículo en este lugar. Déjame mostrarte. Pero primero, voy a encender la línea roja. Nuestra fila comienza desde la línea número dos y termina hasta la línea número tres. Si guardo este archivo, ahora puedes ver un resultado diferente. Ahora se superponen entre sí. Si desea ver el artículo de ver completamente, entonces necesita usar la propiedad de índice D. Déjame mostrarte. Voy a escribir el nombre de la propiedad. Índice Z. Por defecto, viene con cero. Entonces escribe uno. Si configuro este archivo, ahora se puede ver el segundo ítem con completamente. Nuestro tercer ítem aún existe detrás del segundo ítem, y ahora voy a mostrarte el diferente valor que usamos para abarcar, que es span Déjame mostrarte. Tipo de suma, span, y quiero abarcar nuestro primer ítem hasta cuatro columnas, Span, espacio cuatro. Si configuro este archivo, lo siento, no tenemos cuatro columnas en nuestro contenedor. Es por eso que extiende nuestra columna y crea una nueva línea de cuadrícula. Para eso, necesitamos usar span tres. Si configuro este archivo, ahora volvemos a nuestro antiguo resultado. Si te muestro las líneas de la cuadrícula, aquí podemos ver un total de cuatro líneas. Este valor funciona con números de elemento de cuadrícula, y este trabajo con números de línea de cuadrícula. Esta es la principal diferencia entre dos valores, y también podemos abarcarlo sabiamente. Déjame mostrarte. Span T. Si configuro este archivo, ahora abarcamos nuestro primer contenedor, fila también es columna sabia. Debido a que usamos la propiedad ZD dex para nuestro segundo artículo, es por eso que nuestro primer artículo no cubre el segundo artículo Sé que es un poco complicado. Pero estoy tratando de explicarlo simplemente. No sólo eso podemos usar este valor con este valor diferente. Déjame mostrarte. Span dos. Si configuro este archivo, cómo se puede ver el resultado. Por ahora, no lo necesito. Entonces para deshacerlo. Además, voy a cambiar el valor final de la fila de la cuadrícula. Dos. Una vez más, voy a encender las líneas de la cuadrícula. Supongamos que tenemos muchas columnas en nuestro contenedor, y quiero extender el elemento de la cuadrícula roja de principio a fin de este contenedor. Pero no sé cuánta línea de columna tenemos. Para ello, podemos usar puntos menos. Aquí puedes ver un número de línea menos uno. Recuerda, nuestro último número de línea siempre comienza con menos uno. Podemos usar el menos v aquí. Déjame mostrarte. Si tecleo menos uno y configuro este archivo, aquí puedes ver que no hay cambios. Espero que ahora te quede claro cómo son las franjas. Gracias por ver este video, estén atentos para nuestro próximo tutorial. 7. Tutorial de nomenclatura de líneas de cuadrícula CSS: Hola chicos, me alegro de verles de vuelta. En esta arial, vamos a aprender la nomenclatura de líneas de cuadrícula Css. En nuestra tuorial anterior, utilizamos líneas de cuadrícula para extender nuestros elementos de cuadrícula Pero en este terial, vamos a aprender cómo podemos asignar nombre de línea, ¿cómo podemos usar también el nombre de línea? Déjame simplificarlo. Este es nuestro artículo de encabezado, y este es nuestro elemento de la barra lateral. Para crear este elemento de la barra lateral, necesitamos usar la propiedad de ra de cuadrícula y la propiedad de columna de cuadrícula. En la propiedad de ra de cuadrícula, primero tenemos que pasar el punto de partida de la línea, y luego tenemos que pasar el punto final de la línea. Pero en este tutorial, no vamos a usar números de línea. Vamos a crear nuestro propio nombre de valor. Como pueden ver para el punto de partida, utilizo Sidebar Start, y para el punto final, utilizo sidebar n. Empecemos lo practico y veamos como es w. Aquí puedes ver, lado a lado, abro mi estudio de usuario Coraor y mi navegador usando la extension Lp Server Ya creo un documento simil para este ejemplo. Aquí puedes ver una maquetación web, cual creo usando calificaciones. Aquí puedes ver un encabezado, una maniobra para diferentes cajas, y un sideware, y durar un Aquí se puede ver el contenedor y todo lo profundo dentro de este contenedor. Creo este diseño usando spanning. Vamos a saltar al selector profundo del contenedor. Aquí puedes ver, tenemos un total tres columnas de rejilla con un valor A. También puedes ver, tenemos fila total de fib con diferentes tamaños. Para cabecera, utilizo 150 píxeles de altura. Para maniobra, utilizo 50 píxeles de altura, y para nuestra tercera fila, una vez más, utilizo 150 altura de fixel Para pie de página, una vez más, utilizo 50 fixel de altura Aquí pueden ver, abarco mi encabezado de principio a fin de uno a menos uno. Aquí puedes ver, usamos el valor de línea de cuadrícula para eso. Voy a encender mis líneas de cuadrícula usando el modo desarrollador. Y se pueden ver los números de línea. Esta no es una plantilla muy compleja, pero a veces necesitamos enfrentarnos a plantillas difíciles o a una plantilla muy compleja. En ese caso, es muy difícil recordar estos números, y puede crear problemas muy grandes. Para resolver este problema, asignamos un nombre a estas líneas, y llamamos a este proceso la nomenclatura de líneas de cuadrícula Entonces veamos cómo funciona. Primero, voy a comenzar con reglas, y tenemos que asignar estos nombres de líneas con estos valores. Para la línea de grado número uno, voy a usar un nombre que es inicio de encabezado. Déjame mostrarte. Primero, voy a usar ases cuadrados. En cambio el cuadrado ***, voy a asignar un nombre para nuestra primera línea, inicio de encabezado. Necesitas recordar que no puedes dar ritmo entre dos palabras. Y voy a encender el rap. De lo contrario, no se pueden ver mis líneas. Puedes usar bolígrafos altos, guiones bajos o cualquier otro carácter Si inicio esta cabecera, también tenemos que terminar esta cabecera, y quiero terminar esta cabecera en la sala número dos. Quiero volver a usar versos cuadrados. Ist los versos cuadrados, voy a escribir header end header, end. Si configuro este archivo, aquí podemos ver que no hay cambios. Ahora les voy a mostrar ¿cómo podemos usar estos nombres en nuestro valor? En nuestra propiedad gridro, voy a escribir encabezado Start, porque este es nuestro punto de partida Para nuestro punto final, voy a usar el valor final de encabezado. Si guardo este archivo, aquí se puede ver, no hay cambios. Nuestros nombres son trabajados correctamente. Vamos a saltar a la sección del menú. Vamos a crear un punto de partida para el menú. Para ello, no necesitamos usar otra base cuadrada. Solo quiero usar un espacio entre el final del encabezado y el punto de inicio del menú. Para el punto de inicio del menú, voy a usar Menú Inicio. Voy a usar el nombre de inicio del menú. Inicio, y para finalizar este menú, después de 50 píxeles, voy a usar el nombre de fin del menú. Fin de menú. Y voy a usar estos nombres en nuestras propiedades de cuadrícula. Déjame mostrarte. Entonces voy a copiar el nombre de inicio del menú, y voy a reprimir dos con este nombre Para nuestro valor final de menú, voy a usar menu n name. Si configuro este archivo, aquí se puede ver, no hay cambios. Ha funcionado muy perfectamente. De igual manera, puedes tomar nombres para todas las reglas. Este método de nomenclatura de líneas es muy útil cuando trabajamos con diseños complejos, y ahora voy a nombrar nuestras columnas Aquí puedes ver, tenemos proto tres columnas. Pero si te das cuenta, puedes ver, aquí usamos el valor de repetición, y yo uso uno para valor para tres columnas. ¿Cómo podemos asignar nombre para valores repetidos? Hay dos métodos que puedes asignar nombre para tus columnas. O tecleas una F tres veces y cada vez que usas estos corchetes. De lo contrario, podemos asignar nombre con este valor de repetición. Déjame mostrarte. Antes de una F por valor, voy a usar un nombre, que se llama Inicio. Después de un valor F, voy a escribir call nd. Puedes escribir cualquier nombre como quieras. Pero hay un problema. Va a usar Cal start y llamó a N tres veces. Primero, va a usar call Start aquí, y luego va a usar llamado end aquí. Una vez más, va a usar call start aquí, y luego va a usar call end aquí y seguir adelante. ¿Cómo podemos usarlo correctamente? Para esto, primero, necesitamos escribir cool start. Y luego tenemos que asignar desde donde empiezan nuestras columnas. Nuestras columnas parten de una, así que escribe una. Para punto final, voy a usar call end, call end. Porque abarco hasta tres columnas, así que voy a usar tres cabellos. No es necesario que note el número de línea aquí. Necesitas notar cuántas columnas quieres usar. Si configuro este archivo, aquí puedes ver que no hay cambios. No hay problema. Funcionó perfectamente. Ahora quiero abarcar nuestro encabezado hasta dos columnas. Quiero usar dos herederos. Si configuro este archivo, puedes ver el resultado. Se utiliza el valor de dos columnas para el elemento de cabecera. Quiero volver a mi antigua posición. Algunos para usar tres. Podemos usar el mismo valor para nuestras columnas de menú. Déjame mostrarte. Algunos para copiar el valor, y voy a sustituir por éste. Debido a que nuestro elemento de menú toma la misma cantidad de área de columna, es por eso que podemos usar este valor. Si guardo este archivo, se puede ver que no hay cambios. De esa manera, puedes asignar cualquier nombre para tus líneas, y puedes usarlo varias veces. Espero que el concepto de nombres de cuadrículas sea claro para ti. Gracias por ver este video, estén atentos para nuestro próximo tutorial. 8. Tutorial de nombramiento de áreas de cuadrícula de CSS: alegro de verles una vez más estoy de vuelta con una tutoria re CSS grid En esta Tutoria, vamos a aprender el nombre del área de cuadrícula CSS. En nuestro tutorial anterior, aprendemos sobre el nombre de la línea de cuadrícula. Pero en este tutorial, vamos a aprender área grid Nam. Utilizamos este método para posicionar nuestros elementos de cuadrícula. Veamos qué tipo de propiedades tenemos que podemos usar para el posicionamiento. Nuestra primera propiedad es áreas de plantilla de cuadrícula, y nuestra segunda propiedad es área de cuadrícula. Empecemos la práctica y tratemos de entender cómo funciona. Aquí puedes ver en nuestro tutorial anterior, creamos un diseño básico usando propiedades de cuadrícula, y aquí asignamos nombres para líneas de cuadrícula. Usando estos nombres, posicionamos nuestro artículo y abarcamos nuestros artículos. Ahora voy a crear la misma plantilla sin usar la propiedad de fila de cuadrícula y la propiedad de columna de cuadrícula. No necesitamos usar nombres de líneas para eso. Aquí pueden ver, tengo otro archivo estable, grid Atmel, y voy a usar esta plantilla Al principio, dividimos esta cuadrícula en una columna de tres con una a valor, y ya tenemos filas de fib para encabezado para menú, para cajas y para pie Ahora voy a asignar un nombre diferente para cada elemento de la cuadrícula. Para esto, voy a usar propiedad de área de cuadrícula. Dentro de esta área de cuadrícula, puedes tomar cualquier nombre. Voy a usar el mismo nombre para eso, que es encabezado. Y no necesitamos usar códigos invertidos para eso. Del mismo modo, voy a usar la misma propiedad para cada elemento de la cuadrícula. Para menú, voy a usar el mismo nombre Menú. Para caja, voy a usar la caja uno. Para la caja dos, voy a usar la caja dos. Para la caja tres, voy a usar la caja tres. De igual manera, para la casilla cuatro, voy a usar la casilla cuatro. Para barra lateral, voy a usar el mismo nombre, que es barra lateral. Para foter, voy a usar poter. Si guardo este archivo, aquí pueden ver, todo está desaparecido. Porque no utilizamos ningún posicionamiento, por eso los artículos se han ido. En nuestro departamento de padres, voy a usar una propiedad nueva. Déjame mostrarte y el nombre de nuestra propiedad es excelentes áreas de plantilla. Grandes áreas de plantilla. Dentro de estas áreas de plantilla de cuadrícula, voy a usar códigos dobles. Déjame mostrarte una cosa. Voy a volver a mi antiguo expediente. Aquí puedes ver mi diseño anterior. Si presiono igual y enciendo líneas de cuadrícula, aquí puedes ver et tres columnas en nuestra estructura, y nuestra sección de encabezado usa tres columnas para eso. Así que estoy de vuelta a mi nuevo diseño, y aquí voy a usar este nombre de encabezado tres veces. Déjame mostrarte. Voy a copiar el nombre, y quiero pegarlo aquí. Encabezado, encabezado y encabezado. Para tres columnas, uso este nombre por tres veces. Si digo este archivo, aquí se puede ver el resultado. Pero si te das cuenta, deja un ritmo en blanco porque espera seis filas en nuestra estructura de saludo. Aquí solo usamos una fila. Una vez más, si te muestro mi antiguo diseño, aquí puedes ver nuestro menú, también usa tres columnas. Dentro de los códigos dobles, voy a usar el nombre del menú por tres veces. Si guardo este archivo y te muestro mi maquetación, aquí puedes ver el resultado. Una vez más, estoy de vuelta a mi viejo diseño. Aquí puedes ver. En nuestra primera columna, usamos la caja uno. En nuestra segunda columna, usamos la caja dos, y en nuestra tercera columna, usamos barra lateral. Voy a amasar esta línea. Para nuestra primera columna, voy a usar la casilla un nombre. Para nuestra segunda columna, voy a usar el cuadro dos nombre. Para nuestra tercera columna, voy a usar nombre de barra lateral. Usamos los nombres de estas columnas para nuestra tercera fila. Una vez más, voy a conseguir esta línea. Aquí se puede ver, nuestra cuarta fila, comenzar con la caja tres, luego viene la casilla cuatro, y luego viene la barra lateral una vez más. Voy a escribir caja tres, caja cuatro, y luego venir barra lateral. En nuestra última fila, aquí puedes ver, utilizamos tres columnas para nuestro pie de página. Voy a usar este nombre de pie tres veces. F doble TER, pie de página, pie de página y pie de página. Y punto y coma a en esta línea. Si senté este archivo y te muestro mi diseño, aquí puedes ver, creamos con éxito nuestro diseño antiguo sin usar la propiedad de fila de cuadrícula y columna de cuadrícula. Este es el segundo método que podemos usar para posicionar nuestros elementos de cuadrícula. Solo necesitamos usar dos propiedades para eso. Nuestra primera propiedad es área de cuadrícula y nuestra segunda propiedad es áreas de tabletas de cuadrícula. Este tipo de técnica de posicionamiento es muy útil para proyectos pequeños. Si tu diseño no es complejo, entonces puedes usar este proceso. Pero si tu proyecto es más complejo y ag, no recomiendo utilizar este proceso. Si notas, aquí puedes ver, usamos tres nombres de columna para cada fila. Si me quito una de la columna, alguna de la fila, así que voy a quitar menú. Si configuro este archivo, aquí podemos ver que todo se ha ido. Debido a que usamos tres columnas, es por eso que necesitamos pasar tres nombre de columna. Si configuro este archivo, una vez más, aquí se puede ver, ahora se ve perfecto. Y ahora, supongamos que desea utilizar dos columnas para la sección del menú. En ese caso, necesitas pasar el pelo punteado. Si configuro este archivo, ahora es trabajo. Si quieres usar el elemento de menú solo en la segunda columna, en ese caso, solo necesitas pasar otro punto antes del punto de menú punto de menú. Si configuro este archivo, puedes ver el resultado. Podemos alinear nuestro elemento de cuadrícula y podemos posicionar nuestro elemento de cuadrícula solo usando puntos. Pero no se puede usar este punto, medio de estas dos columnas. Déjame mostrarte. Si elimino encabezado de este lugar y uso un punto y configuro este archivo, puede destruir tu diseño. Una vez más, voy a repetir este proceso, cómo funciona. Al principio, debe usar un área de cuadrícula de nombre de propiedad para cada elemento de la cuadrícula y luego debe asignar un nombre. Puedes usar cualquier nombre para eso. Luego, dentro del selector de contenedor padre, debe usar una propiedad, que son áreas de plantilla de cuadrícula. Entonces necesitas recordar cuántas columnas asignas a esta estructura de cuadrícula. Según mi maquetación, aquí se puede ver, utilizo tres columnas. En cada fila, tenemos que pasar tres u, y aquí puedes ver, abarcamos nuestra fila de la barra lateral también. Por eso uso este nombre de barra lateral en la fila número tres y la fila número cuatro. Espero que ahora entiendas lo que es el nombre del área de arenilla. Gracias por ver estos videos y estar atentos para nuestro próximo tor. 9. Tutorial de la función MinMax de cuadrícula de CSS: Oye, es bueno verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado cess grit En este tutorial, vamos a aprender la función cess grid minMax. Usando esta función, podemos cambiar dinámicamente la altura de la rosa y las columnas. Empecemos. En este tutorial, vamos a aprender otros dos valores sin minmax. El primero es el contenido Max, y el segundo es el contenido masculino. Veamos cómo podemos cambiar altura y el peso dinámicamente. Aquí, se puede ver lado a lado, abro mi visto Cortor y mi navegador usando extensión de servidor Lp Y ya creo un documento estable. Como puede ver dentro de mi contenedor padre, tenemos ocho ventas de cuadrícula diferentes, y declaramos cuatro columnas para nuestras cales de cuadrícula con un valor F. También tenemos dos filas con 175 píxeles de altura. Empecemos la práctica. Empecemos la práctica. Como puedes ver en mi primer elemento de la cuadrícula, primero hay un nombre de texto. Voy a insertar más textos dentro de este elemento de la cuadrícula. Luram, 20. Va a agregar 20 palabras dentro de este elemento de la cuadrícula. Si configuro este archivo, aquí puedes ver el resultado. Déjame reducir algunas palabras, y luego voy a poner este archivo. Aquí puedes ver, desglosa nuestras líneas según de este ítem de la cuadrícula. Pero, ¿qué pasó? Si utilizo el valor máximo de contenido para nuestra primera columna, usémoslo. Voy a usar el valor máximo de contenido para nuestra primera columna. Si configuro este archivo, puedes ver el resultado. Aquí puedes ver, no hay salto de línea para este párrafo, y además se desborda del contenedor con tamaño. Si usamos este valor, no va a romper nuestras líneas. Va a imprimir todo el párrafo en una línea. No es algo muy útil para nuestros proyectos reales. Voy a reducir algo de mundo de este párrafo. Entonces voy a guardar este archivo. Vamos a reducir algunas palabras más. Ahora se ve perfecto. Ahora voy a añadir algo más de texto en nuestro cuarto contenido. Lam diez, y voy a decir este archivo, y luego voy a usar nuestro siguiente valor para esta columna, que es que los hombres contienen. Si configuro este archivo, aquí puedes ver el resultado. Cambia dinámicamente el octavo según la palabra más grande de esta frase. Además, voy a agregar más texto en este ítem. Agreguemos más texto. Lam ocho. Si configuro este archivo, aquí puedes ver nuestro texto solapar el elemento de la cuadrícula. Para resolver este problema, podemos agregar un valor mínimo de contenido en nuestra fila. Déjame mostrarte. Voy a eliminar el valor de 170 píxeles, y aquí voy a escribir Man content value. Si configuro este archivo, ahora se puede ver que establece la gran altura del elemento, acuerdo con el área de texto. Supongamos que quiero agregar 51 párrafo en nuestro séptimo ítem. Voy a saltar al séptimo ítem, y voy a escribir Lum, 50. Si configuro este archivo, aquí se puede ver, aquí se puede ver, acuerdo al tamaño del texto, es cambiar altura y peso. Se va a consumir altura mínima y mínimo ocho según este texto. Por eso este vueme es el contenido principal. Y ahora quiero fijar la altura mínima de nuestro rol. Entonces voy a quitar algo o de este texto. Entonces voy a configurar este archivo. Ahora voy a usar la función minmax para establecer una altura fija Déjame mostrarte. Voy a usar la función Mn Mx aquí. MinMax. Inserte este paréntesis, y aquí tenemos que pasar los dos valores Para tamaño mínimo de pro y para tamaño máximo de pro. Supongamos que nuestra altura mínima de fila es de 175 píxeles. Para máximo, voy a usar men content property. Porque quiero cambiar la altura de acuerdo a este tamaño de contenido. Si nuestro contenido toma más de 170 píxeles de altura. Si guardo este archivo, aquí se puede ver por defecto, nuestra fila vienen con 170 píxeles de altura. Pero como puedes ver en nuestra primera fila, se necesitan más de 170 píxeles de altura. Sea el tamaño del contenido tomar más de 170 píxeles. Para nuestro máximo valor, utilizamos contenido principal. Por eso puede tomar tanta altura que quiera. La función Min Max es muy útil para nuestras filas. Aquí establecemos el valor mínimo para la altura de nuestro artículo. Pero si nuestro contenido toma más altura, entonces podemos usar el valor del contenido principal como valor máximo. Pero, ¿qué pasó? ¿Si configuro una altura máxima de 200 píxeles? Déjame mostrarte. Si configuro este archivo, demonios, se puede ver, por defecto nuestra segunda fila toma 175 píxeles de altura. Pero nuestra primera fila se extiende hasta 200 píxeles, y luego nuestro contenido se desborda de este elemento. Por eso nos referimos a usar contenido principal como tamaño máximo. Contenido principal. Ahora puede contener todo el contenido en nuestra fila, y ahora voy a usar la función MinMax como valor de columna. Vamos a usarlo. Para nuestra primera columna, voy a usar la función MinMax. Y voy a establecer un ancho mínimo de esta columna, que es de 150 píxeles. Además, voy a tomar 200 píxeles para ancho máximo. Aquí puedes ver que ya establecemos el ancho máximo del contenedor, que es de 700 píxeles, pero voy a usar el valor porcentual en este lugar, 80%, va a hacer que nuestra página web sea más receptiva. Si configuro este archivo, aquí puedes ver el resultado. Agreguemos más contenido a nuestra primera columna. Um seis. Aquí puedes ver, nuestra primera columna toma un ancho máximo de 200 píxeles. Si aumento el tamaño de ancho máximo, 300 píxeles y luego configuro este archivo, ahora puedes ver los cambios. Por defecto, va a tomar 150 píxeles de ancho, y puede extenderse hasta 300 píxeles. Después de eso, va a romper nuestras líneas, y ahora voy a usar 200 píxeles para nuestro ancho mínimo. Si activo mi opción de desarrollador, y selecciono este contenido. Aquí puedes ver que el ancho máximo de este contenido es de 300 píxeles. Si trato de hacerlo receptivo, y después selecciono este ítem, aquí pueden ver, el ancho mínimo de este ítem es de 200 píxeles. Porque ya establecemos un tamaño mínimo a esta columna. De igual manera, si escalamos nuestra ventana, déjame mostrarte. Y luego selecciona este ítem, podrás ver que no puede extender el con más de 300 pixeles. Espero que ahora te quede un poco claro cómo es el trabajo. Si utilizo valor porcentual en nuestra talla máxima, déjame mostrarte. 60%. Después configura este archivo, ahora podrás ver un resultado diferente. Va a tomar un 60% de ancho de este contenedor. Podemos usar el valor porcentual, el valor e, el valor de píxel, etcétera Pero si reduzco el tamaño del navegador, y luego se va a detener en 200 píxeles de ancho. No podemos reducir nuestra primera columna a más de 200 píxeles. Espero que ahora quede claro cómo funcionan el valor principal y el valor máximo. Gracias por ver este video y mantente atento a nuestro próximo tutorial. 10. Tutorial de cuadrícula implícita y explícita de CSS: Qué bueno verlos chicos, una vez más, estoy de vuelta con un Nutririal, y en este sural, vamos a aprender grilla implícita y grilla A ver ¿qué es eso? Aquí puedes ver, lado a lado, abro mi visuo studo coreor y mi navegador usando la extensión PSeral abro mi visuo studo coreor y mi navegador usando Como puede ver en mi contenedor padre, tenemos un total de ocho celdas de cuadrícula. Al principio, voy a decir dentro de la altura. Al principio, voy a usar el valor de columna de plantilla de cuadrícula. Columnas de plantilla de codicia, y voy a crear dos columnas con un valor e Para ello, voy a usar el valor de repetición. Repetir. Dos columnas con un valor e. Si configuro este archivo, puedes ver el resultado. Además, voy a decir altura de fila. Para esto, voy a utilizar una gran propiedad de raíz templada. Pero voy a decir tres filas de altura a partir de esta cuatro fila. Voy a usar el valor de repetición una vez más. Repita el valor de tres filas de 100 píxeles. Si configuro este archivo, puedes ver el resultado. Además, voy a proporcionar brecha entre estas celdas. Entonces escribe, lee, propiedad gap. 20 pixel. Si configuro este archivo, puedes ver el resultado. Aquí puedes ver, acabamos de definir dos columnas y el tamaño de tres filas. Pero tenemos un total de ocho celdas en esta estructura. No diseñamos nuestro séptimo artículo de cuadrícula y ocho elementos de cuadrícula. Supongamos que extraemos dinámicamente los datos del servidor, y quiero mostrar estos datos en nuestra séptima y octava columna. Para ello, necesitamos establecer la altura. Pero ya definimos la altura usando la propiedad de filas de plantilla de cuadrícula. ¿Cuáles son estas columnas? ¿Cómo podemos establecer la altura de las columnas? Déjame mostrarte algo. Si presiono p t y te muestro mi herramientas para desarrolladores y doy click en este ícono de cuadrícula. Aquí puedes ver algunas líneas de cuadrícula. Como puedes ver, le damos estilo o y dos columnas. Llamamos a esta estructura codicia explícita porque definimos explícitamente esta área usando estas dos propiedades, y esta que no definimos, y la llamamos codicia implícita Para darle estilo a esta cuadrícula implícita, tenemos algunas propiedades nuevas Vamos a verlo. Aquí puedes ver, tenemos un total de tres propiedades relacionadas con la cuadrícula implícita Nuestro primero son los autos grid, O el segundo es grit auto column, y el último es grid auto flows Empecemos la práctica y tratemos de entender cómo funciona. Después de una brecha de cuadrícula, voy a usar nuestra nueva propiedad, que es grid auto ose. Algún tipo, túnicas automáticas de rejilla. Aquí podemos definir nuestra altura implícita de fila de cuadrícula. Para nuestro ítem implícito, voy a definir 50 píxeles de altura Si configuro este archivo, ahora puedes ver ahora la altura implícita del elemento de la cuadrícula es de 50 píxeles Si agregamos más celda a este contenedor, déjame mostrarte algunas para duplicar esta línea dos veces y establecer este archivo. Ahora puedes ver que establece automáticamente la altura de 50 píxeles para estos elementos de la cuadrícula. Por ahora, voy a borrarte columnas. No lo necesito y configuré este archivo. Aquí puedes ver cuando añadimos una nueva celda, se va a agregar fila es. Pero ahora quiero agregar nueva columna celular sabia. Para eso, necesitamos usar otro valor, que es el flujo automático de rejilla, Tipo de suelo, codicia, flujo automático Viene con dos tipos de valor. Fila y columna. Por defecto, es trabajar con fila. Pero aquí voy a usar columna. Si digo este archivo, ahora se puede ver el resultado. Porque ya definimos tres en nuestra grilla explícita. Entonces después de las tres, va a agregar todas las artimañas de columna de artículos de ventas. Harry se puede ver no definir ningún tamaño de columna a este elemento de la cuadrícula. Es tack ocho según este tamaño te, y ahora quiero asignarlo a nuestra grilla implícita Para eso, necesitamos usar una propiedad, que es grite auto columnas Y aquí voy a aportar valor 0.5 f para nuestra calificación implícita Si configuro este archivo, aquí puedes ver el resultado. Nuestra columna de cuadrícula explícita toma un valor f, y nuestra columna de cuadrícula implícita toma valor f Si agrego alguna columna más a este contenedor, déjame mostrarte y luego establecer este archivo. Ahora puedes ver, también es tomar 0.5 valor de acuerdo con este elemento de la cuadrícula. Esta es nuestra cuadrícula implícita y calificación explícita. Espero que ahora te quede claro. Gracias por ver este video, St sintonizó para nuestro próximo tutorial. 11. Tutorial de alineación de elementos de cuadrícula de CSS: Hola, chicos, me alegro de verles de vuelta. En este tutorial, vamos a aprender la alineación de elementos de cuadrícula CSS. En nuestro video anterior, aprenderemos sobre cómo podemos crear diseños usando elementos de cuadrícula CSS y cómo podemos posicionar estos elementos. Pero en este tutorial, vamos a aprender sobre alineación horizontal y la alineación vertical. Tenemos un total de seis propiedades relacionadas con la alineación de cuadrícula CSS. Alinee el artículo, justifique el artículo, coloque el artículo, alinee uno mismo, justifique uno mismo y coloque uno mismo. Empecemos la práctica y tratemos de entender cómo funciona. Aquí puedes ver lado a lado, abro mi codaor duro esos y mi navegador usando la extensión del servidor Lp Ya creé el documento STE ML llamado index dot STL. Aquí puedes ver que tenemos un total de diez elementos de la cuadrícula. Nuestros primeros seis elementos de cuadrícula son elementos cuadrícula explícitos y nuestros últimos cuatro elementos de cuadrícula son elementos de cuadrícula implícitos Aquí puede ver nuestro elemento de cuadrícula explícito HT es de 100 píxeles, y nuestro elemento de cuadrícula implícito HT es de 50 píxeles Ahora quiero abarcar mi quinto elemento de la cuadrícula, y quiero abarcarlo en cuanto a filas. Para eso, voy a saltar al quinto selector de ítem, y aquí voy a usar la propiedad Sess, que es fila de cuadrícula Aquí voy a abarcar este ítem hasta dos filas, tipo, span y luego voy a pasar dos. Si configuro este archivo, puedes ver el resultado. Aquí puedes ver nuestro artículo de rejilla de hojalata, y quiero que abarque esta columna de elemento rojo sabia. Voy a saltar al selector itent ten, y aquí voy a usar la propiedad Sess, que es columna de cuadrícula Voy a escribir grid, column, y quiero abarcarlo hasta dos columnas. Si configuro este archivo, puedes ver el resultado. H es elemento span, sabio, y aquí es span item columna sabio. Comencemos la alineación. Primero, voy a cubrir la alineación vertical. Para eso, necesitamos usar Alinear ítem y align self property. Estas propiedades vienen con cuatro valores. Déjame mostrarte. El primero es el inicio, el final, el centro y el estiramiento. Si usamos valor inicial, va a colocar nuestro contenido, inicio de este contenedor, significa en ese lugar. Si usamos n value, va a colocar nuestro contenido en ese lugar. Si usamos center, va a colocar nuestro centro de contenido del elemento de la cuadrícula, y stretch es nuestro valor predeterminado. Una vez más, estoy de vuelta con mi codador de Visual Studio, y ahora voy a saltar al contenedor padre Primero, voy a usar un valor de Sass, que es align items Entonces, para escribir Alinear elementos. Voy a usar nuestro primer valor y nuestro primer valor es el centro. Si guardo este archivo, aquí puedes verlo alinear nuestro centro de contenido. Y este es nuestro proceso de alineación vertical. Si te muestro mis líneas de cuadrícula, aquí la puedes ver claramente. Como puede ver, este es nuestro elemento de cuadrícula, y este es el contenido dentro de este elemento de cuadrícula. Como puedes ver, pres nuestro contenido en medio de este ítem porque usamos align items center Pero, ¿qué pasó con nuestro quinto artículo? De acuerdo con esta línea, alinea nuestro contenido, final de este elemento de la cuadrícula, pero no lo es. Porque abarcamos nuestro artículo de quinto grado. Por eso usa dos artículos. Según el ítem, centra el contenido. Además, puede ver la misma alineación para nuestros elementos de cuadrícula implícitos Ahora voy a usar el valor final, algún tipo, en D. Si yo st este archivo, ahora se puede ver la alineación. H lo puedes ver alinear nuestro contenido, final de este ítem. Del mismo modo, si usamos valor inicial, déjame mostrarte. Y luego establecer este archivo, se puede ver la alineación. Aquí lo puedes ver el contenido del alineador, inicio de este ítem. Nuestro último valor de artículo de alineación es stretch. Déjame mostrarte. Si uso este valor y configuro este archivo, es un posicionamiento de alineación predeterminado. No es muy importante. Es un valor predeterminado. Por ahora, voy a usar el valor central. Ahora voy a hablar de Align self. ¿Qué es align self? Aquí puedes ver todo el contenido del ítem son Alinear centro. Ahora decido alinear nuestro ítem de tercer grado de manera diferente. Quiero decir que quiero usar align valor final para este tercer ítem. Voy a saltar al tercer selector de ítem. Para este tipo de alineación, necesitamos usar align self property. Algún tipo, align self, y aquí voy a usar el valor final. Si configuro este archivo, puedes ver el resultado. Si enciendo mis líneas de cuadrícula, aquí pueden ver, todos los contenidos están alineados en el centro, pero nuestro tercer elemento de cuadrícula se alinea al final. Podemos usar esta propiedad solo en venta individual, no para todo el contenedor. Ahora está claro para ti. Si queremos aplicar alineación a todos estos elementos para eso, necesitamos usar la propiedad Elemento alineado. Si queremos aplicar en artículos individuales para eso, necesitamos usar propiedad de venta alineada. Ahora voy a hablar de alineación horizontal. Para la alineación horizontal, necesitamos usar dos propiedades, ify item y justificarse a sí mismo Es similar a nuestra anterior. Necesitamos usar el mismo valor para eso. Comienza el extremo central y estira. Empecemos la práctica. Una vez más, estoy respaldado por correadora iso studio. Voy a saltar al contenedor padre. Ahora quiero alinear nuestro contenido horizontalmente al centro. Para eso, necesitamos usar una propiedad, que es justificarse ítem. Y nuestro valor es centro. Si configuro este archivo, aquí puedes ver el resultado. Si enciendo mis líneas de cuadrícula, se puede ver con claridad. Centró horizontalmente nuestro contenido. Del mismo modo, si utilizo diferente valor, y luego configuro este archivo, ahora se puede ver el resultado. Ahora puedes ver el final del contenido de este elemento de la cuadrícula. De igual manera, tenemos otro valor, que es el inicio. Si configuro este archivo, ya sabe el resultado. Alinea horizontalmente nuestro contenido, inicio de este ítem bt. Si quieres mover tu contenido, lado izquierdo, entonces necesitas usar start. Si quieres mover tu contenido, lado derecho, entonces necesitas usar end. Como saben, el estrés es nuestro valor predeterminado, así que no lo voy a explicar aquí. Ahora voy a hablar de autopropiedad justificada. Supongamos que centraste horizontalmente tu primer artículo. Para eso, necesitamos usar autopropiedad justificada. Déjame mostrarte. Aquí voy a usar propiedad auto justificada. Voy a usar el valor central. Si guardo este archivo, se puede ver el resultado. Si enciendo mis líneas de cuadrícula, se puede ver con claridad. Si necesitas alinear tu contenido individualmente, puedes usar propiedad de venta justificada. De igual manera, tienes un valor total de tres para eso. Centro, inicio y fin. Ahora quiero hablar de dos nuevas propiedades. Colocar artículo y lugar venta. Colocar el artículo es un final corto, alinear el artículo y el artículo justificado. Si quieres usar este valor en una línea, entonces puedes usarlo. En esta propiedad, primero unidad a pus, alinear el valor del artículo y luego necesita puss justificar el valor del artículo, y entre ellos, es necesario proporcionar un espacio De igual manera, tenemos lugar vender propiedad. Esto es para elementos de cuadrícula individuales. Primero unidad a pus, Alinear valor de venta, y luego unidad a pus justifica se valor. Veamos práctico cómo funciona. Una vez segundo, Ivaci vos al creador. Por ahora, voy a comentar esta línea de dos. Primero, voy a usar la propiedad place item. Entonces estoy para atar artículos de lugar. Como usted sabe, primero tenemos que pasar, alineó el valor del artículo y luego necesita justificar pz el valor de los artículos Nuestro primer valor es el centro. Y nuestro segundo bajo es estrella. Ahora voy a configurar este archivo. Si configuro este archivo, aquí se puede ver el mismo resultado. No hay cambios. Puedes usar este valor de esta manera o de esa manera. Está totalmente en ti. A continuación, veamos cómo funciona el valor de celda de posición. Como saben, es trabajo de manera individual. En nuestro ítem dos, voy a usar esta propiedad. Colocar auto. Primero, necesitamos más Alinear el valor de celda y luego necesitas más el valor de celda justificado. Quiero proporcionar centro, y justificé el valor de celda también es centro. Si configuro este archivo, puedes ver el resultado. Es centro o contenido horizontal y verticalmente. Entonces espero que ahora te quede claro cómo son trabajo colocar self y place items. Gracias por ver este video, estén atentos para nuestro próximo Tutorial. 12. Tutorial de alineación de pistas de cuadrícula de CSS: Hola chicos, me alegro de verles de vuelta. En este tutorial, vamos a aprender sobre la alineación de la pista de cuadrícula de CS. Para alineaciones nuestra pista, tenemos un total de tres propiedades Alinear contenido, justificar contenido y colocar contenido, y la propiedad Colocar contenido es una versión abreviada de Alinear contenido y propiedad de contenido justificado. Tratemos de entender qué es el seguimiento de elementos de cuadrícula. Aquí puedes ver, lado a lado, abro mis dos a tu coortor y a mi navegador usando la extensión Lip Server, y ya creo un documento STL llamado index dot Aquí voy a usar la misma estructura de cuadrícula que utilizo en mi tutorial anterior. Aquí se puede ver poner diez elementos de la cuadrícula. Como puede ver, abarcamos nuestras filas de elementos de quinta cuadrícula, y también abarcamos nuestra columna de diez elementos de cuadrícula. Al principio, voy a reducir la columna mié. Déjame mostrarte. Voy a reducir un valor e y voy a escribir 150 píxeles. Si configuro este archivo, se puede ver la alineación, y también voy a aumentar la altura del contenedor. Entonces voy a usar la propiedad de altura. Altura 750 píxeles. Si configuro este archivo, puedes ver este espacio. Ahora te voy a mostrar cómo podemos usar align content y justificar contenido. Pero primero, necesitamos entender qué es el contenido justificado. Utilizamos contenido justificado para la alineación horizontal, y tenemos un total de siete valores relacionados, contenido justificado, inicio, fin, centro , estiramiento, espacio alrededor, espacio entre y espacio uniformemente. Nuestros tres últimos valores que utilizamos para la propiedad de contenido. Déjame mostrarte cómo se viste. Una vez más, vuelvo a mi editor de código de Visual Studio. Al principio, voy a encender mis líneas de cuadrícula, así que voy a alabar EP til, y luego hago clic en cuadrículas, y cómo se pueden ver las líneas de la cuadrícula Ahora voy a usar el valor de justificar contenido. Al principio, voy a usar el valor central. Si configuro este archivo, puedes ver el resultado. Aquí puedes ver todos los elementos de la cuadrícula juntos, pasar al centro de este contenedor. Uso de la propiedad justificada del artículo. Podemos centrar nuestro contenido dentro de estos elementos. Usando la propiedad de contenido justificado, podemos alinear nuestros elementos de cuadrícula dentro del contenedor. Usando contenido justificado, podemos mover toda la pista. De igual manera, tenemos otro valor, que es el fin. Si configuro este archivo, puedes ver el resultado. Horizontalmente, mueve nuestros elementos de la cuadrícula, final de este contenedor, y inicio es un veu predeterminado. Déjame mostrarte. Si configuro este archivo, puedes ver el resultado. Ahora voy a hablar de nuestros tres nuevos valores. Nuestro primer valor es el espacio entre. Entonces voy a escribir espacio entre aquí. Si configuro este archivo, puedes ver el resultado. Si usamos espacio entre valor, entonces vas a proporcionar el espacio restante entre nuestros elementos de cuadrícula. Como puede ver, dividió nuestros elementos de la cuadrícula n a n. Pero si tiene tres columnas, déjeme mostrarle así para pasar tres aquí. Y luego establece este archivo, aquí podrás ver el resultado. Como pueden ver, puso nuestra segunda columna al centro, y dividió nuestro espacio en blanco dos P. Por ahora, voy a usar dos columnas. Nuestro siguiente valor es el espacio alrededor. Déjame mostrarte. Si configuro este archivo, aquí puedes ver el resultado. Si usamos este valor, como puede ver, primero, nos proporciona un espacio, luego nuestro elemento de cuadrícula, y luego se puede ver el tamaño similar del espacio dos veces. Entonces una vez más, nuestra columna y un espacio ciego. Se puede ver el espacio igual izquierda y derecha. También se puede ver la misma cantidad de espacio después de la primera columna. De igual manera, se puede ver este espacio antes de la segunda columna. Se puede ver más espacio en el centro, y nuestro siguiente valor es el espacio de manera uniforme. Así que para escribir el espacio de manera uniforme. Si configuro este archivo, aquí puedes ver que es bastante similar al espacio alrededor del valor. Pero hay una diferencia básica. La principal diferencia es, se puede ver la misma cantidad de espacio entre nuestros grandes artículos. Si este tamaño de espacio es uno a, se puede ver la misma cantidad de espacio antes y después de la columna. Esta es nuestra propiedad de contenido justificado. Básicamente lo usamos para la alineación horizontal, y esta propiedad funciona con trucos de cuadrícula. Hablemos de alinear el valor del contenido. Utilizamos la propiedad align content para la alineación vertical. Como puede ver, hay un total de siete valor para esta propiedad, inicio, fin, centro, estiramiento, espacio alrededor, espacio entre y espacio de manera uniforme. Ya sabemos de este valor de cuatro. Pero en este tterial, vamos a aprender espacio alrededor del espacio entre y el espacio Volvamos a lo práctico. Aquí puedes ver nuestra altura de contenedor de rejilla es de 750 píxeles. Voy a escribir este nombre de propiedad, que es align content, nuestro primer valor es center. Si configuro este archivo, aquí puedes ver el resultado. Si subo mi modo desarrollador, ahora lo puedes ver claramente. Como puedes ver, centraba verticalmente nuestro contenido. Del mismo modo, si utilizo el valor final y luego configuro el archivo, ahora puedes verlo poner nuestra estructura de cuadrícula final de este contenido. Como saben, el inicio es nuestro valor predeterminado. Pero ahora voy a usar un espacio de nombre de valor entre. Entonces escribe, espacio entre. Si configuro este archivo, aquí puedes ver el resultado. Aquí puedes verlo poner nuestro artículo de primer grado y nuestro artículo de último grado de extremo a extremo. Aquí puedes ver los espacios entre todos los artículos de grado. Este es el caso de uso del espacio entre valor. Vamos a saltar al siguiente valor, que es el espacio alrededor. Entonces escribe, espacio alrededor. Si configuro este archivo, ahora puedes ver el resultado. Este valor, va a proporcionar el espacio, parte superior del contenido y la parte inferior del contenido. Supongamos que proporciona diez píxeles pas en la parte superior de este elemento de la cuadrícula, y también va a proporcionar diez píxeles pasan la parte inferior de este elemento, y luego vienen id gap area. Una vez más, la parte superior de este tercer artículo , proporciona diez píxeles de pase. De esa manera, es trabajo. Nuestro último valor es el espacio incluso. Así que para empatar ritmo de manera uniforme. Si configuro este archivo, aquí se puede ver que proporciona la misma cantidad de espacio, parte superior e inferior de este ítem. Este es el caso de uso de estos valores. Déjame mostrarte una cosa. Aquí puedes ver, abarcamos nuestra columna 102 tiempo. Voy a quitar la propiedad de columna de cuadrícula del ítem diez. Y ahora voy a abarcar el ítem siete. Entonces para pegarlo aquí. Si guardo este archivo, aquí se puede ver una brecha. Aquí puedes ver el espacio sin llenar. Si está trabajando con una estructura de cuadrícula compleja, algún momento el tipo de problemas están bien Si quieres resolver este tipo de problemas, tenemos otra propiedad, que es el flujo automático de rejilla. Déjame mostrarte. Entonces escriba, flujo automático de rejilla. Como saben, hemos puesto dos tipos de flujo, fila es y columna sabia. Voy a usar fila es. Si configuro este archivo, aquí puedes ver que no hay cambios. Pero si uso otro valor con esto, déjame mostrarte. Voy a usar un nuevo valor, que son las guaridas. Si configuro este archivo, aquí se puede ver, puso nuestro elemento de la cuadrícula ocho en el espacio en blanco. Si usamos este valor, entonces no va a desllenar el espacio en blanco Espero que ahora te quede claro, qué es el rastreo de grilla. Estén atentos para nuestro próximo tutorial. Gracias por ver este video. 13. Tutorial de relleno automático de cuadrícula de CSS y ajuste automático: Hola, chico es bueno verte de vuelta. En este uteral, vamos a aprender campo auto y propiedad autofit. Usando estas propiedades, podemos controlar el ancho de la cuadrícula. Empecemos la práctica y veamos cómo funciona. Aquí puedes ver, lado a lado, abro mis isos a un cod o y mi navegador usando la extensión psaver, y ya creé el documento estel Aquí se puede ver un contenedor, y dentro del contenedor, tenemos un total de cuatro artículos de cuadrícula. Como puede ver nuestro contenedor con es de 700 píxeles, y utilizamos dis la propiedad de grano Y ahora voy a decir dentro de la altura a estos artículos. Por ahora, quiero usar dos columnas con un valor f. Voy a usar la propiedad de columna de plantilla de grano, y voy a usar el valor de repetición Repita dos con un valor F. Si configuro este archivo, puedes ver el resultado. Además, voy a darle altura a nuestra fila. Voy a usar la propiedad de fila de columnas de plantilla de cuadrícula. Una vez más, voy a usar el valor de repetición. Dos filas con 150 píxeles de altura. Si configuro este archivo, puedes ver el resultado. Supongamos que no quiero usar el valor de fracción. Voy a escribir 100 píxeles. Si configuro este archivo, ahora puedes ver el resultado. Ahora nuestra columna es de 100 píxeles. Con eso, quiero mostrar tres columnas en nuestra habitación. Si configuro este archivo, puedes ver el resultado, y ahora quiero ajustar nuestro cuarto ítem de gig en este lugar Para ello, necesitamos usar dos valores, autofill y auto fill Déjame mostrarte. En este lugar, voy a escribir auto fill. Si configuro este archivo, puedes ver el resultado. Automáticamente configura nuestro cuarto artículo de concierto hasta el tercer artículo de concierto Del mismo modo, si utilizo el valor auto ft, déjame mostrarte que aceptas este archivo. Él se puede ver, no hay cambios, pero hay una diferencia básica. Si utilizo el valor de autoajuste, va a crear un track extra Déjame mostrarte. Así que escribe auto fill una vez más. Si enciendo mi barra de herramientas para desarrolladores y hago clic en este ícono de cuadrícula. Aquí puedes ver, hay un espacio para tres elementos de cuadrícula porque nuestro contenedor v es de 700 píxeles, y configuramos nuestro elemento de cuadrícula con 100 píxeles. Por eso tenemos un espacio para tres elementos de la cuadrícula. Pero si uso el valor de ajuste automático, déjame mostrarte y luego establecer este archivo, y luego encender mis líneas de cuadrícula. Aquí se puede ver que no crea líneas de pista adicionales. Se crea la pista de acuerdo a los elementos de la cuadrícula. Supongamos que quiero cambiar nuestro final de cuarta columna de este contenedor. Voy a usar grilla Valor final de columna. Codicia, columna n, y voy a la posición st menos uno. Si configuro este archivo, aquí podemos ver que no hay cambios. Porque la propiedad de pies de auto no crea trach adicional. Pero si utilizo la propiedad de autocompletar, déjame mostrarte y luego establecer este archivo Ahora puedes ver el resultado. Si corro sobre las líneas de la cuadrícula, ahora se puede ver con claridad. Debido a que la propiedad de autocompletar crea una columna adicional, es por eso que podemos mover nuestro artículo de cuarto grado al final de este contenedor Esta es la principal diferencia entre el campo automático y el valor auto pies, y ahora voy a usar la función Min max para nuestra columna. Voy a quitar este y establecer este archivo. Primero, voy a atar pies auto y luego voy a usar la función minmax. Quiero establecer el ancho mínimo del contenedor es 150 píxeles y el máximo de hasta un valor de e. Si configuro este archivo, puedes ver el resultado. Pero, ¿qué pasó? Si reduzco el ancho del contenedor así escriba, 70% ancho del contenedor. Si configuro este archivo, aquí puede ver, puede ver nuestro artículo de cuarto grado reducir. Si te muestro mi sección de computadora, Aquí puedes ver, ahora nuestro ancho de contenedor es de 546 pixel, y establecemos nuestro ancho mínimo de artículo 150 pixel. Si multiplicamos 150 píxeles por cuatro, va a devolver 600 píxeles. Como ya sabe, nuestro ancho de contenedor por debajo de los 600 píxeles, es por eso que reduce nuestro artículo de cuarto grado. Si aumento el ancho del contenedor, déjame mostrarte. Ahora puedes ver, fijó nuestro artículo de cuarto grado en nuestra primera fila. Si te muestro el ancho de mi contenedor, aquí puedes ver que está por encima de los 600 píxeles. Por eso encaja en esta fila. Y de manera similar, si te muestro mi ancho de elemento de cuadrícula, aquí puedes ver, nuestro ancho de elemento de cuadrícula es de 167 píxeles, no podemos reducir nuestro ancho de elemento de cuadrícula por debajo de entonces 150 píxeles. Si tratamos de reducir nuestro ancho de elemento de cuadrícula con fuerza, déjame mostrarte, aquí puedes ver, encoge nuestro elemento de cuadrícula en la segunda fila Si tratamos de reducir más, aquí puedes ver, también es reducir nuestro tercer elemento de cuadrícula en la segunda fila porque no podemos reducir el ancho del elemento de cuadrícula por debajo de los 150 píxeles. Sin usar media query, solo usando valor de ajuste automático, creamos perfectamente nuestro contenedor responsive. Del mismo modo, si aumento el ancho del navegador, aquí se puede ver todo el elemento de la cuadrícula en una sola fila. Si notas puedes ver, también aumenta el ancho del artículo. Ahora el ancho del artículo es de 245 píxeles. Si desea mostrar todos los elementos de la cuadrícula en una sola fila, entonces debe tener un ancho mínimo de contenedor de 600 píxeles. Si reduzco demasiado el ancho del navegador, y aumento el ancho del contenedor por ciento es, algo es 85%, y además voy a aumentar el ancho mínimo, así que voy a aumentarlo hasta 300 pixel. Si configuro este archivo, ahora se puede ver el total de cuatro filas. Ahora parece que responde total. Como puede ver, establecemos la altura para dos filas, 150 píxeles de altura. Espero que ahora el concepto sea claro para O, qué es el valor de campo automático y el valor de ajuste automático. Gracias por ver este video, estén atentos para nuestro próximo tutorial. 14. Tutorial de contenido de ajuste de cuadrícula de CSS: Hola, chicos, vayan a verles de vuelta. En este tutorial, vamos a aprender una nueva cuadrícula de Sess relacionada con propiedades, que es Fit Content. Veamos cómo podemos usarlo prácticamente. Aquí puedes ver, lado a lado, abro mi isoto Codaor y mi navegador usando la extensión Lip Sever, y ya creo un documento STML llamado index dot STML abro mi isoto Codaor y mi navegador usando la extensión Lip Sever, y ya creo un documento STML llamado index dot STML. Aquí puedes ver dentro del contenedor padre, sumamos seis artículos de cuadrícula. Básicamente, encajar contenido propiedad trabajando como Max W propiedad. Vamos a usar esta propiedad. Entonces voy a quitar la anterior. Voy a atar Supongamos que quiero mostrar dos columnas usando contenido fit. Entonces voy a escribir fit content, y dentro de los paréntesis, y voy a decir 200 píxeles ancho máximo para nuestra primera columna Del mismo modo, para nuestra segunda columna, voy a usar fit content property. Para nuestra segunda columna, voy a usar 400 píxeles maxw. Si guardo este archivo, aquí se puede ver el resultado. Aquí puedes ver para primera columna, tomamos 200 píxeles de ancho. Para la segunda columna, tomamos 400 píxeles de ancho. Pero si nota, puede ver nuestro artículo e está de acuerdo con el tamaño del contenido. Tomemos otra columna con un valor F. Algunos tipo uno F. Si configuro este archivo, se puede ver el resultado. Si establecemos el valor fit content, no podremos extender nuestra columna, más de 200 píxeles. De igual manera, no podemos extender nuestra segunda columna, más de 400 píxeles. Agreguemos algo de contenido en nuestro primer ítem. Dentro del primer ítem, voy a escribir um, 30. Si configuro este archivo, aquí puedes ver el resultado. Si enciendo mis líneas de cuadrícula y te muestro mi ancho de venta, aquí puedes ver que nuestro primer artículo de cuadrícula se extiende hasta 200 píxeles. Si usamos la propiedad fit content, no podemos extender con más de 200 píxeles. Del mismo modo, si agrego más contenido en nuestro segundo elemento de la cuadrícula, déjame mostrarte y luego establecer el archivo, aquí puedes ver el resultado. Si te muestro mi tamaño de celda, aquí puedes ver que se extiende hasta 400 píxeles, no más de 400 píxeles. Sea nos sentamos ancho máximo de esta celda de grano usando la propiedad fit content Para nuestra tercera columna, utilizamos valor de fracción. Puede cambiar su tamaño según el contenido. Básicamente, esta técnica es muy útil para la galería de imágenes. Además, puedes notar que no podemos ver todo el contenido de este ítem. Para ello, podemos usar función minmax en nuestros roles. Déjame mostrarte. Entonces, para quitar esta, y voy a decir, Min Max. En cambio los paréntesis, aquí podemos establecer la altura mínima para nuestro elemento de cuadrícula Quiero establecer una altura mínima de 200 píxeles. Entonces si quieres extender la altura de celda de la cuadrícula de acuerdo con el contenido. Para eso, puedes usar la función de contenido principal. Déjame mostrarte I N contenido. Si configuro este archivo, aquí puedes ver el resultado. Ahora se ve perfecto. Aprendimos sobre la propiedad de contenido principal en nuestros tutoriales anteriores. Espero que ahora entiendas cuál es el caso de uso de la propiedad fit content. Gracias por ver este video, estad atentos para nuestro próximo tutorial. 15. Tutorial de propiedades de orden de cuadrícula de CSS: Hola, chicos, me alegro de verles de vuelta. En este tutorial, vamos a aprender una nueva propiedad de posicionamiento de griditem, que es propiedad de agua L et's ver como podemos usar esta propiedad. Como pueden ver, lado a lado, abro mi video sto Cortor y mi navegador usando la extensión Lp Server, y ya creo documento EstiML llamado index dot Aquí puedes ver dentro de mi contenedor padre, tenemos un total de seis artículos de cuadrícula. Usando la propiedad del agua, podemos cambiar la posición de la celda de la rejilla. Supongamos que desea mover la primera celda de rejilla en la sexta posición. Para ello, se puede utilizar propiedad de agua. En nuestras tteriales anteriores, aprendemos sobre Pero en este tterial, vamos a posicionar nuestras celdas usando la propiedad del agua Supongamos que quiero mover el ítem uno en seis posiciones. Para ello, voy a saltar al ítem o selector, y voy a usar propiedad de agua. Agua. Aquí voy a pasar un valor. Si configuro este archivo, aquí puedes verlo mover automáticamente nuestro contenido en la posición ust. El riego comienza en dirección opuesta. Por eso ha llegado al lugar del polvo. De igual manera, si utilizo valor cero y luego configuro el archivo, aquí se puede ver, no hay cambios en el agua. Cero es el valor por defecto de esta propiedad. Pero si paso agua dos y luego pongo el archivo, aquí se puede ver, también ha llegado al primer lugar porque no hay agua uno. Supongamos ahora quiero mover nuestro segundo ítem en primera agua. Para eso, voy a saltar al ítem a selector, y voy a teclear propiedad de agua. Agua uno. Si configuro este archivo, aquí puedes ver el resultado. Ahora bien, esta es nuestra posición de agua uno. Ahora, supongamos que quiero mover el cuarto ítem en tercera posición. Vamos a saltar al cuarto selector, y voy a teclear agua tres. Si configuro este archivo, ahora puedes ver el resultado. Esta es nuestra posición de agua una, y esta es nuestra posición de agua dos, y esta es nuestra posición de orden tres. Primero, nosotros, regamos nuestro artículo uno en segunda posición. Vayamos a la segunda posición, y luego regamos nuestro ítem dos en primera posición. Vayamos a la primera posición. Después regamos nuestro cuarto ítem en tercera posición, y se puede ver el resultado. Ha llegado a la tercera posición. Como puede ver, no trabajamos con tercer ítem, quinto ítem, y sexto ítem. Se ha presentado. Supongamos que ahora quieres mover el tercer elemento detrás del cuarto artículo. Voy a usar propiedad de agua una vez más. Agua, y voy a pasar cuatro valor. Si configuro este archivo, puedes ver el resultado. Ahora puedes ver que nuestro tercer ítem llegó a la sexta posición porque usamos cuatro valores, así que nuestra primera posición de agua es esta, y esta es nuestra segunda posición de agua, y esta es nuestra tercera posición de agua, y esta es nuestra cuarta posición de agua. Ahora es cuadrado para ti, cómo es el trabajo. Gracias por ver este video, estén atentos para nuestro próximo tutorial. 16. Tutorial de cuadrículas anidadas: Hola, chicos, me alegro de verles de vuelta. En este tutorial, vamos a aprender acerca de la sécula anidada Tratemos de entender qué es la cuadrícula anidada. Aquí puede ver un contenedor de cuadrícula, y dentro de este contenedor de cuadrícula, tenemos un total de seis celdas de cuadrícula. Ahora decide agregar más celdas de cuadrícula dentro de esta celda de cuadrícula. Entonces necesitas convertir esta celda de cuadrícula en un contenedor de cuadrícula, y luego puedes agregar más celdas de cuadrícula dentro de este contenedor, algo así. Llamamos a todo este sistema cuadrículas anidadas. Usando g rid anidado, podemos convertir una celda de cuadrícula padre en un contenedor de cuadrícula Empecemos la práctica y veamos cómo podemos crearla. Como pueden ver, lado a lado, abro mi codaor visual sto y mi navegador usando la extensión del servidor Lp, y ya creo un documento ESTL, llamado index dot STML llamado index Como puede ver en mi contenedor padre, tengo cuatro celdas de cuadrícula, y ahora quiero agregar más celdas de cuadrícula dentro de la cuarta celda de cuadrícula. Para esto, necesitamos usar la propiedad de cuadrícula de visualización para el ítem cuatro. Dentro del selector cuarto ítem, voy a usar la propiedad display. Cuadrícula de visualización. Ahora convierte nuestra celda en un contenedor de cuadrícula. Ahora podemos agregar más celdas de rejilla dentro de este contenedor. Déjame mostrarte. Voy a quitar este texto y dentro de este d, voy a crear cuatro d d punto sub sub uno más, y voy a duplicar esta línea tres veces. También voy a numerar en su nombre de clase. Sub dos, Sub tres y sub cuatro. Dentro de esta grilla cales, voy a escribir A, B, C, y mayúscula D. Si configuro este archivo, puedes ver el resultado. Como puede ver, creamos cuatro celdas de cuadrícula dentro del cuarto contenedor. Ahora voy a asignar a nuestras ventas. Para estos, voy a usar la propiedad de columna de plantilla de cuadrícula. Codicia columnas de plantilla, y quiero asignar dos columnas con un valor F, una si R, una F. Si configuro este archivo, puedes ver el resultado Vamos a establecer un color de fondo a esta profundidad. De lo contrario, no va a ser visible. Voy a seleccionar el ítem cuatro, dentro del ítem cuatro, voy a seleccionar todos los deeps Luego dentro del fondo css. Rad. Si guardo este archivo, se puede ver el resultado. Como pueden ver, no hay hueco entre estas celdas, así que voy a usar la propiedad grid gap. Brecha de lectura, diez píxeles. Si guardo este archivo, ahora se pueden ver las celdas con claridad. Como puede ver dentro de un contenedor de cuadrícula padre, tenemos que tel cuatro celdas, y luego convertimos nuestra cuarta celda de cuadrícula en un contenedor de cuadrícula. Dentro de este contenedor, también tenemos cuatro celdas de rejilla. A este proceso lo llamamos cuadrícula anidada. Usando esto dentro de un elemento de cuadrícula, podemos insertar más elementos de cuadrícula. También puede insertar más elementos de cuadrícula dentro de estos elementos de la subcuadrícula. Supongamos que desea insertar cuatro elementos de cuadrícula más dentro de esta celda A. Entonces, una vez más, es necesario seguir este procedimiento similar. Primero, necesita usar la cuadrícula de propiedades de visualización para esta venta, y luego puede agregar más elemento de cuadrícula dentro de esta celda. Si te muestro mi barra de herramientas para desarrolladores, aquí puedes ver dentro de esta cuadrícula, tenemos otra estructura de cuadrícula, y puedes ver las líneas de cuadrícula de esta estructura de cuadrícula. Si te muestro mi sección de maquetación, aquí puedes ver en superposiciones de cuadrícula, tenemos sistema total de dos cuadrículas Nuestro sistema de rejilla de contenedores principal y, a continuación, nuestro sistema de elementos de rejilla superpuesta, y puede apagar y encender sus líneas de cuadrícula de acuerdo a su elección. Gracias por ver este video. Espero que nos quede claro para ti lo que es la grilla anidada. Estén atentos para nuestro próximo tutorial. 17. Tutorial de elementos de cuadrícula superpuestos: bueno verlos de vuelta chicos, este es nuestro último tutorial relacionado Sess grid En este tutorial, vamos a aprender qué se superponen los elementos de la cuadrícula. Avanzando y vamos a tratar de entender ¿qué es eso? Aquí, se puede ver un contenedor de rejilla. Dentro de este contenedor de rejilla, tenemos un total de tres elementos de rejilla. Como puede ver, los elementos se superponen entre sí, y lo llamamos elementos de cuadrícula superpuestos, y ahora quieres verde uno vino primero, algo así. Veamos cómo podemos crear los elementos de la cuadrícula superpuestos. Con eso, vamos a aprender cómo podemos cambiar el agua de pila de los elementos de la cuadrícula. Índice z promedio de arder de pila. Estudiemos lo práctico y tratemos de entender cómo funciona. Aquí puedes ver lado a lado, abro mi codeor de estudio de resultados y mi navegador usando la extensión Life sero, y ya creo un documento EstiML llamado index Como pueden ver, ya creo una estructura de cuadrícula, y hay tres elementos de cuadrícula en esta estructura de cuadrícula. Como puede ver, nuestro contenedor es de 400 píxeles, y nuestra columna es de 200 píxeles, y también nuestra fila T es de 200 píxeles. Intentemos superponer los elementos de la cuadrícula. Al principio, quiero abarcar nuestro elemento de cuadrícula roja. Quiero abarcarlo hasta dos columnas. Para ello, voy a usar la propiedad de columna de cuadrícula. Uno, de la columna uno, dos, abarca dos. Si configuro este archivo, puedes ver el resultado. Abarcamos nuestro artículo dos columnas. Además, voy a abarcar esta fila de artículos sabiamente con dos columnas. Déjame mostrarte. Voy a usar propiedad de fila de grado, fila de grado. De la fila uno, abarcan dos, fila dos. Si configuro este archivo, puedes ver el resultado. Ahora nuestro primer artículo abarcan hasta dos columnas y dos habitaciones, y nuestro segundo artículo y tercer artículo son nuestros elementos implícitos de cuadrícula Ahora voy a asignar un ancho máximo, todos estos elementos de la cuadrícula. Como sabes, utilizamos este artículo más todos estos elementos de cuadrícula. Voy a usar la propiedad de ancho máximo. Entonces para escribir Mx con, 200 píxeles. Si configuro este archivo, puedes ver el resultado. Ahora voy a alinear nuestra primera celda verticalmente. Algunos para escribir, alinear ver estrella. Si configuro este archivo, puedes ver el resultado. Si te muestro mis líneas de cuadrícula, puedes ver que toma área completa. Debido a que usamos align self property, es por eso que parece más pequeña. Si comento esta propiedad y configuro este archivo, puedes ver el resultado. Pero para crear elementos de cuadrícula superpuestos que lo necesiten. Voy a deshacer el comentario y configurar este archivo, y ahora quiero mover nuestro segundo elemento al centro de esta página. Para ello, voy a usar las mismas propiedades para el ítem dos. Si coloco el código, y configuro el archivo, aquí se puede ver, se superpone a nuestro artículo de primer grado. Pero quiero colocarlo entrometerse. Voy a usar Align self property, Align self center. Si configuro este archivo, puedes ver el resultado. Alineamos verticalmente nuestro centro de artículo de este contenedor. Ahora voy a centrar horizontalmente este elemento de la cuadrícula. Para ello, voy a usar y justificar autopropiedad, ify self center Si configuro este archivo, puedes ver el resultado. Para nuestro artículo de tercer grado, voy a usar propiedad sem. Pero quiero alinear nuestro extremo de este contenedor. Voy a usar align self end. Y también justifican auto n. Si configuro este archivo, se puede ver el resultado. No necesito este color de fondo naranja, así que lo voy a quitar. Ahora todos los artículos de saludo se llevan la misma cantidad de área. Simplemente alineamos los artículos, inicio, centro y final. Pero el tamaño y la posición de la columna es la misma. Ahora voy a agregar algo de texto en todos los ítems. En el punto uno, voy a empatar Lam 15. Se va a añadir carácter de 15 palabras. Puede agregar párrafo de 15 palabras en nuestro ítem, y voy a copiar el párrafo, y lo voy a pegar en nuestro segundo ítem. También en nuestro tercer ítem. Si configuro este archivo, puedes ver el resultado. Oye, necesitamos agregar más personaje para sobrecargar este artículo. Voy a pegar de nuevo este personaje. Si configuro este archivo, ahora puedes ver que se superpone entre sí. Ahora les voy a mostrar ¿cómo podemos cambiar el agua de pila de este artículo? Para cambiar el agua de la pila, necesitamos usar nuestra antigua propiedad, que es el índice Z. Ahora quiero llevar el primer ítem a la vanguardia. Para ello, voy a usar la propiedad índice Z. Quiero empatar el índice Z uno. Si configuro este archivo, puedes ver el resultado. Se puede ver que llegó en la parte superior, y ahora quiero traer el artículo naranja arriba de la. Para ello, necesitamos usar el índice Z dos valores. Voy a empatar el índice Z dos. Si configuro este archivo, puedes ver el resultado. Ahora te queda claro cómo podemos controlar las áreas de solapamiento. Ahora, veamos si quito toda la alineación de este contenedor. Y luego establecer el archivo, se puede ver el resultado. Ahora todos los elementos de la cuadrícula siguen existiendo en el mismo lugar. Y ahora quiero mostrar nuestro elemento de cuadrícula verde para estos, necesitamos usar el valor del índice Z una vez más. Índice Z tres. Si configuro este archivo, puedes ver el resultado. Espero que ahora sea clara la duda sobre la superposición. Gracias por ver este video, estén atentos para nuestro próximo todo. 18. Qué es Flexbox: Hola chicos, me alegro de verles de vuelta. Este es el video de introducción de CSX Flexbox. Tratemos de entender qué es Flexbox. Básicamente, Flexbox es un nuevo módulo en CSS tres. Es hacer que la alineación sea muy fácil en diferentes direcciones y diferentes aguas. Le da al contenedor la capacidad de expandir y encoger elementos para aprovechar mejor todo el espacio disponible. Esta es la mejor manera de utilizar todo el espacio disponible. Nuestro siguiente punto es CSS Flexbox layout replace float layout Similar al diseño de la cuadrícula, también puede reemplazar el diseño de flotación. Nos facilitó mucho nuestro trabajo. Usando Textbox, puedes crear un diseño unidimensional muy fácilmente. CSS grad no es unidimensional, es bidimensional, pero Css flexbox es unidimensional No puede manejar la altura de fila y el ancho de columna juntos. A la vez, solo puedes manejar una dimensión. Fila, de lo contrario, columna. Supongamos que este es nuestro contenedor principal. Dentro de este contenedor padre, tenemos cuatro sub deeps Llamamos al contenedor contenedor flexible, y si quieres crearlo flexbox, entonces necesitas usar la propiedad display Flexión de pantalla. En nuestro contenedor padre, necesitamos usar esta propiedad, y luego convertirla en un contenedor flexible. Todos los artículos dentro del contenedor flex, ahora son artículos flex. Como ya les dije antes, flexbox funciona de manera unidimensional Filas de lo contrario columna sabia. Si hablamos de filas significa manera horizontal. Para eso, llamamos al eje eje principal. De lo contrario, se le puede llamar fila. Si hablo de dimensión vertical, entonces lo llamamos eje transversal. De lo contrario, se le puede llamar columnas. Veamos una pequeña demostración, cómo podemos usar una caja flexible. Aquí puedes ver, lado a lado, abro mi iso so coreor y mi navegador usando la extensión Live Sever, y ya creo un documento EstiML, llamado index dot estel Como puedes ver, hay un parent deep, hay un parent deep, Dentro de este contenedor padre, tenemos un total de cuatro artículos. Como puedes ver, utilizamos diferentes clases para todo esto. Tema uno, ítem dos, ítem tres y ítem cuatro. Ya configuré un color de fondo a todos los subdeps. Como puede ver, nuestro contenedor padre es 600. También establecí un color de fondo, margen y borde para este contenedor padre. Ahora bien, si quiero que sea contenedor flexible para estos, necesitamos usar la propiedad display. Display, y voy a usar flex value. Como puede ver, tenemos un total cuatro filas en nuestro contenedor padre. Si configuro este archivo, como puede ver, automáticamente guarda todos los elementos en una fila. Ahora es un poco claro para ti. Cuando convertimos nuestro contenedor padre en una caja flexible, cualquiera que sea el artículo de nuestro contenedor, viene en una fila. En nuestro próximo tutorial, vamos a aprender algunas propiedades nuevas. Veamos las propiedades. Un total de 12 propiedades que puedes usar con flex box. Dirección de flexión, flex wrap, flex flow, flex grow, flex shrink, flex basics, flex, justificar contenido, alinear contenido, alinear el artículo, alinear uno mismo, Atlast water Para la alineación, usamos esta propiedad, y ya la aprendemos en nuestro capítulo de cuadrícula. En nuestro próximo video, voy a cubrir todas las propiedades. Gracias por ver este video, estén atentos para nuestro próximo Tutorial. 19. Tutorial de dirección de CSS Flexbox Flex: Me alegro de verlos de vuelta chicos. En este juicio, vamos a aprender qué es la propiedad de dirección flexible. Veamos los valores de esta propiedad. Como puede ver, tenemos Trotal cuatro valores relacionados CSS flex direction, row row revers, column, y column reverse Y fila es nuestro valor dif en esta propiedad. Empecemos la práctica y veamos cómo funciona. Aquí se puede ver lado a lado, abro mi visuo así Corator y mi navegador usando la extensión Life Sever, y ya creo un documento estim, llamado index dot EstiML llamado Como pueden ver en mi documento, hay un contenedor. Dentro de este contenedor, tenemos un total de cuatro artículos flex. Como puedes ver, ya convertimos nuestro contenedor flex box. Ya sabes que si usamos la propiedad flex, entonces pone nuestros artículos en una sola fila. En este tutorial, vamos a hablar sobre la propiedad flex direction. Esta propiedad está relacionada con contenedor, no con los artículos. Voy a usarlo hasta para mostrar la propiedad, y voy a escribir flex direction. Nuestro primer valor es fila. Si configuro este archivo, aquí puedes ver que no hay cambios. Como ya les dije, fila es el valor por defecto. Si lo usas, no va a afectar tu estructura. Por defecto, la fila sigue la vuelta a la dirección correcta. Pero si uso el valor inverso de fila, déjame mostrarte y luego establecer el archivo, ahora puedes ver el resultado. Aquí puedes ver que es invertir el orden de nuestro artículo. Ahora la dirección es correcta para dar vuelta. Este es el caso de uso del valor inverso de fila, y nuestro siguiente valor es la columna. Déjame mostrarte. Voy a escribir columna. Este valor funciona verticalmente. Si guardo este archivo, se puede ver el resultado. Básicamente sigue agua de arriba a abajo. Como se puede ver, primero, segundo, tercero cuatro. Si quieres organizarlo de abajo hacia arriba, entonces necesitas usar otro valor, que es la columna inversa. Si guardo este archivo, se puede ver el resultado. Aquí, puedes ver que nuestro primer artículo llegó al fondo, luego viene segundo y luego tercero, y nuestro último artículo llegó a la primera posición. Básicamente se trata de cambiar la dirección de abajo hacia arriba. Si utilizo solo el valor de la columna, entonces la dirección será de arriba a abajo. Esta es la propiedad de dirección flexible. Como te dije antes, es un trabajo de manera unidimensional. A la vez, es trabajo con fila sabia, de lo contrario, columna sabia, y no puedes manejar fila y columna juntas. Espero que ahora la propiedad de flex direction sea clara para ti. Gracias por ver este video, estén atentos para nuestro próximo tutorial. 20. Tutorial de CSS Flex Wrap y Flex Flow: alegro de verles de vuelta chicos otra vez vuelvo con un tutorial relacionado flexbox En este tutorial, vamos a aprender qué es Flex AP y flex flow. Estas dos nuevas propiedades son muy importantes en nuestro flexbox. Sin más discusión, comencemos lo práctico. Como pueden ver, lado a lado, abro mi viso studio correor y mi navegador usando la extensión Live Server, y ya creo el documento ESTEML llamado Index dot ESTEML llamado Harry puedes ver en nuestro contenedor, tenemos un total de cuatro artículos flexibles y nuestro tamaño de contenedor es más grande que los artículos flexibles. Si aumento el artículo flex en esta caja, de lo contrario, si reduzco el ancho del contenedor, en ese caso, los artículos son sobrevolados a este Déjame mostrarte. Ya creo otros seis elementos flex, y voy a descomentar estas etiquetas profundas, voy a decir este archivo Ahora puedes ver que tenemos un total diez artículos flex en nuestro contenedor. Ahora voy a reducir el ancho del contenedor. Uso de la propiedad width. Entonces voy a escribir w 400 píxeles. Si configuro este archivo, aquí puedes ver el resultado. Aquí puedes ver que los artículos flex son sobrevolados a este contenedor Del mismo modo, si utilizo la propiedad height y aumento la altura 200 pixeles, y configuro este archivo, se puede ver este resultado. Pero si cambio la dirección del flex, déjame mostrarte la dirección de la flexión. Columna y luego establecer el archivo. Ahora puedes ver, una vez más, los artículos flex son sobrevolados a este contenedor Para resolver este problema, tenemos otra propiedad flexionada, que es Flex RAP Básicamente, Flex AP tiene tres valores. No ap Rap y p reversa. Ningún EP es nuestro valor predeterminado. Si usas o no, te va a desbordar los datos. Veamos cómo funciona. Para ello, voy a usar flex direction row, y además, voy a establecer un ancho de este contenedor, W 400 pixel. Si configuro este archivo, puedes ver el resultado. Y ahora voy a usar la propiedad Flex rap. Flex rap. Al principio, voy a usar ningún valor. Si configuro este archivo, aquí puedes ver que no hay cambios porque este es el valor predeterminado de esta propiedad. Por lo que no va a afectar a los artículos flex. Si quieres envolverlo, necesitas usar el valor p. Déjame mostrarte. Si configuro este archivo, ahora puedes ver el resultado. Ahora puedes ver nuestro contenedor con este acero de 400 píxeles, pero envuelve perfectamente nuestro artículo flex dentro de este contenedor. Como puedes ver, automáticamente llega a la siguiente línea. Tengamos cierto margen entre este artículo flexible. Voy a escribir margen de cinco píxeles. Si configuro este archivo, puedes ver el resultado. Ahora está claro para usted cuando los datos se desbordan desde la primera línea, entonces se llega automáticamente a la siguiente línea. Entonces necesita automáticamente llegar a la siguiente línea. Pero si cambio la dirección flex, columna, y también quiero usar la propiedad height. Altura, 200 píxeles. Voy a comentar la propiedad de ancho. Si configuro este archivo, ahora puedes ver el resultado. Y se puede ver que está ambientada en vertical agua, primero, segundo, tercero, cuarto, quinto, seis, siete, ocho, 19. Espero que ahora te quede claro cómo se ponen los artículos en agua vertical. Ahora voy a usar el siguiente valor de esta propiedad, que es ap reverse. Voy a empatar ap reversa. Si configuro este archivo, ahora se puede ver, es simplemente revertir los elementos de zancuda, y ahora empieza por el lado derecho y lo termina por el lado p. Si cambio la dirección de flexión, fila sabia, y st, cuál de este contenedor, y encomio la altura y configuro este archivo Como puedes ver, nuestros artículos parten de la segunda línea de este contenedor. Primero, segundo, tercero, cuarto, quinto, seis, siete, ocho, 910. Básicamente, usamos la propiedad rap para controlar el desbordamiento theta. Espero que entienda el punto. Nuestra siguiente propiedad es flex flow. ¿Qué es el flujo flexible? Es una propiedad acortada de flex rap y flex direction. Usando una propiedad, puede controlar tanto las propiedades, y podemos usarla en una línea. Voy a usar la propiedad de flujo flexible. Flujo de lino. Aquí, primero, necesitamos proporcionar el valor de dirección de flexión, y luego necesitamos proporcionar el valor p de flexión. Primero, nuestro valor de dirección flex es columna, y nuestro valor flex p es Ra. Y voy a comentar esta propiedad dos, y también necesito comentar con propiedad porque usamos valor de columna. Voy a descomentar la propiedad de altura. Si configuro este archivo, aquí se puede ver que está funcionando perfectamente. Si no uso valor aquí, Y establecer este archivo. Ahora puedes ver que nuestros artículos flex están sobrevolados a este contenedor Básicamente, el flujo flexible es un revestimiento de las dos propiedades, dirección de flexión y flex ap. Espero que ahora los conceptos sean claros para ti. Qué es Flex ap y Flex flow. Gracias por ver este video, estén atentos para nuestro próximo tutorial. 21. Tutorial de contenido de CSS Flexbox Justify: Oye, otra vez, estoy de vuelta con un nuevo Tutorial relacionado con flex box, y en estos dos vamos a aprender a justificar la propiedad del centro. Volvamos al conguo stre. Básicamente, utilizamos la propiedad justify content para la alineación horizontal. Esta propiedad, como total seis valor. Déjame mostrarte. Nuestro primer valor es Flex start. También es un valor por defecto. Luego viene Flex N, centro, espacio, espacio entre, espacio uniformemente. Es muy similar a nuestra propiedad grid, justifica el contenido, y ya lo aprendimos en nuestra sección grid. Empecemos la práctica y veamos cómo funciona. Como pueden ver, lado a lado, abro mi so studio cooror y mi navegador usando la extensión Lp sever Dentro del contenedor padre, tenemos prod four flex item, y ahora voy a alinearlo usando la propiedad de contenido justificado. Tipo de sonido, justificar contenido, Al principio, voy a usar valor central. Si configuro este archivo, puedes ver el resultado. Como puedes ver, mueve todo el elemento flex al centro de este contenedor. A continuación, voy a usar el valor final flex. Extremo flexible. Si configuro este archivo, como pueden ver, afeitará todo el elemento flex esquina derecha de este contenedor, y Flextir es un valor profanado de esta propiedad Si utilizo esta propiedad, permítame mostrarle y establecer este archivo. Como puedes ver, es un valor predeterminado. Si utilizo algún valor flex o no, va a devolver este resultado. Nuestro siguiente valor es el espacio entre. Entonces corbata, espacio entre. Si configuro este archivo, como pueden ver, mueve nuestro primer ítem y último ítem de fin a fin de este contenedor. Si le quito el margen, ahora es más claro para usted. También voy a quitar el acolchado. Ahora puedes ver el resultado, y va a sumar todo el espacio entre estos ítems. Dividió igualmente este espacio entre elementos fijos. O el siguiente valor es el espacio alrededor. Déjame mostrarte. Si configuro este archivo, ahora puedes ver, proporciona igual espacio primero y último de este ítem. Y entre estos elementos , proporciona doble espacio. Como puede ver, proporciona mismo espacio antes del primer elemento y después del primer elemento. De igual manera, proporciona igual espacio antes del segundo ítem y después del segundo ítem. Es por eso que la brecha entre los artículos se desarrolla esta primera brecha, y nuestro último ve es el espacio de manera uniforme. Si uso esto, establezca este archivo, como puede ver, proporciona una cantidad similar de espacio entre los elementos flexibles. Espero que ahora te quede claro cómo podemos alinear horizontalmente nuestros artículos flex. Gracias por ver este video, estén atentos para nuestro próximo Tutorial. 22. Tutorial de alineación de elementos de CSS Flexbox: Lo ojos, bueno verte de vuelta. Una vez más, vengo con un nuevo turiial, relacionado CSS En este tterial, vamos a aprender Alinear propiedad del elemento Utilizamos la propiedad Alinear elemento para la alineación vertical. Tenemos un total de cinco bienes relacionados con el valor de alinear artículos. Flextrt, extremo flexible, centro, tensión y línea base. Si usamos valor flextat, y entonces va a poner mi artículo flex en la parte superior de este contenedor Si usamos el valor flex n, entonces va a poner mi artículo flex en el fondo de este contenedor. Si quieres alinearlo en el centro verticalmente, en ese caso, puedes usar el valor central, y stretch es nuestro valor predeterminado. Pero el valor basal es diferente. Empecemos la C práctica, cómo es la forma. Como pueden ver, lado a lado, abro mi cortor visual studio y mi navegador usando la extensión ipse Como puedes ver, ya creas un continente y dentro de este continer, tenemos Protal cuatro artículos flex Como puede ver, utilizamos la propiedad display flex. Usando esta propiedad, podemos convertir nuestro contenedor como un contenedor flexible. Voy a usar esta propiedad, que es align item, Alinear items. Nuestro primer valor es el estiramiento. Si configuro este archivo, aquí puedes ver, no hay cambios porque es un valor predeterminado. Estamos trabajando con alineación vertical, por lo que necesitamos aumentar la altura del contenedor, 500 píxeles. Si configuro este archivo, puedes ver el resultado. Por defecto, Alinear artículo usa valor de estiramiento. Ahora voy a usar el primer valor, que es flex start. Si configuro este archivo, como pueden ver, ahora la alineación vertical de este ítem es la parte superior del contenedor. Del mismo modo, si utilizo flex el valor final, y configuro este archivo, como puede ver, todos los elementos se alinean en la parte inferior de este contenedor. Si quieres alinear este artículo, centro de este contenedor, puedes usar el valor central. Alinea el centro del ítem, puedes ver el resultado. Alinea todo el centro flex de este contenedor. Agreguemos poca altura en nuestro tercer artículo. Voy a usar la propiedad de altura en nuestro tercer artículo. Altura, 50 píxeles. Si configuro este archivo, Como pueden ver, ahora nuestra tercera altura de elemento es de 50 píxeles, y ahora voy a hablar de concepto de línea base. Si utilizo flex end value, flex end, y configuro este archivo, como puede ver, como puede ver, los elementos se terminan en la línea base. Pero si uso el valor inicial, y configuro este archivo, ahora la línea base termina en la parte superior. Ahora voy a hablar de nuestro último valor, que es la línea base. Pero al principio, voy a aumentar el tamaño de fuente del tercer elemento. Tamaño de fuente. Quiero usar la propiedad de tamaño de fuente. Tamaño de fuente, 34 píxeles. Ahora también voy a reducir el tamaño de fuente del segundo elemento. Voy a usar el valor del tamaño de fuente una vez más, y voy a usar diez fixel para eso Si configuro este archivo, puedes ver el resultado. Ahora puedes ver que la alineación de la línea base del texto es diferente. Ahora quiero alinear este texto en la misma línea de base. Para eso, necesitamos usar la propiedad de línea base. Déjame mostrarte. Alinear elementos, voy a usar el valor de línea base. Línea base. Si configuro este archivo, puedes ver el resultado. Ahora, todo el texto viene en la misma línea de base. Si quieres usar alineación horizontal, sí, puedes usar eso. Solo necesitas usar la propiedad de justify content. Vamos a usarlo. Justificar centro de contenido. Si configuro este archivo, puedes ver el resultado. Además, puede cambiar la dirección de flexión. Como sabes, por defecto, nuestra dirección flex es incorrecta. Cambiemos la dirección del flex. Dirección de flexión. Voy a usar el valor de columna. Si configuro este archivo, como pueden ver, ahora nuestra propiedad lenitd trabaja en horizontal, no en la Si utilizo la propiedad flex N, y configuro este archivo, como puedes ver, está alineado horizontalmente. Porque cambiamos la dirección del eje x y la dirección del eje y usando la propiedad de dirección de flexión. Ahora sigamos el eje transversal opuesto. Esto es para este tutorial. Espero que ahora el concepto sea claro para usted, lo que es align item property. Gracias por ver este video, sintonía estatal para nuestro próximo tutorial. 23. Tutorial de alineación de contenido de CSS Flexbox: Hola ojos puestos a CO de nuevo. En este tarial, vamos a aprender Css Align content property En nuestro tutorial anterior, aprenderemos sobre la propiedad Aline item. Esta propiedad también se utiliza para la alineación vertical. Como puede ver, tenemos una gran cantidad de diferentes valores relacionados con la propiedad de contenido de Alan. Flex de inicio, flex N, centro, estiramiento, línea base, espacio alrededor, espacio entre y espacio uniformemente. En nuestro tutorial anterior, aprenderemos sobre alinear elementos. Ambas propiedades se utilizan para el mismo propósito, pero hay una propiedad diferente entre dos esta. Alinear el elemento utilizado para la alineación de una sola fila, pero alinear el contenido utilizado para la alineación de varias filas. Supongamos que su contenido no está cubierto en un solo rol. Envolví y llego al siguiente papel. Entonces necesitamos usar la propiedad de contenido aliado. Empecemos la práctica y veamos cómo funciona. Como pueden ver, lado a lado, abro mis visas al Coretor y a mi navegador usando la extensión Light sever Como pueden ver, ya creé documento ESTEML llamado index dot Aquí puedes ver en mi contenedor padre, tenemos un total de diez artículos flex. Al principio, voy a asignar a este contenedor. Después de la altura, voy a escribir V igual a 450 píxeles. Como puede ver, nuestros datos son sobrevolados a este contenedor. En este caso, necesitamos usar la propiedad flex wrap, alguien que escriba flex rap. Y voy a usar el valor rap. Si configuro este archivo, puedes ver el resultado. En nuestras tteriales anteriores, aprenderemos sobre la propiedad flex rap Ahora se puede ver sobre fluence los artículos se vienen a la siguiente y como puede ver, nuestros artículos ya están estirados Usemos nuestro contenido de alineación de propiedad. De alguna manera el tipo Align contiene. Nuestro primer valor es el estiramiento. Si configuro este archivo, como puede ver, no hay cambios porque stretch es nuestro valor predeterminado. Pero si utilizo valor flexionado, y configuro este archivo. Ahora puedes ver que se mueve verticalmente arriba. Del mismo modo, si uso flex y value y configuro este archivo. Ahora los artículos se mueven verticalmente. Del mismo modo, si utilizo el valor central, entonces configura el archivo. Ahora todos los artículos son el centro de este contenedor. Nuestra siguiente propiedad es el espacio entre. Así que ata el espacio entre. Si configuro este archivo, puedes ver el resultado. Este valor va a llenar todo el espacio entre dos filas. Si utilizo espacio alrededor del valor, déjame mostrarte y luego establecer este archivo. Aquí puedes ver, cualquiera que sea el espacio que tengamos arriba de la fila, va a duplicarlo entre esta fila, y luego viene la misma cantidad de espacio inferior de la última fila. Entonces viene nuestro siguiente valor, que es el espacio de manera uniforme, algún tipo, el espacio de manera uniforme. Si configuro este archivo, ahora puedes ver, agrega la misma cantidad de espacio entre filas. Esta propiedad sólo funciona cuando tenemos varias filas. Si elimino algún artículo flex de este contenedor, déjame mostrarte y luego establecer este archivo. Aquí puedes ver, todos los artículos son más verciales al centro. Ahora bien esta propiedad no va a funcionar correctamente. Si utilizo diferente valor, algo espacio entre, y luego establecer este archivo, aquí se puede ver, no es trabajo. Esta propiedad funciona exactamente cuando tenemos varias filas. De lo contrario, no va a funcionar. Si tenemos una sola fila, en ese caso, necesitamos usar la propiedad Allen item. Espero que ahora te quede claro lo que es propiedad de Alan gon Den. Gracias por ver este video, estén atentos para nuestro próximo tutorial. 24. Tutorial de alineación de CSS Flexbox: Hola chicos tsu espalda. En este tutorial, vamos a aprender CSS ex box, Alinear propiedad de venta. Esta propiedad también se utiliza para la alineación vertical, similar a la propiedad align item. Como puede ver, para esta propiedad, tenemos algunos valores similares. Apenas tenemos un nuevo valor para esta propiedad, que es auto. Luego vienen Flex start, flex end, centro, stretch y baseline. Ahora la pregunta es, ¿cuál es la diferencia entre align item property y Allen sale property? Allie venta propiedad básicamente utilizada para artículos individuales. Supongamos que desea alinear verticalmente el elemento flexible individual. En ese caso, es necesario utilizar esta propiedad. Como puedes ver en esta imagen, quedando un artículo flex, todos los artículos flexionados que llegaron a la parte superior del contenedor Porque para esta celda en particular, utilizamos la propiedad align cell. Debido a esto, hemos podido diferenciarnos. Empecemos la práctica y veamos cómo funciona. Aquí puedes ver, lado a lado, abro mi visto correor y mi navegador usando la extensión lpSever Voy a usar mi archivo esemal anterior para este ejemplo Como puede ver en nuestro contenedor flex, tenemos un total de cinco artículos flex. Como puede ver, por defecto los artículos se estiran. Primero, quiero alinear todos los artículos en la parte superior del contenedor. Voy a usar align item property. Alinee el inicio flexible del artículo. Si configuro este archivo, puedes ver el resultado. Ahora voy a usar la propiedad Align cell porque ahora quiero alinear una celda individual. Supongamos que quiero mover el extremo de celda número tres de este contenedor. Entonces tenemos que saltar al selector del ítem tres, y necesitamos usar esta propiedad Align cell. Y voy a usar flex end value, flex end. Si configuro este archivo, puedes ver el resultado. Trasladamos exitosamente un extremo de celda individual de este contenedor. Recuerde, esta propiedad se utiliza para la alineación vertical. Vamos a mover el centro de la celda número dos de este contenedor. Para esto, una vez más, voy a saltar al selector número dos, y voy a escribir propiedad Ansell Un centro se. Si guardo este archivo, se puede ver el resultado. Hablemos de nuestra nueva propiedad, que es auto. Si utilizo valor automático en nuestro ítem dos, y luego guardo este archivo, aquí, puedes ver que está de vuelta al grupo. Ahora, este valor está relacionado con el valor de alineación del contenedor padre. Cambiemos la alineación del contenedor padre. Alinee los artículos al centro. Si configuro este archivo, como puede ver, nuestro valor automático seguirá automáticamente esta alineación. Si usamos Alinear auto auto, entonces es relativamente trabajo con el valor de los artículos alineados. El valor central de IOU también actúa como un valor central. IO Ue flex y value, también actúa como A flex y value. Es necesario recordar, la propiedad Allan sal solo funciona con las ventas Flexbox, no con el contenedor Flexbox Espero que ahora te quede claro qué es propiedad Allenal y ¿cuál es el skage de esta Gracias por ver este video, estad atentos para nuestro próximo Tutorial. 25. Tutorial de pedidos de CSS Flexbox: Hola, chicos. Me alegro de verte de vuelta. En este tutorial, vamos a aprender sobre la propiedad del agua. Esta propiedad funciona de la misma manera que lo hicimos en la grilla. Empecemos la práctica y veamos cómo funciona. Y puedes ver, lado a lado, abro mi viso stocor y mi navegador usando la extensión L salvavidas Ya creé el documento EstiML llamado Index do ATML. Como puede ver, en lugar del contenedor flex, tenemos un total de seis artículos flexibles. Si recuerdas usar la propiedad del agua, podemos cambiar las posiciones de las celdas. Supongamos que desea mover cuarta celda en la posición número dos. En ese caso, necesitamos usar propiedad de agua. Entonces voy a saltar al selector de ítem cinco, y voy a teclear agua. Al principio, voy a pasar valor cero. Este es el valor predeterminado. Si configuro este archivo, H se puede ver que no hay cambios en su agua. Pero si paso menos uno, déjame mostrarte y establecer este archivo. Ahora puedes ver, ahora puedes ver nuestro quinto ítem mover el primer lugar en esta agua. Por defecto, todos los valores de propiedad del agua de las celdas son cero. El agua comienza desde el valor menos. Para el ítem cinco, usamos valor menos. Por eso vino primero. Esto es menos uno. Además, voy a escribir menos uno en quinto lugar. Menos uno. De igual manera, para nuestro tercer ítem, quiero pasar menos dos agua menos dos. Si configuro este archivo, ahora se puede ver que llegó el primer lugar en nuestra agua B menos dos es menor que cero y menos uno. Por eso vino primero. Como te dije antes, valor de la lujuria fue lo primero. Quiero empatar menos dos en tercer lugar menos dos. Primero menos dos, luego viene menos uno, luego cero, cero, cero y cero. Pero si paso un valor en el ítem número uno, déjame mostrarte agua uno, y luego establecer este archivo. Se puede ver que ha llegado al lado derecho porque uno es mayor que el valor menos y el valor cero. Por eso llegó a cero. Voy a pasar más uno aquí. Es jugada perdió dos mayores valor. Ahora bien, si paso agua dos en nuestro cuarto ítem, déjame mostrarte agua dos. Si me senté este archivo, como pueden ver, ahora es piel hasta el último lugar. Porque más dos es mayor que cero, y uno. Si configuro este archivo, ahora está claro para usted. Ahora se puede entender claramente cómo son las aguas w. No establecemos agua alguna en el ítem número dos y en el ítem número seis. Para la caída, el agua de estos artículos son cero. Espero que ahora entiendas el riego. Ahora la pregunta es, ¿dónde usamos la propiedad de agua? Cuando quieres que tu sitio web sea receptivo, entonces el agua es la propiedad más importante. En DextVew, quieres seguir esta agua. Pero en vista móvil, quieres mover el ítem cuatro en primer lugar. En ese caso, las propiedades de agua son muy útiles. Espero que hayas entendido el punto. Gracias por ver este video, estén atentos para nuestro próximo tutorial. 26. Tutorial de cultivo de CSS Flexbox Flex: Hola, chicos, me alegro de verles de vuelta. Una vez más, vengo con un nuevo tutorial. En este tutorial, vamos a aprender una nueva propiedad, que es flex. Empecemos la práctica y veamos cómo funciona. Como pueden ver, lado a lado, abro mi isle sto cotter y mi navegador usando la extensión Lip Seal, y ya creo un documento EstiML llamado Index doot Como puede ver en nuestro contenedor padre, tenemos un total de seis artículos flexibles. Usemos nuestra nueva propiedad. Básicamente, la propiedad de grupo flex no funciona con contenedor. Trabajo con artículos flex. Como puede ver, existen los elementos de nombre de clase comunes para todos los elementos flexibles. Voy a saltar al selector de ítems. Y voy a usar nuestra nueva propiedad, que es flex grow. Flexible crecer. Aquí tenemos que pasar valor numérico. Si paso cero, y luego configuro este archivo, como puede ver, no hay cambios. Si paso un valor aquí, entonces escriba uno, y luego establezca este archivo, aquí puede ver, todos los espacios están divididos por igual para flex item. Espero que ahora te quede claro cómo funciona la propiedad flexdro. Si paso dos aquí, y luego configuro este archivo, como pueden ver, no hay cambios. Se me dividió por igual este ritmo, todos estos artículos flex. Por eso no va a funcionar. Vuelvo a mi antigua posición. Uno, y voy a poner este archivo. Ahora quiero aumentar el ítem a ocho. Sí, podemos hacerlo. Al principio, necesitamos seleccionar el artículo individualmente, y luego necesitamos usar esta propiedad. Flex crecer, y aquí voy a pasar dos. Si configuro este archivo, puedes ver el resultado. Puedes ver aquí, ahora se duplica en comparación con otras ventas. De igual manera, si paso tres y luego configuro este archivo, ahora su tamaño es triple comparado con todos. Ahora de manera similar, voy a usar la misma propiedad en nuestro ítem cuatro. Voy a escribir, crecer lino, y quiero expandir el matrimonio hasta cuatro veces Quiero pasar cuatro aquí. Si configuro este archivo, se puede ver la diferencia. Si elimino el margen entre cales, ahora es más claro para ti. Sin el ítem dos y cuatro, todos los ces serán uno. Para el artículo dos, el valor de la propiedad del grupo les es tres, y para el artículo cuatro, la propiedad del grupo Kles es cuatro Esta propiedad solo funcionaba para el artículo Flex. Básicamente, utilizamos esta propiedad, cuando necesitamos proporcionar igual ancho todas las ventas. Espero que ahora te quede claro qué es la propiedad del grupo Flex. Gracias por ver este video, estén atentos para nuestro próximo tutorial. 27. Tutorial básico de CSS Flexbox Flex: Oye, una vez más estoy de vuelta con una propiedad se relaciona CSS flex box. En este tutorial, vamos a aprender qué es la base flexible. Esta propiedad es bastante similar a Max con propiedad. Básicamente, maneja Flex item wd. Veamos cómo podemos usarlo prácticamente. Como pueden ver, lado a lado, abro mi iso a cooror y mi navegador usando la extensión Life Server, y ya creo un documento STL llamado index dot Como puede ver dentro del contenedor flex, tenemos un total de seis artículos flex. Como puede ver, usamos la propiedad display, flex, y también usamos Flex RAP. Usamos la propiedad Flex Rap porque si el artículo sobrevolaba, luego bajaba Por eso utilizamos Flex RAP. Para cada artículo flexible, establecemos un ancho común. Como puedes ver, flex crecer uno. Conocemos esta propiedad en nuestro tutorial anterior. Es por eso que todos los artículos que ocupan la misma cantidad de espacio. Usemos las bases flexibles de propiedad. En el selector del ítem uno, voy a teclear bases flexibles. Y aquí paso multi 250 pixel. Si configuro este archivo, como pueden ver, ahora nuestro primer elemento flex wi es de 250 píxeles. Ahora es trabajo como ancho máximo. Vamos a activar la barra de herramientas del desarrollador. Si me agrada este dp, como pueden ver, nuestro primer ancho de artículo es de 250 píxeles. Pero sin nuestro primer ítem, todas las deeps son tomar la misma cantidad de espacio Pero si trato de reducir el tamaño del navegador, déjame mostrarte. Como puedes ver, no va a afectar el ancho de este ítem uno. Si reducimos el ancho del navegador, como puedes ver, ahora se encoge hacia abajo. Porque esta propiedad funciona como un ancho máximo. Podemos reducir el ancho de este artículo por debajo de los 250 píxeles, pero no podemos enfatizar el ancho de este elemento más de 250 píxeles. Ahora voy a usar propiedad de base flex, todo este ítem. Voy a comentar esta línea, y voy a atar bases flex 100 pixel. Si configuro este archivo, al principio, voy a aumentar el ancho del panel de mi navegador. Ahora puedes ver robar nuestro primer artículo el ancho es de 250 píxeles. Pero sin nuestro primer artículo, los anchos de cada artículo son de 100 píxeles Si trato de aumentar un poco el tamaño del navegador, déjame mostrarte, como puedes ver, ítem cinco se mueve a la esquina derecha. Porque sin primer elemento, todos los elementos intentan mantener 100 píxeles de ancho, y también están tratando llenar el espacio de este navegador. Ahora, intentemos reducir el ancho del navegador y veamos qué pasó. Si trato de reducir el ancho del navegador, como puede ver, mayoría de los artículos se envían a la segunda fila porque usamos propiedad flexer De lo contrario, van a desbordarse a este contenedor. Pero si lo reduzco, poco más, como pueden ver, como pueden ver, no hay espacio para dos artículos en una sola fila. Por eso se encogen. Pero como puedes ver, reducimos el artículo de una manera. Pero siendo el elemento uno, todavía todos los anchos del artículo son de 100 píxeles porque tienen espacio para extenderse hasta su ancho completo Pero si lo reduzco cada vez más, como pueden ver, todos los artículos están reduciendo su ancho. Espero que ahora te quede claro, esta propiedad funciona como un Max con. No solo eso, esta propiedad también funcionaba como un ancho mínimo también. Déjame mostrarte. Si comento esta línea, y si usamos la propiedad de cultivo Flex para todo este ítem y configuramos este archivo, como puede ver, todos los ítems se llegaron a la fila única. Utilizamos la propiedad lex Bass solo para el artículo uno. F restante uno, usamos la propiedad de cultivo Flex, y O Flex grow value es uno. Como te dije, también ha funcionado como una propiedad de ancho mínimo. Déjame mostrarte. I Trato de reducir el ancho del contenedor, como pueden ver, va a afectar todo este ancho de ítem sin el ítem uno. Si trato de reducirlo más, como pueden ver, no va a afectar el ítem uno. Sin el ítem uno, todos los artículos están reduciendo su ancho. Si tratamos de reducirlo más, como puedes ver, nuestro último artículo se envía a la segunda fila. Pero nuestro artículo uno aún mantiene el mismo ancho, 250 píxeles. Si usamos la propiedad de bases Flex con flex grow, hay como ancho mínimo. Pero si usamos la propiedad de base flex solamente, entonces va a actuar como un máximo con. No sólo eso, aquí podemos usar valor porcentual también. Supongamos que quiero usar 50%, 50%. Si configuro este archivo, como pueden ver, sigue funcionando correctamente. Aumentemos el valor porcentual, 90%. Si configuro este archivo, ahora está claro para usted, cómo es el trabajo. Ahora cada vez que nuestro primer artículo va a tomar 90% de ancho de este navegador. Entonces esto depende de ti qué tipo de valor vas a usar. Espero que ahora esté claro para usted, lo que es propiedad de base Flex. Gracias por ver este video, estén atentos para nuestro próximo tutorial. 28. Tutorial de CSS Flexbox Flex Shrink: Bienvenidos de nuevo chicos. En este pterio vamos a aprender qué es Flex stre Saltemos a la pantalla de la computadora y veamos qué es eso. Aquí puedes ver, lado a lado, abrí mi visotrio Correor, usando la extensión Lib Sever, usando la extensión Lib Sever, y ya creé el documento STL llamado Index Dot STML Y él se puede C para diferente artículo flex, uno, dos, tres, cuatro. Este es nuestro contenedor flexible. Si te muestro c heric, usamos flex distante En nuestra clase común, utilizo propiedad flexro, Flexro, uno. Por eso los anchos se dividen por igual. Pero en este tutorial, vamos a aprender una nueva propiedad, que es flex strnk, así que vamos a iniciarla Rápido, voy a quitar propiedad flexro, y voy a establecer wi wi, 200 pixel Si configuro este archivo y cambio el tamaño mi navegador con, puedes ver el resultado Aquí puedes ver nuestro contenedor con es más grande que los artículos. Como puedes ver, todos los artículos con 200 píxeles. Ahora quiero usar esta propiedad de cadena Flex en nuestro ítem uno. Pero al principio, quiero decirte cuál es el significado de flex sing. Básicamente, utilizamos la propiedad flexing para crear nuestro elemento flexible sensible Si quieres que tus artículos sean contraíbles, entonces necesitas usar esta propiedad Aquí puedes ver que encoge el artículo. Permítanme aclarar el concepto. En nuestro ítem uno, voy a usar esta propiedad, flex shrink. Uno es el valor predeterminado. Si configuro este archivo, aquí se puede ver, no hay cambios. Pero si uso valor cero y luego configuro este archivo, ahora se puede ver, oye, hice algo de cinemta Necesitamos usar esta propiedad dentro del ítem uno, no todos los artículos. Quiero trasladar esta propiedad en nuestro ítem uno. Si configuro este archivo, aquí pueden ver, ítem uno no cambió esta forma. Ahora bien, nuestro artículo uno no es encogible. Ahora mantenía el ancho fijo, 200 píxeles. Si aumento el ancho del navegador, puedes ver el resultado. Si reduzco otro artículo flexible al límite, permítame mostrarle cómo puede ver nuestro otro artículo flexible sobrevolado de este contenedor Como puede ver, nuestro primer artículo no se encogió porque usamos el valor de flexión cero Ahora está claro para ti para encoger, podemos usar cero y un valor. Si usamos un valor y luego establecemos este archivo, ahora puedes ver el resultado. Aquí puedes ver, ahora encogimos nuestro artículo. Si quieres girar el encogimiento, entonces necesitas usar el valor cero. Ahora voy a mostrarte otra cosa. Ya sabes si uso valor cero, podemos darle la vuelta al encogimiento. Pero si usamos un valor, entonces podemos reducir nuestros artículos flexibles. Ahora, sin cero ni uno, podemos usar diferentes valores. Déjame mostrarte. Si utilizo dos cabellos, configuro este archivo, se puede ver el resultado. Reduce nuestro primer artículo en comparación con otros artículos. Del mismo modo, si utilizo tres valores, y luego configuro este archivo, se puede ver, nuevo, se reduce nuestro ítem uno. Si no usamos valor cero, entonces nuestro artículo siempre es encogible Y ahora te voy a mostrar el segundo método. ¿Cómo podemos usar esta propiedad de cadena de una manera diferente? Para eso, al principio, voy a quitar el ala del artículo. Entonces configuré este archivo. Además, voy a usar string value one. Y ahora voy a usar propiedad de base flex. Base Flex. Base Flex 200 píxeles. Flex base media dinámica w. Ahora puedes ver, no podemos aplicar ningún ancho a todo el artículo. Aplicamos w en nuestro ítem uno usando propiedad de base flexible. Ahora bien, si guardo este archivo e intento reducir el ancho del navegador, como pueden ver, cuando ese espacio haya terminado, y si trato de reducirlo, puede ver nuestro ítem uno también se reduce. Ahora la pregunta es por qué reducir porque usamos un valor. Pero si uso valor cero, Acepte este archivo. Ahora puedes ver que nuestros artículos están sobrevolados de este contenedor Pero si paso dos valores y luego configuro este archivo, como pueden ver, no va a funcionar. Si utilizo Value uno, y configuro este archivo, puede ver que no hay cambios. En este método, nuestros otros valores no van a funcionar. Si quieres cubrir el espacio restante, en ese caso, puedes usar Flex Grove Vue Déjame mostrarte. En nuestro ítem cuatro, voy a usar Flex Grove Vue El lino crece. Uno, yo puse el suelo, como pueden ver, nuestro ítem cuatro cubre todo el ritmo en blanco. Si reduzco el ancho del navegador, puede ver que nuestro artículo cuatro se encoge automáticamente. A una contracción, ahora efecto en el ítem uno. Espero que en ese momento, esté claro para usted. Y ahora voy a poner ancho a este contenedor. Como puede ver, no utilizamos ningún ancho para este contenedor. Yo ahora voy a establecer contenedor w. aquí, voy a atar nosotros ANCHO W 600 pixel. Si configuro este archivo, y aumento el ancho de mi navegador, ahora puedes ver, ahora puedes ver nuestro tamaño de contenedor es fijo, y ahora voy a reducir el ancho del contenedor. Voy a usar 300 píxeles. Si configuro este archivo, puedes ver que encoge todos los elementos. También el ítem uno. Yo me encojo el contenedor poco ingenio, algo a 50 pixel, Y luego establecer este archivo. Aquí puedes ver que también es trabajo. Porque aquí usamos un valor. FlexSN uno Pero si uso valor cero y luego configuro este archivo, se puede ver un resultado diferente. Aquí puedes ver, otros artículos son sobrevolados de este contenedor Espero que ahora te quede claro qué es la propiedad Flex shrink. Gracias por ver este video, estén atentos para nuestro próximo tutorial. 29. Tutorial de CSS Flexbox con automático de márgenes: Hoy en este tutorial, vamos a aprender qué es el margen automático en caja flexible. Saltemos a la pantalla de la computadora y veamos cómo trabajar. Aquí puedes ver sitio por sitio, abro mi codaor Visa Sudo y mi navegador usando la extensión Live Server, y ya creo un nombre de documento estil index dot est Como puedes ver en mi navegador, hay un contenedor padre. Dentro de este contenedor padre, tenemos un artículo D. Este es nuestro contenedor flexible, y este es nuestro artículo flex. Ahora te voy a mostrar cómo podemos obtener diferentes resultados usando el valor automático de margen. En nuestro ítem, voy a escribir margin. Margen y voy a usar auto v. Si configuro este archivo, se puede ver el resultado. Aquí se puede ver horizontal y verticalmente línea centro. Pero el seno es el porqué, porque hay mucho espacio libre dentro de este contenedor. Por eso es línea en el centro. Ahora voy a usar margin left auto margin let. Si configuro este archivo, como pueden ver, aquí lo pueden ver automáticamente se envían al lado derecho de este contenedor. O artículo dejando el espacio en el lado izquierdo y enviar hacia el lado derecho. Si utilizo margin top auto top, entonces configura este archivo. Ahora puedes ver que está bajando de arriba porque tiene espacio libre en la parte superior. Con eso, voy a usar propiedad tardía de margen. Margen tardío. Una vez más, voy a usar auto Vu. Si configuro este archivo, ahora puedes ver nuestro artículo flex conformado a la esquina inferior derecha de este contenedor. Espero que ahora puedan entender cómo podemos conseguir alineación diferente solo usando auto Vu. Déjame mostrarte otro ejemplo. Supongamos que tenemos un contenedor. Dentro de este contenedor, tenemos un total de cuatro artículos flex. Aquí puedes ver los artículos, el ítem uno, el ítem dos, el ítem tres y el ítem cuatro. Digo diferente color de fondo a estos artículos. Ahora voy a usar nuestro margin auto Vu. Voy a usarlo dentro de nuestro ítem dos Margen, derecho auto. Si configuro este archivo, puedes ver el resultado. Aquí puede ver nuestro artículo dos tomar todo el espacio disponible dentro del contenedor, y es proporcionar un margen de uso y cambiar el artículo tres y el artículo cuatro lado derecho de este contenedor. Del mismo modo, si utilizo margin lept property, déjame mostrarte margin p y luego establecer este archivo Ahora se puede ver, se proporciona todo el lado del espacio de este elemento dos. Si utilizo la misma propiedad del ítem uno, entonces voy a cortar esta propiedad y pegarla aquí. Si configuro este archivo, ahora puedes ver, es proporcionar todo el espacio antes del ítem uno, y es mover todo el artículo del lado derecho de este contenedor. Cuando trabaje con el sitio receptivo, puede usar este árbol para alinear su elemento flexible. Espero que ahora esté claro para ti usando el valor automático, cómo podemos crear diferentes diseños en caja flexible. Gracias por ver esta estatua tutorial para nuestro próximo tutorial. 30. Tutorial de CSS Flexbox Nested Flex: Oye, este es el último tutorial relacionado con la propiedad flexbox. En nuestro tutorial de accoing, vamos a cubrir algunos proyectos reales similares En este tutorial, vamos a aprender qué es el flex anidado Saltemos a la pantalla de la computadora y veamos cómo funciona. Como puede ver, hay un contenedor y dentro de este contenedor, weptal tres D artículo Si convertimos nuestro contenedor padre en contenedor flexible, entonces llamamos a este artículo de flex. Pero si usamos la propiedad display flex en un ítem en particular, en ese caso, sería un contenedor flex anidado Estos también son artículos flexibles dentro de este contenedor. Entonces comencemos la práctica y veamos cómo podemos usarla. Como pueden ver, lado a lado, abro mi código de visual studio o y mi navegador usando extensión de servidor ligero, y ya creo un punto de índice de nombre de documento sable en. Aquí puedes ver un artículo padre más contenedor. Dentro de este contenedor, hemos puesto los cuatro artículos Flexbox. Como puede ver en nuestra clase de contenedor, utilizamos display property flex. Primero, voy a cambiar la dirección de los artículos flex. Aquí voy a usar la propiedad flex direction. Dirección de flexión. Voy a usar columna. Si configuro este archivo, puedes ver el resultado. Ya fijamos cien píxeles de altura dos nuestros artículos. Ahora voy a agregar tres más profundidad dentro de nuestro segundo ítem. Aquí, voy a sumar un total de tres más de. Al principio, voy a crear una d con clase de Sub ítem. Artículo Clase S. Además, voy a usar otro ítem de nombre de clase S uno para nuestro primer d. Entonces voy a duplicar esta línea total dos veces. Entonces voy a alabar en forma de vieja flecha hacia abajo. Subtema dos y Subtema tres. ¿Se puede ver, establecí un subítem de nombre de clase común, y también decimos nombre de clase diferente para cada ítem. Entonces inserte este dem, voy a escribir A, B, y mayúscula C. Si configuro este archivo, voy a escribir A, B, y mayúscula C. Si configuro este archivo, como pueden ver, devolvió nuestros artículos roi ahora voy a convertir nuestro segundo elemento flexbox en un contenedor Flexbox Aquí voy a usar un nombre de propiedad display. Expositor de lino. Si configuro este archivo, como puedes ver, por defecto, arregla nuestro ítem en un solo rol. Ahora, digamos un color de fondo a nuestros artículos. Para eso, punto elemento dos, mayor que punto sinusoidal nuestro nombre de clase, que es sub ítem. Después después dentro de las civses, voy a decir color de fondo Fondo y. también, voy a decir un color de texto. Color, Negro. Si configuro este archivo, puedes ver el resultado. Y ahora quiero dividir por igual nuestro artículo flex anidado dentro de este contenedor Para eso, voy a usar un nombre de propiedad Plex grow. Grupo Flex. Vino Plex dro. Si configuro este archivo, puedes ver el resultado. Permítame darle un margen a nuestros artículos que puedan escalarle. Margen de un píxel. Si configuro este archivo, se puede ver el. Como puede ver, tenemos un contenedor flex parent. Dentro de este contin flex parent, tenemos Protal four flex item, y convertimos nuestro segundo artículo flex en un contenedor flex anidado, y dentro del contin flex anidado, ponemos Protal three flex item, A, B y C. Espero que ahora esté claro para ti, cómo podemos No es muy difícil. Es un proceso muy sencillo. Gracias por ver este video, Set you for our next Tutorial. 31. Cómo crear un menú de navegación desplegable con Flexbox: Hola chico es bueno verte de vuelta. Bienvenido a nuestro primer proyecto relacionado con CSS Flexbox. En este proyecto, vamos a crear un menú desplegable de navegación usando la propiedad CSS Flexbox Como puedes ver, después de la sección de servicio de Hoberm, puedes verlo abrir un menú desplegable Entonces si una sección de desarrollo web también secuente abre otra sección desplegable, un S PHP y Java Veamos cómo podemos crear éste. Como pueden ver, finalmente, estamos en mi editor de códigos Visa Studio. También, estoy en mi directorio de trabajo actual. Dentro de este directorio, tenemos dos archivos, en Des dot Archivo estable, y style dot archivo Sess, y tenemos una imagen de nombre de carpeta, y dentro de esta carpeta, tenemos una imagen, nature dot JPG Y aquí se puede ver en mi documento de estimación, ya vinculamos nuestro archivo de tesis, estilo punto Sess. Primero, voy a completar la sección Estable. Dentro de la etiqueta corporal, primero, voy a tomar una etiqueta profunda, punto B, y voy a tomar un nombre de clase, y nuestro nombre de clase es Menú AA. Subrayar el área. Dentro de esta etiqueta dip, primero, voy a tomar etiqueta UL. Como saben, el uso de etiquetas UL para no zancudas. Para los elementos del menú, necesitamos alguna etiqueta LI, L. Dentro de la etiqueta LI, voy a agregar la etiqueta NCA. No necesitamos redireccionarlo a ninguna página. Por eso voy a usar el signo de texto H. Entonces voy a escribir nuestro primer nombre del elemento del menú. O nombre del primer menú es. Entonces voy a hacer conseguimos esta línea. Y nuestro siguiente elemento del menú está arriba. Y nuestro tercer elemento del menú son los servicios. Así que me quite por encima y servicios tipo Hem. Y nuestro cuarto elemento del menú es la cartera. Él escribe Portafolio. Y nuestro último elemento del menú significa contacto contacto. Esta es nuestra sección de menú principal, y ahora necesitamos crear una opción desplegable para los servicios. Dentro de la etiqueta LI, voy a tomar otra etiqueta UL. Además, voy a asignar una clase a esta etiqueta UL. Claus bajó uno. Subrayar uno Para los artículos desplegables, nuevamente, necesitamos etiquetar la etiqueta LI, L. También necesitamos etiquetar y etiquetar Gut, A, y no quiero redirigirla a ninguna página Por eso uso la etiqueta Has. Qué tipo de servicios brindamos, brindamos diseño de logotipos, diseño web y desarrollo web. Tipo hm, diseño de logotipo, diseño de logotipo. Entonces voy a duplicar esta línea. Nuestro siguiente servicio es el diseño web. Su diseño Type, y todos los servicios de desarrollo web. Dentro de esta sección de servicios, tenemos un total de tres subsecciones más Ahora quiero agregar tres elementos de menú más dentro de la sección de desarrollo web. Dentro de la etiqueta LI, de nuevo, voy a tomar la etiqueta UL U L. Además, voy a asignar A class Name. Clase desplegable dos. Subrayar dos Nuevamente, dentro de la etiqueta EL, voy a tomar A A, luego nuestra etiqueta de ancla, y no quiero redirigirla. Yo, y no quiero redireccionarlo. Por eso uso la etiqueta H. Dentro de los servicios de desarrollo web, trabajamos con Python, PHP y Java Squat Primero, nuestro primer em principal es Python. Entonces voy a replicar esta línea y nuestro segundo elemento del menú es PHP, y nuestro tercer elemento del menú es Java SQ Si configuramos este archivo y te mostramos mi navegador. Ahora puedes ver como es lo. Sin CSS, nuestro menuer se ve así. Pero aquí puedes ver la clara estructura de nuestro menú. Dentro de la sección de servicios, tenemos otras tres secciones. Dentro de la sección de desarrollo web, nuevamente, tenemos otros tres ítems, Python, PHP y Java tres. En nuestra primera cinta, completamos nuestra parte HTML. En la siguiente parte, vamos a comenzar nuestro styling pert. Comencemos el estilo p. primero, seleccione Amendo selector universal, que es signo de estrella Después dentro de las calibraciones tipo Amendo o fusión de primera propiedad Fusionando Cero. Entonces voy a escribir padding, padding, también cero. Nuestra siguiente propiedad es el tamaño de la caja, el tamaño de la caja, la caja de borde de tamaño de la caja, y ahora voy a seleccionar toda la etiqueta de anclaje de la sección del área del menú. Voy a copiar el área del menú del nombre de la clase, y volver al archivo Sess, y el área del menú de puntos tipo Ham, y nuestra etiqueta de anclaje también Que presiono A. Luego dentro de la actriz, Luego en cambio la Clase, voy a usar nuestra primera propiedad, P es exhibición. Exhiba el lino, y nuestra siguiente propiedad es Alinear ítem. Alinee los artículos, al centro. Nuestra siguiente propiedad es justificar el contenido. Justificar el contenido. También es centro. Y para color de fuente, voy a usar color blanco, Color, blanco. Entonces voy a tomar color de fondo para nuestra maniobra. Fondo, y para fondo, voy a usar RGV RGB Para el rojo, voy al tipo 57. Para verde, voy a teclear 57 otra vez. Para azul, de nuevo, voy a escribir 57. Si configuro este archivo, te muestro mi navegador, puedes ver el resultado. A continuación, voy a proporcionar altura a todas estas etiquetas de anclaje. Con eso, también, voy a cambiar el estilo de fuente. Aquí, voy a atar altura 50 pixel, y familia de fuentes familia de fuentes sensorial. Y fuente ocho fuente ocho bod. Y no quiero ninguna debajo de la línea a nuestra etiqueta de ancla. Por eso necesitamos usar otra propiedad, que es la decoración de texto. Decoración de texto, ninguna. Además, quiero todo el elemento del menú. Por eso necesitamos usar otra propiedad, que es la transformación de texto. Transformación de texto, transformación de texto en mayúsculas. Si configuro este archivo y te muestro mi navegador, ahora puedes ver el resultado. Ahora nuestros teléfonos se ven mucho mejor que el anterior. Usando Flexbox, alineamos horizontalmente todos los elementos del menú al centro de esta página Ahora voy a agregar el efecto Over a todos estos artículos. Volvamos al resultado así coor Ahora voy a seleccionar punto menú principal o texto de anclaje, colon hover Luego, dentro de las calibraciones, nuestra primera propiedad es fondo, fondo, y nuestro color de fondo es gris Con eso, quiero fuente color blanco, color, blanco. Si configuro este archivo y vuelvo a mi navegador nuevamente, y si abro mis autos en estos artículos, puedes ver el efecto. Ahora tenemos que poner todo este elemento de navegación en una sola fila. Para eso, necesitamos seleccionar la etiqueta UL. Aquí, quiero empatar el área de menú UL. Entonces en conjunto el cos nuestro primer nombre de propiedad es Lstle, Las style, que no es ninguno No quiero ningún estilo en nuestros artículos de lista. Por eso uso este estilo ninguno. Con eso, necesitamos usar otra propiedad importante, que es esta, esta obra de lino Si configuro este archivo y vuelvo a mi navegador, ahora puedes verlo intenta alinearlo en una sola fila. Pero no proporcionamos ninguna, por eso no ha funcionado a la perfección. Ahora necesitamos proporcionar a todos los elementos de la lista. Volvamos de nuevo al editor de código de Visual Studio. Corbata Hm. La etiqueta LI del área de menú, y la voy a ver en la etiqueta LI. Entonces dentro del alvass, O primera propiedad es posición, posición relativa, y nuestra siguiente propiedad es peso peso 100% Y nuestra tercera propiedad es la alineación de texto. Alineación de texto, alineación de texto al centro. Si configuro este archivo y vuelvo a mi navegador, puedes ver el resultado. Como puedes ver, está trabajado para todos los que menos artículos son del área del Menú Principal. Ahora no quiero mostrar nuestra sección de servicios hasta que la barra. Para eso, necesitamos ocultar nuestra etiqueta LI de punto hacia abajo uno. Volvamos a la is st y aquí voy a escribir Dot desplegable uno, subrayar uno, y voy a seleccionar toda la etiqueta LI de ella Después dentro de las calibraciones, y voy a usar una propiedad de display No mostrar ninguno. Con eso, voy a usar otra posición de nombre de propiedad. Posición relativa. Si configuro este archivo y te muestro mi navegador, déjame mostrarte. Como pueden ver, ahora nuestra sección desplegable no es visible, pero quiero visitarla cuando flote sobre ella Para eso, necesitamos seleccionar toda la etiqueta LI de D hacia abajo. Déjame mostrarte. Área del menú de puntos, y después voy a seleccionar toda la etiqueta LI. Con eso, quiero agregar O selector. Con eso, voy a seleccionar todo el elemento de la lista de Desplegable uno. Tipo Hm, punto, desplegable uno, selector directo al, o nombre de etiqueta, K. Entonces es el Calise o primera propiedad de posicionamiento es T superior cero Además, voy a usar otra propiedad, que es display. Bloque de visualización. Si configuro este archivo y vuelvo a mi navegador y quiénes son mis autos particularmente sección de servicio, ahora puedes ver el resultado. Ahora exhibo, todos los menús desplegables, diseño de logotipos, diseño web y desarrollo web. Pero nuestra segunda opción desplegable no funciona a la perfección. Pero antes necesitamos organizar perfectamente nuestro menú desplegable de una sección. Volvamos al código de Visual Studio editado de nuevo. Aquí voy a seleccionar punto desplegable uno. Después fijó los casos, O primera propiedad es posición, posición absoluta. Y para arreglarlo por pie, necesitamos usar otra propiedad, que es display. Mostrar escorias, y quiero organizar elementos desplegables, columna sabia. Por eso necesitamos usar otra propiedad, que es plex direction. Dirección de Plag, columna. También necesitamos establecer qué a nuestro cuadro desplegable. Tipo Herm, qué 100%. Si configuro este archivo y vuelvo a mi navegador y coloco mi curser en la sección de servicio, ahora lo puedes ver perfectamente Aquí puedes ver, alineamos perfectamente nuestros elementos desplegables, columna sabia. Ahora necesitamos mostrar nuestro segundo menú desplegable. Para eso, casi, necesitamos hacer lo mismo. Volvamos al código s studio, y voy a replicar esta sección Al principio, voy a ocultar nuestro menú desplegable dos. Desplegable dos, esto, y ahora no necesito esta propiedad de posición. Yo lo quito. Además, necesitamos agregar un desplegable de efecto hover al elemento de la lista Por ahora, no necesito usar sector de estilo directo para eso y dam para cambiar desplegable uno a desplegable dos. Además, voy a quitar el área del menú y estoy tipo punto desplegable. Desplázate bajo el alcance uno. Además, no necesito esta propiedad top porque quiero mostrarla lado p. Voy a establecer este archivo. A continuación, voy a cambiar este nombre electo, desplegable uno a desplegable dos, y voy a seguir siendo toda la propiedad y valor igual, pero voy a quitar con propiedad, y tipo Home top zero. Ahí voy a usar otra propiedad, que es top top zero. Nuestra siguiente propiedad es Lip Lap cien por ciento. Además, voy a configurar para desplegable a la sección de menú. W 200 píxeles. Si configuro este archivo y vuelvo a mi navegador y general de servicio y desarrollo web sección general de servicio y desarrollo web, no es trabajo. Creo que cometí algún error. Volvamos al archivo de Estable. Como tú chico, hicimos un error ortográfico en el desplegable dos. Tenemos que usar, no. Si configuro este archivo y configuro mi archivo de estilo y vuelvo a mi navegador nuevamente y monté mi navegador, y coloque el cursor sobre los servicios y también pase el mouse sobre el desarrollo web Ahora puedes ver el resultado. Ahora nuestro menú funciona perfectamente. Como puedes ver cómo podemos crear menú Db abajo usando la propiedad flex. A continuación, voy a agregar una imagen de encabezado y un texto usando propiedades flex. Ahora voy a agregar una imagen de encabezado. Para eso, necesitamos tomar otra etiqueta dip, punto D, y quiero establecer una clase ellos, que es área de banner. Área de subrayado de pancarta. Dentro de esta etiqueta dip, voy a agregar una H para etiquetar. Y Hameroty, potencia de caja flexible. Poder de caja flexible. Y voy a poner este archivo. Ahora, diseñemos el área de banner en nuestro archivo Sess. Voy a copiar este nombre de clase, banner Aa, en mi archivo Sess, voy a atar hacer área de banner Entonces configuro el css O primera propiedad es imagen de fondo. Imagen de Bground. Para imagen de fondo, voy a tomar esta foto, que está en nuestra carpeta de imágenes, NP. Tipo Ho, R. U R L, luego nuestra imagen de carpeta. Slash o nombre de imagen nature dot JPG. Con eso, voy a decir el tamaño del fondo. Tamaño de fondo, cubierta de tamaño de fondo. Además, tenemos que pasar la posición de fondo. Posición de tierra, posición de fondo, centro central. Quiero centrar horizontal y verticalmente este fondo. Por eso paso centro y centro. Ahora voy a establecer altura a este fondo. Altura cien VH. Si configuro este archivo y vuelvo a mi navegador, puedes ver el resultado. Ahora necesitamos alinear este centro de texto de esta imagen. Para eso, necesitamos usar esta propiedad flex. Vamos a llegar al editor de código resto y aquí voy a escribir este play flex. Alinear el centro del artículo. También, voy a pasar justificar el centro de contenido. Si configuro este archivo y tat a por navegador, se puede ver el resultado, potencia de flex box. Ahora necesitamos aumentar el tamaño del texto y cambiar el color. Para eso, voy a seleccionar nuestra etiqueta encabezada. Consiguió área de pancarta H dos. Luego inserte los calibrados o primeros textos de propiedades, tra texto transformar Con eso, voy a cambiar el color. Color, blanco. Además, voy a cambiar el tamaño de la fuente. Tamaño de fuente, 60 píxeles. Además, quiero cambiar la familia de fuentes. Familia de fuentes. Familia de fuentes monospace. Y voy a poner este archivo. Si vuelvo a mi navegador, puedes ver el resultado. Pero no es adecuadamente visible por el fondo. Ahora necesitamos agregar un gradiente sobre el efecto a este fondo. Hagámoslo. Aquí tecleo, lineal, gradiente lineal, entre estos dos valores, voy a usar un coma. Dentro de las llaves hacia abajo, necesitamos pasar el valor de gradiente de punto inicial y final Aquí, voy a usar el valor RGBA, r G B A, A para Alpha, que se usa para transparencia Para el rojo, voy a usar cero. Para verde, también voy a usar cero, y para azul, de nuevo, voy a usar cero. Pero para el valor Alfa, voy a usar 0.6. Este es el lado uno del gradiente v. Necesitamos pasar otro lado del valor de gradiente. Aquí, voy a usar un coma. Y voy a crear esta línea. Voy a copiarlo y aquí voy a pasarlo. Si configuro este archivo y lo hago a mi navegador, ahora puedes ver el resultado. Creé con éxito un brote de navegación usando la propiedad Flexos Es uno de los buenos usos y ejemplo de la propiedad Flexboxs Gracias por ver este video, sintonía estatal para nuestro próximo proyecto.