Guía completa de Flexbox con un proyecto completo 2024

1. Introducción y lo que vas a aprender: ¿ Estás cansado de usar carrozas que tener las claras esas mismas carrozas? ¿ Estás cansado de usar el posicionamiento para lograr la capa que quieres? Y luego descubriendo que todo se desmorona cuando lo ves en diferentes tamaños de pantalla. ¿ Quieres crear diseños de respuesta avanzados y CSS usando solo líneas de código simples. Si es así, entonces este curso es para ti. Soy un deck ADSR, un desarrollador web full stack y freelancer desde hace más de siete años. Y seré tu instructor a lo largo de este curso. En esta serie de lecciones aprenderás todo lo que necesitas saber para empezar a usar flexbox en tus futuros proyectos. Empezaremos por aprender y entender cómo funciona flexbox. Porque creo que si alguna vez has intentado usar flexbox antes, podrías haber estado abrumado por el número de nuevas propiedades. Existen alrededor de 11 o 12 propiedades nuevas con un promedio de cuatro valores potenciales. Por lo que puede ser un poco abrumador saltar directamente. Pero a través de este curso, obtendrás una comprensión clara de cómo funciona cada propiedad y cómo cada propiedad específica puede usarse para controlar el diseño de diferentes maneras. Creo en aprender haciéndolo después entender y aprender todas las propiedades de flexbox, nos ensuciaremos las manos y empezaremos construyendo dos menús como menú simple, de un solo nivel y uno avanzado. Y en esta parte del curso, verás todo lo que aprendiste en lecciones anteriores en acción paso a paso. Algo que tenía en mente cuando estaba construyendo este curso es que quería que destaque de otros cursos. Noté que en otros cursos de flexbox, sólo se ven algunas cajas en la pantalla y los instructores simplemente moviéndolas por ahí usando flexbox. Y al final del curso está de repente terminado y te quedas pensando, bien, eso estuvo bien. Aprendí los conceptos básicos de flexbox. Pero ahora qué, ¿cómo puedo usar este conocimiento en ejemplos del mundo real? Porque después de todo, las páginas web no son sólo algunas cajas moviéndose, ¿verdad? Y es exactamente por eso que creé la última sección de este curso. En esa sección, construiremos un proyecto completo desde cero que construí para ti. Mi enfoque principal mientras venía con este proyecto es cómo implementar cada propiedad que aprendemos sobre flexbox en el curso. Ver puedes obtener una sólida comprensión de lo que podemos hacer usando estas propiedades. Por lo que en el proyecto, aprenderás a crear muchos diseños de eventos diferentes. Entonces aprenderás cuál es el diseño del Santo Grial y cómo construirlo con solo tres o cuatro líneas de código. Antes de flexbox, eso era imposible de lograr con CSS regular. Una vez hecho eso, construiremos un encabezado con el menú y aprenderemos a centralizar el contenido verticalmente usando flexbox, que solía ser un enorme dolor de cabeza. Después de eso, se crearán columnas de igual altura, que es un diseño común que verás mucho en blogs o sitios de revistas. Después creará dos secciones más que contengan diseños avanzados de tarjetas que serán muy complejos si trataste de crearlas usando CSS regular. Si hicieras eso, terminarías teniendo demasiadas líneas de código y te resultaría muy difícil manejar este tipo de diseño si trataras de hacerlo sensible. Por último, crearemos una galería de imágenes con este diseño moderno conocido como el diseño de mampostería horizontal, lo que básicamente significa que todos los elementos deben tener diferentes anchuras aleatorias pero de la misma altura. Aprenderemos a configurar estos anchos aleatorios usando algunos selectores CSS avanzados. Y por supuesto, todo será plenamente receptivo. Por lo que se verá genial en cada tamaño de pantalla, desde dispositivos móviles hasta tabletas e incluso pantallas más anchas. Ahora estoy aquí para servirte. Entonces durante este curso, si tienes alguna pregunta y quiero decir, cualquier pregunta que te venga a la mente, solo ponla en la Q y una sección y te contestaré lo antes posible. También quiero hacer de este un curso de cinco estrellas. Entonces si tienes alguna sugerencia, solo deja una reseña con tus críticas constructivas. No creo cursos y solo los dejo afuera son mejorados regularmente y actualizamos este curso y tal vez incluso agrego algo más de contenido si veo algunas buenas sugerencias. Ahora con todo eso dicho, no puedo esperar a verte en el curso. Así que presiona el botón de inscribir y sumémonos y empecemos nuestro viaje aprendiendo flexbox. 2. 2 crear nuestro primer container de flexbox: Hola a todos. En esta lección vamos a crear nuestro primer contenedor flexbox. Entonces, empecemos. Muy bien, cada vez que quieras usar flexbox para controlar tus elementos, tienes que pasar por tres pasos. En primer lugar, hay que especificar los elementos que desea controlar. Su alineación son dimensionamiento o lo que sea usando flexbox. Es decir, los elementos en los que desea aplicar flexbox. En segundo lugar, desea envolver todos estos elementos dentro de un contenedor exterior. Y en tercer lugar, se desea establecer la propiedad display del contenedor a flex haciendo estos tres pasos. Ahora tienes un contenedor flex, y dentro de ese contenedor flex, tienes elementos o elementos flex, lo que significa que ahora puedes usar propiedades flexbox en ese contenedor o en esos elementos, o en ambos para controlar cómo estos los elementos deben mirar en su página de acuerdo a su diseño. Déjame mostrarte un ejemplo de lo que estoy hablando aquí en mi editor de código. Tengo algo de HTML, Es solo HTML básico. Se puede ver que tengo un div con una clase de contenedor flex. Y dentro de eso, tengo para niños divs con una clase de elemento flex a cada uno de ellos. Si los veo en mi navegador, puedes ver que se muestran como elementos de bloque, por supuesto, porque son divs, solo están sentados uno encima del otro. Pero ahora quiero usar flexbox en esta página. Usemos nuestros tres pasos. En primer lugar, elige los elementos que quieres controlar usando flexbox. Y por supuesto elegiríamos estos cuatro divs. Segundo, pero todos ellos dentro de un contenedor exterior. Ya hicimos eso. Se puede ver que están todos envueltos con este div exterior con una clase de contenedor flex. Y luego en tercer lugar, establezca la propiedad display del contenedor en flex. Pasemos a nuestro CSS y hagamos eso. Desplázate un poco hacia abajo hasta que encuentres contenedor flex y establezcas la pantalla en flex. Ahora puedes ver que al establecer la propiedad de visualización del contenedor a flex, los elementos flex ahora están flotados a la izquierda y se muestran uno al lado del otro. Y eso es lo que hace display flex por sí solo. Además, el ancho de cada elemento flex dependerá de su contenido. Por ejemplo, si escribo algún texto extra aquí mismo en el segundo div, se puede ver que su ancho aumenta para manejar el contenido. Y ahora el contenedor flex y los elementos de flujo están listos para ser controlados por las propiedades flexbox y aprenderemos a controlarlos en próximos videos. Pero por ahora, esto es todo para esta conferencia. Te veré en el próximo. 3. 3 comprender los árboles principales y: Creo que esta lección es una de las lecciones más importantes de todo el curso. Y si entiendes esta lección, entonces todas las próximas lecciones, sólo estaremos construyendo en esta. Porque en esta lección se habla del core CSS flexbox, que es entender Maine y eje transversal o flexbox. Entonces, empecemos. Muy bien, entonces en la lección anterior, cuando definimos el contenedor flex dándole flex display, notamos que los elementos flex se mostraban uno al lado del otro horizontalmente. Podría preguntarse por qué horizontalmente y por qué no, por ejemplo, verticalmente. Bueno, hay una buena razón. Ves cada vez que definas un contenedor flex, que también definirá la dirección de flujo de los elementos dentro de ese contenedor flex. Ya sea que esta dirección sea horizontal o verticalmente, Hay dos direcciones de flujo. Una fila, que se aplica por defecto cuando se define el contenedor flex y básicamente alinea los elementos horizontalmente, como en el último video. Y a la columna, que tienes que aplicar si quieres anular el valor predeterminado. Y las columnas alinean los elementos verticalmente. Pero, ¿cómo cambio la dirección del flujo de los elementos de fila a columna? Bueno, utilizas una propiedad llamada flex flow y aplicas al contenedor flex mismo y estableces su valor en columna. Entonces hagámoslo realmente y veamos cómo se ve aquí en mi editor de código en nuestro archivo CSS, Digamos que columna de flujo flex. Ya puedes ver ahora solo están sentados uno encima del otro como antes. Ahora bien, ¿cuál es el punto de todo eso? ¿ Y por qué dije todas esas cosas? Esta es la lección más importante. Bueno, la razón es porque cuando el flujo de flujo se establece en fila, que de nuevo es el predeterminado, entonces se generan automáticamente dos ejes imaginarios. El eje principal y el eje transversal. El eje principal será horizontal y el eje transversal será vertical. Pero si establecemos el flujo flex en columna, entonces el eje principal en este caso será vertical y el eje transversal será horizontal. Pero aún así, ¿cuál es el gran problema? ¿ Por qué es tan importante eso? Bueno, esto es tan importante porque más adelante en el curso, cuando usamos propiedades flexbox, algunas de ellas siempre afectarán elementos a lo largo del eje principal dependiendo de si es horizontal o vertical. Recuerda, dijimos que será horizontal. flujo de flujo es rho y será vertical si el flujo flex es columna. Y algunas otras propiedades siempre afectarán a los elementos a lo largo del eje transversal dependiendo de si es horizontal o vertical. Al entender esto, cuando aprendas nuevas propiedades, solo necesitarás saber a qué eje afecta esa propiedad. Si es el eje principal o si es el eje transversal. Y tú estás bien para ir. Déjame ayudarte a entender mejor. Vamos a configurar el flujo flex para relegar. Ahora, imagina que hay dos ejes que van sobre el eje principal y el eje transversal. El eje principal en este caso será horizontal porque el flujo de flujo es rho y el eje transversal será vertical. Por supuesto. Ahora voy a establecer justificar contenido al espacio entre. No te preocupes por esta propiedad en este momento. Lo exploraremos más adelante. Pero lo que quiero que sepan de esta propiedad es que se considera una propiedad de eje principal. Es decir, afecta sólo al eje principal, que en nuestro caso es el horizontal. Entonces si voy a mi navegador y refresco, se puede ver que afecta a los elementos horizontalmente porque el eje principal es horizontal y es una propiedad de eje principal. Pero si voy a mi CSS y cambio flex flow a column y refresco. Oh, mira, nosotros los elementos cambiamos verticalmente. Y sí, es decir porque cuando el flujo de flujo es columna, el eje principal es vertical y justificar el contenido afecta al eje principal. Ahora espero que hayas entendido esta conferencia. Podría haber hablado mucho y repetido algunas cosas, pero eso se debe a que esta conferencia es muy importante y te ayudará a entender todo el curso. Entonces esto es todo para esta conferencia, y te veré en la siguiente. 4. 4 más sobre la propiedad de flujo flex: Hola a todos. En esta lección vamos a aprender más sobre la propiedad de flujo de flujo y los demás valores que acepta. Entonces, empecemos. Cómo las tarifas. Por lo que recuerdas del último video que después de crear un contenedor flex, entonces necesitas definir la dirección del flujo de flujo para que puedas definir la dirección del eje principal y el eje transversal. Ahora, además de fila y columna, la propiedad de flujo de flujo también acepta reversa de fila y reversa de columna. Entonces con el fin de establecer la dirección de flujo del contenedor, solo voy a agregar flex flow rho. se puede ver nada cambia porque como dije, el flujo de flujo se establece en fila por defecto, lo que básicamente muestra los elementos flex horizontalmente y los flota a la izquierda. Ahora echemos un vistazo a los otros valores que acepta la propiedad flex flow. Además del rho, podemos usar el reverso de fila, que volteará los artículos horizontalmente y los empujará hasta el final del contenedor. En otras palabras, flotarlas hacia la derecha y voltearlas. Por lo que puedes ver ahora tenemos 432, entonces también podemos usar columna. Entonces voy a seguir adelante y agregar columna. Ahora puedes ver que nuestro contenedor flex está mostrando los elementos flex como una columna. Están sentados uno debajo del otro como elementos normales de bloque. Ahora, también podemos usar reversa de columna. Se puede ver que volteará los artículos verticalmente y los empujará hasta el final del contenedor. Se puede ver que también tenemos 4321, y eso es todo para esta lección rápida. Y ahora ya sabes qué valores flex flow acepta. 5. 5 aprender la propiedad de envoltura flex: Hola a todos. En esta lección rápida vamos a aprender sobre la propiedad de envoltura de flujo. Entonces, empecemos. Por defecto, todos los contenedores flexbox son contenedores de una sola línea, lo que significa que los elementos flex siempre se mostrarán en una sola línea. Y si tienes muchos artículos, no se envolverán a la siguiente línea cuando no haya espacio suficiente para ellos dentro del contenedor, van a tipo de desbordamiento. Por ejemplo, si copio todos los elementos y los pego de nuevo y luego hago el contenedor con más pequeño. Se puede ver que ahora los elementos salen de nuestro contenedor. Pero la mayoría de las veces no queremos que eso suceda, sobre todo cuando se trata de diseño receptivo. Querirá que los elementos se envuelvan a la siguiente línea. Si no hay suficiente espacio para que hagan eso, solo necesitamos usar la propiedad flex wrap. Por lo que voy a aplicar flex rat, rata al contenedor. Y ahora se puede ver que los elementos simplemente se envuelven a la siguiente línea cuando no tienen suficiente espacio. También podemos usar un reverso de rap. Entonces probemos eso y veamos qué va a conseguir. Se puede ver que el reverso de envoltura simplemente invierte las líneas mismas y no afecta a los elementos ni los voltea ni nada por el estilo. Y así es todo para la propiedad flex wrap. Es muy fácil, pero muy importante, y lo usarás mucho. 6. 6 alinear con justificar la propiedad de contenido: Ahora, después de entender el concepto de los ejes principal y transversal, en este capítulo, vamos a echar un vistazo a las propiedades flexbox que afectan la alineación tanto del eje principal como del eje transversal. Muy bien, entonces en esta lección, comenzaremos con las propiedades que afectan al eje principal. Empecemos con la propiedad justify content. Básicamente, lo que justifica el contenido es que controla cómo los elementos de flujo manejarán el espacio libre restante dentro del contenedor. Y cómo se mostrarán estos elementos de flujo en relación con este espacio restante. O en otras palabras, cómo se distribuirá el espacio restante alrededor de los elementos. Entonces justifique que el contenido no hará nada si el contenedor no tiene espacio libre o si los elementos llenan por completo el contenedor sin dejar espacio libre. Entonces recuerda, siempre que quieras usar justificar contenido, tu contenedor debe tener espacio libre. De acuerdo, ahora, justificar el contenido acepta cinco valores. En primer lugar, flex, start, que es el valor predeterminado. Alinea los artículos al inicio del contenedor flex. Segundo, extremo flex, que alinea los artículos al final del contenedor flex. Tercero, Centro, que centraliza el contenido dentro del contenedor flex. En cuarto lugar, el espacio entre el cual separa los elementos y distribuye el espacio restante entre ellos, pero no alrededor de ellos. Y por último, espacio alrededor del cual separa los elementos y distribuye el espacio restante entre ellos y alrededor de ellos. Y el espacio alrededor de los elementos equivaldrá a la mitad del espacio entre ellos. Entonces echemos un vistazo y veamos esos valores en acción. Si vuelvo a nuestro CSS, puedo establecer justify content para flex start al principio. Y se puede ver que esto no hace mucho porque es el valor por defecto. Y alinea los artículos al principio del contenedor sin espaciamiento entre ellos. Y el espacio libre estará aquí mismo. Ahora, probemos flex end. Se puede ver que empuja todos los artículos hasta el final y el espacio restante estaremos al inicio del contenedor. Muy bien, intentemos Centro. Se puede ver que solo se centran los elementos y el espacio restante se distribuye equitativamente entre el principio y el final, el contenedor flex. A continuación, intentemos espacio entre. Se puede ver que separa los elementos y pone igual espacio entre cada uno. Pero el primer elemento se empuja al principio del contenedor, y el último elemento se empuja hasta el final del mismo, lo que significa que no habrá espacio entre ellos y su lado del contenedor. Y esa es la diferencia entre el espacio n espacio alrededor. Entonces si sigo adelante y agrego espacio alrededor, se puede ver que separa los elementos con espacios iguales, igual que el espacio entre eso. El mayor diferencia es que pondrá espacio al principio y espacio al final del contenedor. Y esos espacios son iguales a la mitad del espacio entre los propios elementos. Entonces, por ejemplo, si el espacio entre los elementos es de 50 píxeles, dentro del espacio justo aquí habrá 25 píxeles. Y recuerden, esta es una propiedad de eje principal, es decir así como la usamos para cambiar los elementos horizontalmente, también podemos usarla para cambiarlos verticalmente. Por lo que nota que la altura del contenedor es de 300 píxeles. Por lo que podemos tener espacio libre y podemos usar justificar contenido verticalmente. Entonces si sigo adelante y configuro el flujo flex a columna, y antes de recargar mi navegador, ya sabes que lo que esto hará es hacer vertical el eje principal aquí. Por lo tanto justificar el contenido funcionará verticalmente. En este caso. Se puede ver ahora que el espacio alrededor funciona verticalmente, no horizontalmente. Y ahora por supuesto, se pueden aplicar todos los valores anteriores y afectará verticalmente a los elementos. Por ejemplo, usemos Flex start. Ya ves ahora alinea los artículos al principio del contenedor verticalmente. Y extremo flex los alineará al final del contenedor verticalmente y centro los sinterizará verticalmente, Por supuesto. Ahora, una cosa a notar es que justificar propiedades de contenido se aplican al propio contenedor flex, no a los artículos dentro de él. Y esto es todo para esta conferencia. Espero que ahora entiendas por qué el eje principal y el eje transversal son importantes cuando usamos propiedades que se aplican al contenedor flex, como justificar contenido. Y seguiremos trabajando con ellos en el próximo video. 7. 7 más sobre justificar el contenido: Hola a todos. En esta lección rápida, veremos cómo justifica el contenido funciona cuando el flujo flex se establece en reversa de fila o reversa de columna. Entonces, empecemos. Muy bien, así que ahora tenemos nuestros cuatro divs y estoy configurando la propiedad display del contenedor en flex. Por defecto, el flujo flex es rho, por lo que los elementos se alinean horizontalmente a la izquierda así. Ahora, vamos a nuestro contenedor y añadamos flex flow row reverse. Al hacer esto, los contenedores Start ahora está a la derecha. Significa que si sigo adelante y agrego justificar contenido, inicio flex. Se puede ver que flex start ahora alinea los elementos a la derecha, no a la izquierda porque tenemos nuestro flex flow está configurado en fila inversa. Y esto también significa que si sigo adelante y agrego flex end en su lugar, por supuesto, los elementos se alinearán a la izquierda en este caso. Ahora bien, esto funciona de la misma manera con la columna inversa. Entonces si cambio fila reversa a columna reversa, recuerda ahora justificar el contenido funcionará verticalmente, no horizontalmente. Entonces cuando recargo, puede ver que los elementos están alineados a la parte superior del contenedor porque ahora se invierte la columna. Entonces el inicio es el final y viceversa. Por lo que Flex extremo alinea islas al inicio del contenedor en este caso. Y por supuesto, si cambio este extremo flex a flex start, se puede ver que los elementos ahora están alineados al final del contenedor. Y esto es todo para esta lección rápida. Y te veo en el próximo. 8. 8 elementos de alineado con la propiedad de artículos alineados: Hola a todos. En esta lección vamos a hablar de una línea de ítems, que es la propiedad que controla los elementos a lo largo del eje transversal. Entonces, empecemos. Muy bien, entonces antes de empezar, debo decir que una línea de ítems y justificar el contenido son realmente similares entre sí. Significa que ambos se aplican al contenedor flex y ambos necesitan espacio libre en el contenedor para funcionar. El mayor diferencia es que justifican los elementos de control de contenido a lo largo del eje principal, como vimos en la lección anterior. Pero alinear elementos los controla a lo largo del eje transversal. La otra diferencia es que los valores que alinean los elementos exceptuaciones son un poco diferentes a los valores que justifican que el contenido acepta. Ahora, alinear ítems acepta cuatro valores. En primer lugar, flex, start, que alineará los elementos a lo largo del eje transversal con el inicio del contenedor. Segundo, extremo flex, que los alineará a lo largo del eje transversal hasta el final del contenedor. Tercero, centro, que centrará los elementos a lo largo del eje transversal y adelante. Estirar. Este es un valor predeterminado. Y simplemente estira los elementos para tener la misma altura o el mismo ancho que el contenedor. Ahora, veamos esos valores en acción. Aquí. En nuestro CSS. El flujo flex se establece en fila, lo que significa que el eje transversal es ahora el vertical. Y puedes ver nuestros divs o estiramientos verticalmente por defecto. Por lo que podemos cambiar esto usando la propiedad align items. Entonces si voy a mi contenedor flex y agrego una línea de ítems, inicio flex. Se puede ver que el flex start empujará los elementos todo el camino hasta la parte superior del contenedor, dejando espacio vacío abajo. Volvamos a nuestro CSS y probemos flex end. Y se puede ver que empujará los elementos hasta el final del contenedor verticalmente a lo largo del eje transversal. Y vamos a probar Centro. Y por supuesto centrará los elementos verticalmente a lo largo del eje transversal, dejando espacios iguales por encima y por debajo de ellos. Ahora, intentemos stretch, que es el valor predeterminado. Simplemente estirará todos los elementos y les dará la altura del contenedor. Y no considerará el contenido, lo que significa que todos los elementos terminarán con la misma altura aunque el contenido sea diferente. Y eso es muy limpio y limpio cuando se quiere hacer columnas con la misma altura, aunque el contenido sea diferente en tamaño. Ahora, usemos estos valores cuando el flujo flex se establece en la columna. En otras palabras, cuando el eje transversal es horizontal, si configuro el flujo flex a la columna justo aquí. Ahora los elementos se muestran como una columna y nuestro estiramiento horizontalmente a lo largo del eje transversal, tomando todo el ancho del contenedor. Ahora usemos flex start. Se ve que los elementos ahora se empujan al inicio del contenedor a lo largo del eje transversal a la izquierda aquí. Y centro. Por supuesto, los centraremos horizontalmente y el extremo flex. Los empujaremos hasta el final del contenedor horizontalmente a lo largo del eje transversal a la derecha aquí. Ahora, sigamos adelante y agreguemos justificar el espacio de contenido. Por ejemplo. Oye, probemos algo. Quiero que paren el video y adivinen qué le va a hacer esto a nuestros elementos. Así que adelante y pausa ahora y adivina. De acuerdo, estamos de vuelta. Vamos a recargar nuestra página y a ver, espero que lo hayas adivinado bien. Lo que esto hizo es que afectó a los elementos a lo largo del eje principal, que es vertical en este caso, porque recuerden, tenemos columna de flujo flex ahora mismo. Por lo que separa los elementos verticalmente a lo largo del eje principal. Por lo que ahora puedes usar tanto justificar contenido alinear elementos juntos para obtener el diseño que quieras. 9. 9 alinear un solo elemento con la propiedad de autor.: Hola a todos. En la lección anterior, aprendimos cómo controlar la alineación de elementos a lo largo del eje transversal utilizando la propiedad align items. Pero en este, aprenderemos a hacer eso a un solo elemento usando la propiedad align self. Entonces, empecemos. Muy bien, Así que alinear uno mismo y alinear los artículos son realmente similares entre sí. Significa que ambos afectan elementos a lo largo del eje transversal. Ambos excepto los mismos valores que son flex, start, Flex, End, Center, y stretch. Pero la principal diferencia es que alinear auto afecta a un solo elemento flex solo dentro del contenedor. tanto que alinear artículos afecta a todos los hijos del contenedor flex. Y por eso, cuando usamos align self en nuestro CSS, lo usamos en un elemento flex específico, no en el contenedor flex. Muy bien, así que si voy aquí a nuestro selector de contenedores flex y agrego una línea ítems flex start. Se puede ver que todos los elementos se empujan a la parte superior del contenedor. Ahora esto es bueno y es práctico. Pero y si quiero, por ejemplo, estirar sólo el primer elemento sin afectar a los demás elementos. O que si quiero centrar el segundo y así sucesivamente. Aquí es donde entra alinear auto. Si voy aquí a mi elemento flex y agrego alinear auto estiramiento. Se puede ver que el primer elemento es estirar y llenar el contenedor verticalmente. En tanto que los otros elementos ahí, la parte superior del contenedor. Vayamos a nuestro segundo elemento y agregamos alinear autocentro. Se puede ver ahora está centrado. Usemos flex end en el tercer elemento. Y por supuesto esto lo empujará hasta el final del contenedor. Ahora, el último valor es inicio flex. Y puedes ver que no hace nada porque los elementos de alineación están configurados para que se inicien ahí. Entonces esto es todo para esta lección, todos, y los veo en la siguiente. 10. 10 alinear múltiples líneas con la propiedad de contenido alineado: En esta lección, estaremos hablando de otra propiedad que se utiliza en el contenedor flex, alinear contenido. Entonces, empecemos. Muy bien, Entonces, ¿qué podemos alinear la propiedad de contenido hacer para nuestros elementos? Básicamente, alinear contenido se utiliza cuando tenemos múltiples líneas de elementos. Controla cómo se muestran estas múltiples líneas en nuestro contenedor. Por ejemplo, si copiamos nuestros cuatro divs, pegarlos un par de veces. Guardar y recargar. Vayamos a nuestro CSS y configuramos flex wrap para envolver. Y ahora puedes ver tenemos múltiples líneas de elementos dentro de nuestro contenedor. También podemos controlar cómo se mostrarán estas líneas utilizando la propiedad align content. Por ejemplo, si sigo adelante y establezco un contenido de línea para centrar, se puede ver que las líneas ahora están centradas en el contenedor. También podemos usar flex start. Y se puede ver que empujará las líneas hacia la parte superior del contenedor. También, podemos usar Flex N, que por supuesto empujará todas las líneas hasta el final del contenedor. También podemos usar el espacio entre y el espacio alrededor. Probemos eso. Digamos espacio entre. Y como cabría esperar, separa las líneas y pone espacios iguales entre ellas. Y por último, el espacio alrededor del cual se pueden ver separa las líneas y pone espacios iguales entre ellas con la mitad de ese espacio antes de la primera línea y después de la última línea. Entonces esto es todo para la propiedad align content. Puedes usarlo solo si tienes múltiples líneas en tu contenido dentro del contenedor. Te ayudará a distribuir el espacio restante entre esas líneas. 11. 11 aprender la propiedad de orden: Flexbox nos da la potencia de reordenar los elementos flex de cualquier manera que queramos sin cambiar el código fuente. Y eso es lo que vamos a hacer en esta lección. Entonces, empecemos. Muy bien, Así que aquí en nuestro HTML tenemos nuestro contenedor flex con nuestros elementos flex dentro de él. Y porque en el orden fuente, uno aparece primero, luego a después de eso. Después 34. Si los miramos en el navegador, veremos que uno viene primero, luego también, después 34. Ahora, podemos controlar el orden de estos elementos utilizando la propiedad de orden. Y el valor predeterminado para la propiedad de orden es 0. Entonces, por ejemplo, si voy a mi CSS y agrego orden 0 a mi segundo elemento, verás que nada cambiará porque todos tienen un orden de 0 por defecto. Por lo que el orden será fijado por la fuente. Ahora, si voy aquí y cambio este 0 a uno, ya verás ahora que el segundo elemento será el último aquí. También podemos usar valores negativos para asegurar que nuestro elemento siempre aparezca como el primero. Por ejemplo, si agrego menos uno en lugar de éste, se puede ver que el segundo elemento aparece justo aquí. En la primera posición. Podemos ir más allá de eso y reordenar todos nuestros elementos. Por ejemplo, si voy a mi primer elemento y agrego orden para, entonces vaya a mi segundo y agregue orden tres, luego agrego ordenado a, a mi tercero. Y después de eso, un orden uno para nuestro último elemento. Ahora puedes ver que todos están reordenados. Ahora tenemos 4321, y eso es todo para esta propiedad. Es fácil y hará que tu trabajo sea más flexible. Veremos cómo usarlo en acción mientras estamos construyendo nuestro proyecto. 12. Crecimiento flex: Hola a todos. Bienvenidos a este nuevo capítulo. En este capítulo vamos a aprender a controlar el dimensionamiento de nuestros elementos de flujo. Ves cuando configuramos la propiedad display del contenedor a flex, notamos que cada elemento flex con dependerá de su contenido. Significa que si uno de los elementos tiene más contenido que los demás, entonces el ancho de este elemento será más que los otros elementos con, porque tienen menos contenido. Y el espacio restante del contenedor estará vacío. En el último capítulo, aprendimos a distribuir este espacio restante alrededor de los elementos. En otras palabras, cómo separar los elementos con el espacio. Pero en este, aprenderemos a agregar el espacio al ancho del elemento y hacer que los elementos con aumenten y se amplíen para ocupar este espacio. Entonces, empecemos. Por lo que en esta lección vamos a echar un vistazo a la propiedad flex grow. Flex grow se expresa usando un número como uno o dos y así sucesivamente. Y se utiliza para determinar cuánto crecerá el elemento flex en relación con el resto de los elementos flex dentro del contenedor. En otras palabras, cuánto espacio tomarán los elementos con del espacio restante en relación con los demás elementos. ¿ Todos serán elementos ocuparán igual espacio, o uno de ellos tomará más que los demás? Ya basta de hablar. Veamos esto en acción. Aquí. En nuestro editor de códigos. Los cuatro divs están sentados uno al lado del otro, y el ancho de cada uno de ellos depende del contenido. Se puede ver que el segundo div es más grande que los demás. Ahora, tengo el espacio restante aquí mismo, y quiero que mis elementos llenen el contenedor y ocupen este espacio restante. Ahora. De acuerdo, así que vamos a establecer flex grow de estos elementos flex en uno. Entonces antes de recargar mi navegador, lo que pasará aquí es que este espacio libre se distribuirá por igual entre los cuatro divs. Por ejemplo, si este espacio restante aquí es de 100 píxeles, entonces cada elemento tomará 25 píxeles y los agregará a su ancho. Lo cual es realmente impresionante poder hacer con una sola línea de código. Entonces vamos a recargar y se puede ver que el ancho de cada elemento aumentó en el mismo valor. Por ejemplo, si el ancho del primer elemento fue de 50 píxeles según su contenido, su ancho ahora es de 75 píxeles. Y el ancho del segundo elemento era de 100 píxeles, entonces su ancho ahora es de 125 píxeles. Pero eso no es todo. Y si quiero que el tercer elemento tome el doble del espacio sobrante. Como dirían los otros elementos, vamos a establecer flex grow para el tercer elemento a dos. Se puede ver que su ancho aumenta ahora y el espacio restante ahora se distribuye de una manera que este tercer elemento tomará el doble que los otros tres dibs. Ahora el valor predeterminado para flex grow es 0. Y eso sólo significa que el ancho de los elementos dependerá del contenido. Entonces si sigo adelante y elimino esta línea justo aquí, vaya a mi selector de elementos flex y flex grow 0. Se puede ver que los elementos con dependen del contenido, que es la configuración predeterminada. Otra cosa interesante que podemos hacer con la propiedad flex grow es que puedes hacer que solo un elemento se expanda y ocupe el espacio libre mientras que los otros elementos no cambiarán. Podemos hacer esto fácilmente ajustando el flex grow de nuestro elemento a cualquier valor y no configurándolo para los otros elementos o simplemente configurándolo en 0, como estamos haciendo aquí. Entonces por ejemplo, si quiero hacer que sólo el tercer elemento se expanda y ocupe este espacio libre, puedo ir aquí mismo y dijo Es flex crecer a uno por ejemplo, o 2, o cualquier otro valor. Yo lo pondré a uno. Y ahora se puede ver que se expande y ocupa todo el espacio. Ahora también podemos usar flex grow para controlar el dimensionamiento de los elementos verticalmente. Creo que ya sabes cómo podemos hacer eso. Iep, solo necesitamos cambiar el flujo flex de fila a columna. Entonces si voy aquí mismo dentro del selector de nuestro contenedor y configuro flex flow a columna. Se puede ver que ahora está funcionando verticalmente y afectando la altura. Por lo que para envolver las cosas, la propiedad de crecimiento flex se utiliza para controlar el dimensionamiento de los elementos flex relativos entre sí. El flujo flex es de fila. Controlará el ancho y si es columna, entonces controlará la altura. El valor predeterminado para él es 0, lo que básicamente significa que el tamaño de cada elemento dependerá de su contenido. Pero si lo cambiamos a uno para todos los elementos de flujo, cuando el espacio libre se añadirá por igual a cada tamaño de elemento. Por otro lado, si establecemos el flex grow de solo uno de nuestros elementos a cualquier valor, pero dejamos todos los demás elementos en un valor de 0, entonces ese elemento tomará todo el espacio libre para sí mismo. Y si queremos hacer que los elementos cambien y crezcan en relación entre sí, siempre podemos establecer el flex grow para todos ellos a cualquier valor que queramos. Por ejemplo, si quiero que un elemento ocupe el doble de espacio que todos los demás elementos. El flex de los años 70 crece propiedad a dos y dijo que es uno para todos los demás elementos. Y si quiero que se tome cuatro veces más que de los otros, puedo vender su flex crecer a cuatro y los otros a uno y así sucesivamente. Por lo que te reto a jugar con los valores de crecimiento flex y ver lo que obtienes. Y si tienes alguna pregunta, solo déjala en la Q y una sección, y estaré encantada de ayudarte. Entonces esto es todo para esta sección, todo el mundo. Y te veré en el próximo. 13. 13 flex: Hola a todos. En esta lección, estaremos aprendiendo sobre la propiedad flex retráctil. No te preocupes, es bastante sencillo. Entonces, empecemos. Está bien. Por lo que en el último video hablamos de la propiedad flex grow y dijimos que nos ayuda a controlar cómo se distribuye el espacio libre del contenedor entre el ancho de nuestros elementos. En este, echaremos un vistazo a la propiedad flex retráctil, que básicamente determina cuánto se encogerán los elementos en relación entre sí dentro del contenedor. Cuando no hay espacio suficiente, todos nos encogemos por el mismo ritmo. ¿ O uno de ellos se encogerá más que los demás y perderá más espacio? Aquí en mi editor de código, ahora tengo que flexibilizar elementos. Se puede ver el ancho de cada uno es de 300 píxeles. Y he establecido la propiedad display del contenedor en flex. También puedes ver que tenemos espacio libre aquí mismo. En el último video, distribuimos este espacio libre entre elementos utilizando la propiedad flex grow. Pero ahora si sigo adelante y encojo mi navegador hasta que ya no haya espacio libre e inspecciono cualquiera de los dos elementos. Entonces vamos a ver. Es raro. Se puede ver los primeros elementos con es unos 300 píxeles y el segundo elementos con es también de unos 300 píxeles. Entonces ahora si sigo encogiendo mi navegador, puedes ver que ahora los elementos también se están encogiendo. Su ancho ahora es menor a 300 píxeles, porque el ancho del propio navegador es menor a 600 píxeles y no puede manejar los elementos, por lo que se están reduciendo. Pero lo interesante es que ambos elementos se están encogiendo por el mismo valor. Significa que si compruebo el ancho ahora, tendrán el mismo ancho. Y esto está sucediendo por defecto. Pero, ¿y si queremos cambiar eso? ¿ Y si queremos hacer que los segundos elementos se encojan? Digamos diez veces más que la primera. Bueno, podemos hacer esto usando la propiedad flex retráctil. Si voy al segundo elemento aquí mismo y agrego flex retráctil 10, ya ves que el segundo elemento se está encogiendo mucho más que el primero. Significado es perder mucho más espacio en relación con el primero. Vamos a borrar eso e ir al selector general de ítems flex y dicho flex retráctil a uno. puede ver que ahora están actuando como antes, encogiendo por la misma cantidad, lo que nos dice que uno es el valor predeterminado para flex retráctil. Intentemos a 0 y veamos qué vamos a conseguir. Se puede ver que los elementos en nuestro desbordamiento fuera del contenedor, quien nos vende que 0 obliga a los elementos a no encogerse por debajo de su ancho. Pero intentemos otra cosa. Vamos a nuestro contenedor y pongamos flex wrap para envolver. Pero algo interesante está sucediendo aquí. Ahora los elementos se están envolviendo a la siguiente línea y ya no salen del contenedor. Y honestamente, siempre uso este método en mi trabajo porque la mayoría de las veces no quiero que mis elementos se encojan por debajo de un ancho específico, pero quiero que caigan a la siguiente línea cuando no tengan suficiente espacio. Esto es muy útil, sobre todo cuando se trata de diseño responsive. Por lo que para envolver las cosas, la propiedad flex retráctil se utiliza para controlar cómo los elementos de flujo se encogerán en relación entre sí dentro del contenedor cuando no tienen suficiente espacio. Se aplica al elemento flex en sí, igual que la propiedad flex grow y su valor predeterminado es uno, lo que significa que todos los elementos se encogerán por el mismo valor. Pero podemos cambiar este comportamiento por defecto. Podemos, por ejemplo, hacer que un elemento específico se encoja dos veces más que los demás simplemente estableciendo Es propiedad de encogimiento en dos. También podemos forzar a los elementos a no encogerse por debajo un ancho específico simplemente estableciendo su flex retráctil en 0. Muy bien, todo el mundo, esto es todo para esta lección. Espero que ahora entiendas lo que hace flex retráctil, y te veré en el siguiente. 14. 14 flexbasis: Hola a todos. En esta lección, estaremos hablando de la propiedad flex basis. Entonces, empecemos. De acuerdo, así que la base flex es muy similar a la propiedad width. Básicamente define el tamaño principal inicial elemento antes de que se distribuya cualquier espacio restante. Entonces, por ejemplo, si establece la base flex de un elemento flex en, digamos 100 píxeles. Simplemente le estás diciendo al navegador, oye, siempre y cuando quede suficiente espacio en el contenedor flex, quiero que estos elementos flex con comiencen en 100 píxeles y sean sin embargo que eso. Y se expresa en porcentajes de píxeles en cualquier valor que utilizaría para la propiedad de ancho regular. Por lo que volvamos a nuestro editor de códigos. Si configuro la base flex para este segundo elemento en 300 píxeles, verás que se ha incrementado el ancho. Y si lo inspecciono, verás que su ancho ahora es de 300 píxeles. Pero si encojo mi ventana, se puede ver mientras haya suficiente espacio, el ancho será el mismo. Pero cuando llego a este punto donde no hay suficiente espacio y luego seguir encogiendo, verás que el div comienza a encogerse. Por lo que la base flex le dice al navegador que inicie el ancho de este elemento con un ancho específico si hay algún espacio disponible. Pero si no lo hay, simplemente encogerlo, a menos que por supuesto dijeras flex retráctil a 0. De acuerdo, eliminemos estas dos líneas de código. Nosotros. 15. 15 sección y archivos de principio: Hola a todos, bienvenidos a esta nueva sección del curso. En esta sección, comenzaremos a usar Flexbox on a ejemplos del mundo real. Construiremos estos dos menús responsive usando algunas de las propiedades flexbox que aprendimos en los videos anteriores. Echemos un vistazo a los archivos de inicio de esta sección. Se puede ver aquí tenemos los huesos desnudos para cualquier documento HTML. Tenemos un título aquí. Entonces incluí aquí nuestro archivo de hoja de estilo. Por lo que estaremos agregando nuestros estilos en este archivo. También tengo un enlace CDN para la biblioteca Font Awesome aquí mismo, porque usaremos algunos iconos en nuestro segundo menú. También incluí las fuentes de Google justo aquí. Hice todo esto porque estoy asumiendo que estás familiarizado con todo eso y no quería perder tu tiempo haciéndote escribir todo este código. Entonces aquí mismo dentro de la etiqueta body, he agregado un encabezado y dentro de ella un div con la clase de centrado. Esta clase sólo centra todos los elementos dentro de ella. Entonces agregué este rubro aquí mismo. Y luego a continuación que tenemos esta etiqueta principal la cual contendrá los menús. Y si voy a mi CSS, puedes ver algunos archivos CSS incluidos. Estos archivos son sólo los responsables de los estilos generales para que todo se vea mejor. Si miro este archivo HTML en mi navegador, puedes ver que sólo tenemos el encabezado H1 justo aquí. Muy bien, para que puedas descargar los archivos de inicio después de ver esta conferencia y podemos empezar a construir nuestro primer menú juntos en la siguiente lección. 16. 16 construir un simple menú con flexbox: Hola a todos. En esta lección vamos a construir nuestro primer menú usando Flexbox. Entonces, empecemos. Muy bien, antes que nada, estaremos construyendo el marcado HTML del menú. Entonces voy a ir aquí mismo y añadir una sección con una sección de clase de menú. Y dentro de eso, voy a añadir un H2 con una clase de menú Encabezado. Y sólo diremos menú simple. Hola, Este H2, vamos a añadir una etiqueta nav para añadir una clase de nav single para que podamos usar flexbox en este menú apuntando a esta clase y darle una clase de menú. Para que podamos sumar nuestros estilos generales para todos los menús apuntando a esta clase. Muy bien, así que dentro de este nav, vamos a añadir U, L, Luego LI dentro de ella, y una etiqueta de ancla. Y lo copiaremos y lo pegaremos siete veces. Y decir servicios a domicilio, testimonios, portafolio, blog sobre y contacto. Puedes ver aquí tenemos nuestro menú. Volvamos a nuestro CSS y empecemos a peinarlo. Voy a apuntar a la clase de sección de menú. Entonces añadiré relleno inferior a EM, luego margen inferior a EM también. Y por debajo de eso vamos a apuntar a la UL. Entonces diremos menú UL y agregaremos list-style-type none, para que podamos deshacernos de las balas y luego relleno 0 y luego margen 0. Y luego estableceremos el color de fondo de esta URL a este bonito color gris. Muy bien, ahora vamos a apuntar a las etiquetas de anclaje de nuestro menú. Pondré la decoración de texto a ninguna. Y entonces pondré su color a este bonito color gris oscuro. Y por debajo de eso, voy a añadir un relleno de 0.6 m en la parte superior e inferior, Una E M a la izquierda y a la derecha. Y luego estableceré su propiedad de visualización para bloquear y establecer la transición a todos 0.5 segundos y facilidad. Y ahora se puede ver un menú se ve mucho mejor. Pero agreguemos un bonito color de fondo blanco. Cuando volvamos por encima de los enlaces de vuelta a nuestro CSS, volveré a apuntar a las etiquetas de anclaje. Y cuando pasamos el mouse sobre él, queremos establecer el color de fondo a este bonito color blanco. Añadamos también algunos estilos al H2. Entonces voy a apuntar al menú Clase de encabezado y agregar font-size a E, m, y font-weight normal. Ahora, nuestro menú se ve muy bien en dispositivos móviles. Los enlaces están sentados uno debajo del otro muy bien. Por lo que lo dejaremos así en pantallas más pequeñas. Pero en pantallas más anchas, queremos usar flexbox para que nuestro menú se vea como nuestra demo. Por lo que usaremos consultas de medios para apuntar a pantallas más amplias. Y luego usaremos flexbox para cambiar nuestro menú. Entonces hagámoslo realmente. Vamos a nuestro CSS y empezaremos definiendo una consulta de medios cuando la pantalla sea más ancha de 600 píxeles. Y dentro de esta consulta de medios, apuntaremos a un solo UL de navegación y cambiaremos la propiedad display a flex. Y así, tenemos nuestros ítems de lista mostrados horizontalmente y tenemos un menú que se presenta correctamente. Ahora que tenemos este diseño, podemos empezar a cambiarlo usando Flexbox también. Por ejemplo, ahora todos los elementos de la lista están alineados a la izquierda. ¿ Y si queremos alinearlos a la derecha en su lugar? Recuerda que el valor predeterminado para el flujo flex es fila, lo que significa que el eje principal es horizontal por defecto. Y también recuerdan que cuando queremos controlar la alineación de elementos a lo largo del eje principal, utilizaríamos la propiedad justify content. Entonces con el fin de controlar nuestros artículos de lista horizontalmente y alinearlos hasta el final del contenedor. Por ejemplo, usaremos la propiedad justify content. Entonces volvamos a nuestro CSS. Y debajo de este flex de visualización, estableceremos justify content a flex end. Y ahora tenemos todos nuestros elementos de menú alineados a la derecha. Ahora, juguemos con los valores de contenido justificados. Vayamos a nuestro CSS y probemos el centro. En su lugar. puede ver que ahora está centrando los elementos de la lista. Pero ahora hay una cosa importante. Tenemos que asegurarnos de que nuestro menú sea plenamente receptivo. Y eso significa que si la pantalla se pone lo suficientemente pequeña, necesitamos asegurarnos de que nuestros elementos de menú estén cayendo correctamente. Entonces, por ejemplo, si hago clic con el botón derecho en cualquier elemento y voy inspeccionar elemento y cambiar el ancho de pantalla. Se puede ver que nuestros artículos se están plagando porque su contenedor no tiene suficiente espacio para ellos. Entonces creo que recuerdas lo que debemos hacer en este caso? Sí. Deberíamos configurar el flex wrap de nuestro contenedor para envolver. Entonces vamos a nuestro CSS y voy a añadir flex wrap, wrap. Y ahora puedes ver nuestros elementos de menú se envolverán a la siguiente línea cuando el contenedor no tenga suficiente espacio para ellos. Ahora, sigamos jugando con la propiedad justify content. Volvamos a nuestro CSS y cambiaré el contenido de justificación al espacio alrededor. Y ahora puedes ver que tenemos espacios iguales entre nuestros elementos de menú. Usemos también el espacio entre. Y también separa los elementos con espacios iguales entre ellos. Se puede ver aquí hay un espacio vacío entre los elementos en los que no puedo hacer clic. Pero, ¿y si no quiero eso? ¿Qué tienen? No quiero espacios entre los elementos. Significado quiero que los elementos se amplíen y ocupen este espacio libre. Bueno, podemos hacer esto mediante el uso de la propiedad flex grow. Entonces volvamos a nuestro CSS. Nos dirigimos a nuestros ítems de lista y estableceremos flex grow a uno, lo que significa que todos los ítems ocuparán igual espacio desde el espacio restante. Entonces flex basis auto, lo que significa que el ancho del elemento dependerá de su contenido. Y flex retráctil a 0. Significa que los elementos no se encogerán cuando no tengan espacio disponible, pero delatarán a la siguiente línea en su lugar. Y ahora, si paso el cursor en cualquier lugar entre elementos, puedes ver que ahora no hay espacio libre porque la propiedad flex grow obliga a todos los elementos del menú a tomar este espacio libre por igual porque lo configuramos en uno. Pero ahora hay un pequeño problema aquí. Se puede ver que el texto en sí dentro de los elementos está alineado a la izquierda. Eso se puede arreglar fácilmente simplemente volviendo a nuestro CSS y establecer el texto alineado al centro. Entonces ahora tenemos un menú bonito, sencillo que se ve muy bien con artículos igualmente espaciados y no hay huecos entre ellos. Entonces esto es todo para esta lección, todos, y los veré en la siguiente. 17. 17 construir un menú avanzado con flexbox: Hola a todos. En esta lección estaremos construyendo nuestro menú avanzado usando Flexbox. Entonces, empecemos. Muy bien, entonces empezaremos por construir el marcado HTML. Entonces algo justo aquí debajo de la sección de menú simple y agrega una nueva sección con una clase de sección de menú. Y luego debajo de eso agregaremos un H2 con una clase de menú Encabezado, y diremos Menú Avanzado. Y luego debajo de eso vamos a añadir una etiqueta de nav con una clase de Vance nav y también una clase de menú. Y luego vamos a añadir UL, LI, luego etiqueta de anclaje. Y luego dentro de esta etiqueta ancla, vamos a añadir un div con una clase de icono. Y dentro de ella vamos a añadir una etiqueta I y darle una clase de FAS y también una clase de futbol FIFA. Por lo que este será el div que contiene nuestro icono Font Awesome. Y debajo de este div, vamos a agregar otro div y darle una clase de texto. Y dentro de ella, voy a escribir futbol. Y entonces voy a añadir un lapso y sólo decir es un gran deporte. Entonces voy a copiar esto y pegarlo dos veces. Cambiaremos la clase de íconos a F, una película. Y diremos, películas te hacen la vida mejor. Y aquí diré cámara captura grandes momentos. Entonces ahora vamos a nuestro navegador. Se puede ver que tenemos nuestro menú y ya se ve bonito por las clases que le aplicamos. Aquí puedes ver esta sección de menús y las clases de menú que peinamos en nuestro video anterior. Ahora, echemos un vistazo a nuestro marcado HTML. Se puede ver que tenemos un nav, UL, LI y luego una etiqueta de ancla, igual que nuestro sencillo menú. Por lo que vamos a controlar los elementos de la lista ellos mismos como lo hicimos en el sencillo menú. Significado que haremos de nuestra UL un contenedor flex, lo que significa que los ítems de lista serán Son elementos flex. Entonces podemos cambiarlos usando propiedades de Flexbox. Ahora, si miras dentro de la etiqueta de ancla, puedes ver que tenemos dos divs. El primero contiene el icono y el segundo contiene el texto. Ahora, tal vez te estés preguntando por qué los estoy poniendo en dos divs separados. ¿ Por qué no los puse en un div? Bueno, lo hice porque voy a hacer de este ancla un contenedor flex. Y al hacer esto, estos dos divs serán elementos flex y puedo controlarlos de la manera que quiera. Verá esto en un segundo. Pero ahora vayamos a nuestro CSS y hagamos otra consulta de medios cuando el ancho sea mayor a 600 píxeles también. Y dentro de esto, vamos a apuntar a ese avanzado nav UL. Establezca display en flex y luego configure flex wrap para envolver. Por lo que los elementos de la lista se envuelven a la siguiente línea cuando no tienen espacio disponible. A ver cómo se ve. Se pueden ver los elementos de la lista ahora se sientan uno al lado del otro y flotaron a la izquierda. Pero también puedes ver que tenemos algo de espacio libre a la derecha en el que no podemos hacer click. Y creo que ya sabes cómo podemos arreglar esto. Eso es correcto. Deberíamos establecer el crecimiento flex de los ítems de la lista en uno para que se expandan y tomen el espacio restante por igual. Entonces vayamos a nuestro CSS y apuntemos a nuestros ítems de lista. Después establece flex grow a uno. También establezcamos la base flex en 220 píxeles. Ahora bien, este es un valor que me pareció adecuado para nuestro contenido. Por lo que quiero que los elementos del menú comiencen con este ancho. También pongamos flex retráctil en 0 para que nuestros artículos no se encojan por debajo de 220 píxeles. Y ahora puedes ver que los artículos se ven geniales y son receptivos. Entonces si inspecciono algún elemento, y cuando encojo más mi navegador, puedes verlo rampa muy bien a la siguiente línea y no se encoge debajo de 220 píxeles porque ajustamos flex retráctil a 0. Y cuando encojo el navegador más por debajo de 600 píxeles, los elementos se apilarán uno debajo del otro de una manera agradable. Y esto se verá muy bien en dispositivos móviles. Pero ahora sigamos trabajando. Si echamos un vistazo a nuestra demo, puedes ver que tenemos nuestro icono flotado a la izquierda y el texto a la derecha, así. Por lo que podemos hacer esto fácilmente con Flexbox. Te acuerdas que tenemos dos divs dentro de la etiqueta de anclaje. Uno contiene el icono y el otro contiene el texto. Por lo que para controlarlos, debemos establecer la propiedad de visualización del ancla a flex. Vamos a nuestro CSS y vamos a apuntar a la etiqueta de anclaje y digamos display flex. Se puede ver el icono y el texto se está alineando horizontalmente. Pero queremos un poco de espaciado entre ellos. Podemos hacer esto usando márgenes regulares o relleno, pero lo haremos con Flexbox. Por lo que iremos a nuestro CSS y apuntaremos al div que contiene el icono. Y luego añadir base flex 60 píxeles, por ejemplo. Y además agreguemos un tamaño de fuente de 35 píxeles. Y se puede ver que esto ya se ve muy bien. Si echamos un vistazo a nuestra demo, se puede ver que esta palabra es más grande y este texto se establece debajo de ella. Entonces hagámoslo. Vayamos a nuestro HTML. Se puede ver que tenemos este texto div, y dentro de él un lapso que contiene este texto. Entonces vayamos a nuestro CSS de nuevo y apuntemos al texto div. A continuación, establezca su tamaño de fuente en 25 píxeles. Y es negrita de peso de fuente. Ahora, vamos a apuntar al lapso dentro de él. Establezca su propiedad de visualización para bloquear para que caiga abajo sean palabra grande. A continuación, establezca su tamaño de fuente en 15 píxeles. A continuación, agregue peso de fuente más ligero. Cuando tipo-estilo cursiva. Y ahí lo tienes. Y menú avanzado que queda muy bien en pantallas anchas. Y cuando vas a pantallas más estrechas, se envuelve muy bien. Y cuando vas a dispositivos móviles, se ve bien y apretado. 18. 18 resumen de nuestro proyecto final: Hola a todos. Bienvenido a esta nueva sección del curso donde vamos a construir nuestro proyecto y tratar de utilizar todas las propiedades flexbox que aprendimos en las secciones anteriores. Entonces aquí tenemos nuestro proyecto final, y aquí está el encabezado. Aprenderemos a centrar fácilmente este contenido verticalmente. Y también cómo empujar el menú hasta el final del encabezado verticalmente, así, hará todo eso con Flexbox. A continuación tenemos nuestra sección de Publicaciones. Se puede ver que tenemos dos puestos, luego tres puestos. Y luego el post final que ocupa todo el ancho del área de contenido. Y se puede ver que las columnas de cada fila son iguales en altura aunque el contenido sea diferente. Usando flexbox, lograremos este diseño. Debajo de eso, tenemos la sección reloj hoy con la imagen por un lado y el contenido por el otro. Aprenderemos a cambiar el orden de los elementos en nuestra página sin cambiar el código fuente. Y lo haremos aquí en esta segunda tarjeta. Si le echas un vistazo, puedes ver que el contenido está a la izquierda y la imagen está a la derecha. Pero en el código fuente o en la página HTML, la imagen viene primero y luego el contenido. Por lo que aprenderemos a cambiar su orden usando Flexbox es ordenar propiedad. Entonces tenemos la sección de descarga ahora. Se puede ver que tiene este diseño realmente complejo con la imagen ocupando todo el ancho. Después la sección de contenido debajo de ella, con estos tres divs lado a lado. También puedes ver que el segundo div justo aquí tiene más ancho que los demás. Pero con Flexbox construirá este diseño fácilmente. Después de eso, tenemos nuestra galería de imágenes con este diseño creativo llamado el diseño de mampostería horizontal. Se puede ver que las imágenes tienen valores aleatorios para ancho, pero tienen la misma altura. Y si hacemos click en cualquier imagen , aparece muy bien en un modelo de caja. Y podemos navegar por las imágenes simplemente golpeando las flechas del teclado. Y entonces tenemos nuestro sencillo pie de página aquí. Por aquí a la derecha. Tenemos nuestra barra lateral con algunos widgets agradables. Tiene la misma altura que el área de contenido. Por ejemplo, si me desplaza un poco hacia abajo, se puede ver que a pesar de que ya no hay contenido en la barra lateral, Todavía está preservando su altura y todo el resto del contenido sigue desplazado hacia la izquierda. Eso es lo que llamamos el trazado del Santo Grial. Por lo que aprenderemos a hacer eso con Flexbox usando solo unas tres o cuatro líneas de código CSS. Ahora, echemos un vistazo a los archivos de inicio de nuestro proyecto. Tengo la carpeta del proyecto ubicada aquí en mi escritorio. Entonces si lo abro, puedes ver que tenemos nuestro archivo HTML llamado index, y tenemos nuestro archivo style.css aquí en esta carpeta. Y también tenemos todas nuestras imágenes ubicadas aquí en esta carpeta de imágenes. Y tenemos una carpeta JS. Y dentro de eso tenemos la biblioteca jQuery y un archivo llamado main.js. Entonces si abrimos esos archivos en nuestro editor de código, aquí está nuestro archivo index.html. Se puede ver igual que la sección de menús, tiene algo de HTML básico. Tiene el título aquí, luego las Fuentes de Google, y luego la biblioteca Font Awesome. Y luego finalmente, nuestra hoja de estilo. Debajo de eso, hemos incluido la biblioteca jQuery y el archivo main.js antes del cierre de la etiqueta body. Y por supuesto, nuestra hoja de estilo aquí mismo está vacía. Entonces empezaremos todo desde cero. Así que asegúrate de descargar los archivos de inicio, enciende tu editor de código. Y te veré en la próxima conferencia donde estaremos construyendo el diseño del Santo Grial de nuestro proyecto usando, lo adivinaste, Flexbox. 19. 19 construir el diseño de holygrail: Hola a todos. En esta lección, vamos a construir el trazado del Santo Grial de nuestro proyecto. Entonces, empecemos. Entonces, en primer lugar, iremos justo aquí después la etiqueta body y agregaremos un div y le daremos una clase de envoltura exterior. Ahora este será el contenedor exterior que contendrá todas las secciones dentro de nuestra página. Y dentro de eso vamos a agregar un encabezado y darle una clase de encabezado de sitio. Y dentro de ella vamos a añadir una etiqueta H1 y darle una clase de título de sitio. Y sólo diremos cabecera. Y debajo de ese encabezado agregaremos un div con una clase de área de contenido. Por lo que este será el contenedor que contenga nuestra área de contenido principal, así como nuestra barra lateral. Y dentro de ella agregaremos una etiqueta principal y le daremos una clase de área de contenido principal. Esta etiqueta principal contendrá nuestros artículos y así sucesivamente. Y luego una etiqueta H1 y decir por ejemplo, el contenido principal va aquí. Y después de eso vamos a añadir algún contenido temporal aquí mismo dentro de algunas etiquetas p. Y luego debajo de esta etiqueta principal, vamos a agregar un div y darle una clase de barra lateral, ¿verdad? Y dentro de ella vamos a sumar H1 y decir barra lateral va aquí. Y debajo de esto añadiremos algún contenido ficticio para fines de visualización dentro de una etiqueta p. Muy bien, vamos a añadir nuestro pie de página. Entonces voy a seguir adelante y agregar una etiqueta de pie de página y darle una clase de pie de sitio. Y dentro de ella vamos a añadir H1 y sólo decir pie de página. De acuerdo, veamos esto en nuestro navegador. Entonces aquí está el encabezado en la parte superior, y luego el contenido principal justo aquí, la barra lateral debajo de ella, y el pie de página en la parte inferior. Pero ahora agreguemos un poco de estilo para que podamos verlos mejor. Volver a nuestro CSS. Pagaré algunos estilos y te los explicaré. Por lo que hay algunos estilos de base. He anidado el cuerpo, los botones, las entradas, y las áreas de texto, y luego acabo de agregar algunos estilos básicos. Se puede ver el color es negro. El font-family es nuestra fuente. El tamaño de fuente es de 16 píxeles y la altura de línea está establecida en 1.8. Y debajo de eso, he añadido algunos estilos al cuerpo. Se puede ver he añadido este bonito color gris, tiene un color de fondo. Establezca el margen en 0 y, a continuación, establezca la familia de fuentes en nuestra fuente. Ahora haz eso, vamos a apuntar al encabezado y al pie de página. Agrega color de fondo verde y altura 100 píxeles por ahora. Después vamos a apuntar a la barra lateral y añadir color de fondo azul y color blanco. Y luego debajo de eso apuntaremos a la etiqueta H1 y pondremos el color en rojo. Y pondremos el margen en 0. Entonces también, apuntaré a la etiqueta p y le daré un margen de 0. Echemos un vistazo. Ya puedes ver que se ve más bonito ahora. Muy bien, entonces en pantallas anchas queremos que una barra lateral sea una columna en el lado derecho, aquí mismo. Entonces lo que podemos hacer es hacer que el contenedor que sostiene tanto el área de contenido principal como la barra lateral, un contenedor flex. Por lo que de vuelta a nuestro HTML, se puede ver que el div con la clase de área de contenido es el que queremos. Entonces vayamos a nuestro CSS, creemos un nuevo rol cuando el ancho de pantalla sea mayor a 1, 0, 0, 0, 0, 120 píxeles. Y voy a apuntar al área de contenido y establecer su propiedad de visualización en flex. Y así, tenemos el área de contenido principal a la izquierda y nuestra barra lateral a la derecha. Y cuando encogemos nuestro navegador, se ve cuando voy por debajo de ciento, ciento veinte píxeles, la barra lateral está cayendo por debajo del área de contenido principal. Y si miras aquí, puedes ver que la barra lateral y el área de contenido principal tienen la misma altura incluso cuando el contenido es diferente. Y de eso se trata exactamente el Santo Grial. Está bien, ahora, vamos, sigamos trabajando. Se puede ver la barra lateral aquí está ocupando demasiado espacio, así que quiero disminuir un poco su ancho. Recuerda que al definir el contenedor flex, ahora la barra lateral es un elemento flex y podemos usar propiedades flexbox en él. Entonces vamos a nuestro CSS y apuntemos a nuestra barra lateral. Y dijo Es propiedad flex a 0, lo que significa que no crecerá. Entonces 0 lo que significa que no se encogerá por debajo de un ancho específico, que es de 320 píxeles. Y ahora ves que se ve mejor. Y esto es todo para esta lección, hemos construido nuestro diseño del Santo Grial, y ahora estamos listos para construir cada sección de nuestra página de forma individual, pero lo haremos a continuación. 20. 20 construir nuestro encabezado utilizando flexbox: Hola a todos. En esta lección vamos a construir y darle estilo a nuestro encabezado. Entonces como siempre, empecemos. Muy bien, así que volvamos a nuestro HTML. Aquí dentro de la etiqueta de encabezado, añadiré un div y le daré una clase de sitio Info. Entonces voy a mover la etiqueta H1 dentro de ella. Y debajo de ella vamos a agregar una etiqueta de párrafo con una clase de descripción del sitio. Y vamos a añadir la descripción de nuestro sitio aquí. Y debajo del sitio info div, vamos a añadir nuestro menú. Por lo que vamos a añadir una etiqueta de nav con una clase de menú principal. Y sólo diremos que el menú iría aquí por ahora. De acuerdo, veamos esto en el navegador. Muy bien, Sigamos trabajando de nuevo a nuestro CSS. Entonces aquí entre nuestros comentarios, comenzaremos a peinar el encabezado. Por lo que apuntaré al encabezado del sitio y estableceré su altura en 400 píxeles. Veamos esto. Ahora puedes ver tenemos el div con la clase de información del sitio que contiene el encabezado del sitio y la descripción del sitio. Y debajo de ella tenemos el div con la clase de menú principal sosteniendo nuestro menú. Muy bien, ahora queremos que nuestro menú sea empujado hasta el final del contenedor aquí mismo. Podemos hacer esto fácilmente usando flexbox. Podemos hacer del contenedor un contenedor flex y luego establecer el flujo flex a columna para que los elementos se queden por debajo uno del otro y su altura dependerá del contenido. Y luego establece el crecimiento flex de la información del sitio en solo uno. Que se expande verticalmente y ocupa todo el espacio, empujándolos en ti todo el camino hasta el final del contenedor. Entonces vayamos a nuestro CSS y hagamos eso. Vendré aquí y agregaré display flex, luego columna de flujo flex. Entonces voy a apuntar el sitio info div y establecer flex grow a uno. Te acuerdas que cuando agrego flex grow uno a un elemento flex individual solo y no a los demás. Esto hará que ocupe todo el espacio restante del contenedor. Por lo que el sitio info div crecerá verticalmente, empujando el menú hasta el final del contenedor. Y así, se puede ver que el menú va todo el camino hasta el final del contenedor. Ahora, sigamos trabajando. Diseñaremos nuestro proyecto en un primer enfoque móvil, lo que significa que lo diseñaremos como lo estamos viendo en un dispositivo móvil. Y luego crearemos consultas de medios y agregaremos los cambios que queremos en pantallas más amplias. Por lo que apuntaré el título del sitio aquí y añadiré algunos estilos. Voy a agregar margen 0, tamaño de fuente a em. Peso de fuente 300, texto alineado centro. Color, blanco. Y el texto se transforma en mayúsculas. puede ver que se ve más bonito. Ahora, de vuelta a nuestro CSS. Nos apuntaremos a la descripción del sitio y agregaremos texto alinear centro, luego cambiaremos su color a este bonito color amarillo. Y tamaño de fuente 1.2 M. Luego margen superior menos 0.8, para que se vuelva más apretado. Entonces tipo-estilo cursiva. Y se puede ver que se ve mejor. Sigamos adelante. Voy a apuntar a nuestro menú. Después agrega un poco de relleno. Una EM de arriba e abajo, y una E M de izquierda y la derecha también. Entonces le añadiré color negro, luego fondo color nuestro amarillo tiene razón. Ahora queremos que el título del sitio sea más grande en pantallas más anchas. Por lo que volver a nuestro CSS. Crearé un nuevo rol para pantallas anchas. Entonces apuntaré el título del sitio y estableceré el tamaño de fuente en cuatro. Se puede ver que ahora es más grande. Y cuando vaya a pantallas más pequeñas, será más pequeña. Ahora, queremos centrar nuestro título de sitio y una descripción de sitio verticalmente. Podemos hacer esto usando muchas cosas diferentes, pero usaremos Flexbox. Se puede ver tanto el título como la descripción están contenidos con el sitio info div. Por lo que podemos mostrar la información del sitio como un contenedor flex y hacer la columna flex flow y luego centrar el contenido usando la propiedad justify content. Entonces si voy a mi CSS y apunto al sitio info div, configuro su propiedad de visualización, las banderas, luego columna de flujo flex, y luego justifico el centro de contenidos. Y ahora se puede ver que está centrado perfectamente. Y recuerda, justificar el contenido es una propiedad de eje principal. Y el eje principal aquí es vertical porque el flujo flex es columna. Ahora vamos a nuestro CSS y cambiemos el fondo verde a negro para que coincida con nuestro diseño. Ahora, revisemos aquí lo que hemos hecho con Flexbox. En primer lugar, el menú y el sitio Info divs están contenidos en un div externo con una clase de encabezado de sitio. Visualizamos este encabezado de sitio como un flex y lo convertimos en una columna. Por lo que los elementos se apilan uno debajo del otro. Después configuramos el flex grow de la info del sitio en uno para que se expanda y ocupe el espacio restante del contenedor. Entonces necesitábamos centrar el contenido dentro de ella verticalmente. Por lo que lo hicimos un contenedor flex y dijimos Es flex flow a column y luego centramos su contenido usando justify content center. Y eso es todo. Terminamos nuestro encabezado excepto nuestro menú. Eso lo terminaremos más tarde. Pero por ahora, esto es todo para esta lección y seguiremos explorando lo que flexbox puede hacer por nosotros en los próximos videos. 21. 21 construir y diseñar nuestra sección de publicaciones: Hola a todos. En esta lección comenzaremos a trabajar en la sección de correos. Entonces, empecemos. Muy bien, entonces empezaremos por eliminar este contenido ficticio. Sólo lo necesitábamos para probar las cosas. Y entonces comenzaré agregando una sección y dándole una clase de posts. Y dentro de ella, agregaré un artículo y le daré dos clases, post y post la mitad. Por lo que el post de clase medio significa que este artículo tomará la mitad del espacio de nuestra área principal. Muy bien, ahora vamos a añadir una etiqueta de ancla. Y dentro de ella agregaremos un div. Y pondremos nuestra imagen dentro de este div. Por lo que añadiré nuestra primera imagen aquí mismo. Y debajo de la imagen div, vamos a añadir otro div con una clase de contenido post. Y dentro de eso vamos a añadir una etiqueta H2. Por lo que este será el título del puesto. Entonces debajo de ella agregaremos una etiqueta p y agregaremos algún texto Lorem dentro de ella. Veamos esto. Se puede ver que tenemos nuestra imagen, luego nuestro título, y luego el contenido. De acuerdo, Sigamos agregando nuestros posts de nuevo a nuestro HTML. Voy a copiar este artículo, pegarlo de nuevo, y sólo vamos a cambiar la imagen y el texto alt justo aquí, luego cambiar también el título. Ahora estos dos posts ocuparán la mitad del espacio del área de contenido principal. Vamos a hacer eso usando mensajes tienen clase aquí mismo. Y esta post-clase se encargará de los estilos generales de todos los puestos. Muy bien, debajo de eso, volveremos a pegar nuestro artículo tres veces. Y vamos a cambiar la clase de puestos, hay que publicar 1 tercio para estos tres artículos. Y también cambiaremos las imágenes y los títulos. Por lo que ahora puedes ver tenemos nuestros tres artículos con una clase de post 1 tercio a cada uno. Y esta clase se encargará de hacer que cada uno de estos artículos tenga un ancho de alrededor del 30 por ciento del área de contenido principal. Por lo que los tres artículos se sentarán uno al lado del otro y se alinearán. Ahora agreguemos nuestro último artículo. Voy a pegar el artículo una última vez y cambiado post para publicar completo. También cambiaré la imagen, el texto alt, y el título. De acuerdo, entonces este artículo será de ancho completo. Ocupará todo el ancho del área de contenido principal. Vayamos a nuestro navegador y veamos esos artículos. Ya puedes ver que ya tenemos todos nuestros artículos. Entonces empecemos a peinar. Estamos de vuelta a nuestro CSS. Y aquí mismo entre nuestros comentarios, nos dirigiremos a nuestro área de contenido principal y agregaremos relleno a EM. Y ahora puedes ver que tenemos un poco de espacio. Añadamos los estilos generales para nuestros posts. Voy a apuntar post-clase y establecer el color de fondo en blanco y añadir margen inferior uno, m. Así podemos tener algunos espacios entre los artículos. Después nos apuntaremos a la etiqueta de anclaje dentro nuestros postes y agregaremos color negro para quitar este color azul. Y decoración de texto, ninguno para quitar la línea debajo del texto. El texto se ve mucho mejor ahora, pero queremos algunos espacios aquí mismo. Para ello, apuntaré a la clase de contenido post y agregaré relleno 0 a la parte superior, 40 píxeles a la derecha y a la izquierda, y 20 píxeles a la parte inferior. Ya puedes ver que se ve mejor ahora. Está bien, así que vamos a darle estilo al encabezado de la publicación. Voy a apuntar al encabezado de nuestro post y añadir color de fondo, nuestro amarillo. Después cambia el color a negro. Después relleno 20 píxeles para que tengamos algo de espaciado y alineación de texto centro. Se puede ver que se ve bien. Pero queremos que este fondo amarillo ocupe todo el ancho del post content div se ve así por el relleno de 40 píxeles a la derecha y a la izquierda del div contenido post. Por lo que para que el fondo amarillo ocupe todo el ancho, podemos agregar un margen de menos 40 píxeles al H2. Por lo que volver a nuestro CSS. Añadiré margen 0 en la parte superior menos 40 píxeles a la derecha y a la izquierda, y 30 píxeles en la parte inferior para tener un poco de espacio entre ella, la etiqueta p. Y ahora puedes ver que está ocupando todo el ancho. Ahora ya casi terminamos. lo único que queda es hacer que la imagen del artículo retome este ancho completo. Por lo que volver a nuestro CSS. Subiré aquí por debajo de nuestros estilos base, y apuntaré a todas las imágenes y lo mostraré como elementos de bloque. Establece su ancho al 100%. Por lo que tomará todo el ancho y establecerá su altura en auto. Y ahora nuestras imágenes están ocupando todo el ancho del contenedor. Tenemos nuestros posts buscando exactamente como queremos. Lo único que queda es controlarlos usando Flexbox. Y lo haremos en la siguiente lección. 22. 22 agregar flexbox a nuestras publicaciones: Hola a todos. En esta lección, seguiremos trabajando en nuestra sección de publicaciones y controlaremos su diseño usando Flexbox. Entonces, empecemos. Muy bien, entonces así es como salimos de nuestra sección Posts. Se puede ver que cada publicación está ocupando el 100% del ancho. Y esto es lo que queremos en los dispositivos móviles. Por ejemplo, si encojo mi navegador, se puede ver que esto se ve muy bien en dispositivos móviles. Ahora somos lo que queremos hacer en pantallas de tamaño mediano y agrandar pantallas de signos es en pantallas medianas o tabletas. Queremos que cada publicación utilice la mitad del espacio del área de contenido principal para que podamos tener dos posts uno al lado del otro. Y en pantallas grandes queremos que los dos primeros posts estén en la primera fila, luego los siguientes tres posts estén en la segunda fila. Y luego el último post para retomar todo el ancho de la tercera fila. Genial, así que volvamos a nuestro CSS y hagamos eso. En primer lugar, crearé un nuevo rol para dispositivos de pantalla de tamaño mediano. Y dentro de ella, apuntaré a la sección de correos, que contiene todos nuestros posts. Y estableceré su propiedad de display en flex. Por lo que todos los posts se mostrarán de lado a lado. Y luego agrega flex wrap rat para que los postes se envuelvan a la siguiente línea. Si no tienen espacio libre. Entonces apuntaré a todos los mensajes y luego añadiré base flex 49%. Se puede ver que ahora tenemos dos puestos en cada línea. Y debido a que puse la base flex en 49 por ciento, se puede ver que tenemos espacio vacío aquí mismo, que es el 2% de las principales áreas de contenido con. Ahora, queremos mover este espacio restante y ponerlo entre los puestos. Entonces volvamos a nuestro CSS y vayamos a publicaciones y añadamos justificar el espacio de contenido entre. Y se puede ver ahora que el espacio restante está justo aquí entre los postes que al final del contenedor ya. Y este es el layout que queremos en pantallas medianas. Ahora, sigamos trabajando para llegar al layout que queremos en pantallas más anchas. Volver a nuestro CSS. Agregaremos un nuevo papel para pantallas más amplias. Y vamos a apuntar a los puestos con la clase de posguerra 1 tercio, y añadir base flex 32 por ciento. Después vamos a apuntar a los puestos con una clase de post medio y añadir base flex 49%. Y por último, vamos a apuntar a los puestos con la clase de jestuosa dicha base flex al 100%. Y así, tenemos nuestros posts dispuestos de la manera que queremos en pantallas más grandes. Y si encogemos nuestro navegador, el diseño cambiará en pantallas medianas y luego en dispositivos móviles. Y ahora hemos terminado nuestra sección de post y seguiremos trabajando en la siguiente lección. 23. 23 construir y diseñar la sección de relojes: Hola a todos. En esta lección comenzaremos a construir nuestra sección de reloj hoy. Entonces empecemos. Muy bien, entonces empezaremos justo aquí después de la sección de correos. Agregaremos una nueva sección con una clase de reloj. Y dentro de esa sección, vamos a sumar H2 con una clase de encabezado de sección. Y diremos que vigilen hoy. Y por debajo de eso vamos a añadir un div con una clase de tarjeta de reloj. Y dentro de ella vamos a añadir otro div que contendrá imagen de la tarjeta y le dará una clase de imagen de reloj. Y pondremos nuestra imagen dentro de ese div. Y debajo de eso agregaremos otro div con una clase de contenido de reloj. Y este div contendrá todos los textos se sumarán. Entonces dentro de ese div, vamos a añadir una etiqueta H2. Y luego debajo de eso, vamos a añadir otro div con una clase de información de películas. Por lo que este div contendrá toda la información de nuestra película, como el runtime de la película, el año en que fue estrenada, su categoría o un género, y así sucesivamente. Ahora, vamos a añadir cinco tramos dentro de ese div. Y después de nuestro reloj contenido div, vamos a añadir una etiqueta p y darle una clase de historia de cine. Y luego agregaremos algún texto ficticio. Y luego debajo de esa etiqueta p, vamos a añadir una etiqueta ancla y sólo decir leer más. Y luego copiaremos esta tarjeta de reloj div, pegaremos de nuevo, luego cambiaremos la imagen. Y si vamos a nuestro navegador, aquí tenemos nuestras dos tarjetas. A continuación, vamos a marcarlos en nuestro CSS. Iré aquí mismo entre los comentarios. Y apuntaré al encabezado de sección al principio. Después agrega color negro, tamaño de fuente tres, VM, por lo que es más grande y más bonito. Y luego el texto alinear centro. Y se puede ver que está mucho mejor ahora, Sigamos trabajando. Apuntaré a la tarjeta de reloj div y le daré un margen de 1 e m para que podamos tener un poco de espaciado debajo de nuestras tarjetas. Después nos dirigimos a nuestro div contenido de reloj y agregaremos color de fondo negro. Entonces color blanco. Y relleno tres VM. Se puede ver que nos estamos acercando aquí. Entonces vamos a apuntar a la edad para establecer su tamaño de fuente a, para comer em. Y es font-weight a 300. Y vamos a sumar margen 0 y transformación de texto para capitalizar. Sigamos adelante. Apuntaré a la clase de información de cine y pondré su peso de fuente en negrita. Entonces nos apuntaremos a los tramos dentro de ella y agregaremos relleno, ¿verdad? 1.5. También vamos a apuntar a las etiquetas p con la clase de historia de cine. Y vamos a sumar margen un EM en la parte superior e inferior. Ahora agreguemos la etiqueta ancla y cambiemos su color a blanco. Y luego dijo que es font-weight a audaz. Y ahora tenemos nuestra tarjeta de reloj luciendo genial para dispositivos móviles. En la siguiente lección, aprenderemos cómo cambiarlo en pantallas más anchas usando Flexbox. Entonces nos vemos. 24. 24 agregar flexbox: Hola a todos. Después de crear y peinar nuestra sección de reloj hoy para dispositivos móviles en la última lección. En este, vamos a hacer que se vea bien para pantallas más anchas. Y lo haremos usando flexbox. Entonces, empecemos. De acuerdo, entonces lo que queremos hacer aquí es que la imagen se siente a la izquierda y el contenido esté a la derecha. Suficientemente fácil. E hicimos algo muy parecido antes mientras estábamos construyendo el trazado del Santo Grial. Recordarás que flotamos el área de contenido principal a la izquierda y una barra lateral a la derecha. Entonces hagámoslo. Crearemos nuevas reglas para pantallas medianas y grandes. El diseño funcionará bien tanto para los tamaños de pantalla mediano como grande. Y dentro de esta consulta de medios, vamos a apuntar a la div de la tarjeta de reloj, establecer su propiedad de display en flex. Y así, se puede ver la imagen ahora está a la izquierda y el contenido está a la derecha. Pero ahora queremos centrar este contenido verticalmente. Entonces vamos a nuestro CSS y apuntemos al div contenido de reloj, que contiene todo el contenido. Y luego agregaremos pantalla, flex y columna de flujo flex. Y entonces por supuesto, justificar contenido Centro. Se puede ver que el contenido está perfectamente centrado ahora. Ahora todo se ve genial. Pero queremos cambiar el orden de esta imagen y ponerla en el lado derecho del contenedor. Podemos hacer esto con la propiedad de pedido. Entonces si voy a mi HTML y agrego una clase de tasa de imagen a la imagen quiero poner a la derecha. Y luego ve a mi CSS y apunta a esta imagen, imagen clase derecha y establece su propiedad de orden en dos para que venga después del contenido. Recuerda, todos los elementos flex tienen orden 0 por defecto. Por lo que cualquier elemento que tome orden mayor a 0 se mostrará al final de la línea. Y se puede ver la imagen ahora se muestra a la derecha. Y ahora hemos terminado la sección de relojes. Seguiremos trabajando en los próximos videos. 25. 25 construir y diseñar la sección de descarga: Hola a todos. En esta lección comenzaremos a construir la sección de descarga ahora. Será divertido. Entonces, empecemos. Empezaremos justo aquí debajo de la sección de relojes y agregaremos una nueva sección con una clase de descarga. Y dentro de esa sección, añadiremos una etiqueta H2 con una clase de encabezado de sección. Y diremos descarga ahora. Y luego debajo de eso, agregaremos un div con una clase de tarjeta de descarga. Y dentro de ese div, vamos a añadir otro div con una clase de imagen de descarga. Este div contenedor imagen y dentro de ella agregará esa imagen. Y debajo de esta descarga imagen div, vamos a añadir otro div con una clase de contenido de descarga. Por supuesto, esto contendrá todo el contenido de esta sección. Y dentro de eso, vamos a añadir una etiqueta de ancla. Y dentro de esta etiqueta ancla, vamos a añadir un lapso y sólo decir descarga. Y luego vamos a añadir el icono Font Awesome debajo de eso. Y debajo de esta etiqueta ancla, vamos a añadir un div con una clase de información de descarga. Y dentro de eso, otro div con una clase de género de descargas. Y dentro de ese género de descarga div, vamos a agregar etiquetas h4 y simplemente decir género. Y debajo de esto, vamos a añadir una etiqueta p y añadir las categorías para nuestra serie. Y por debajo de la clase de género de descarga, vamos a añadir otro div con una clase de reparto de descargas. Por lo que este div contendrá imágenes del elenco que estaba en la serie. Y dentro de ella, vamos a sumar un H4 y sólo decir elenco. Después añadiremos algunas imágenes para el elenco de la serie. Y luego finalmente, debajo del div con una clase de info de descarga, vamos a añadir otro div con la clase de calificación de descarga. Y dentro de ella, vamos a sumar cuatro tramos. El primero tendremos una clase de tarifa y diremos 8.7. Entonces vamos a sumar una segunda y decir cien, doscientas calificaciones. Y por último, el último. Y diremos seis temporadas. Entonces veamos cómo se verá esto en nuestro navegador. Se puede ver que esto no se ve bien. Entonces volvamos a nuestro CSS y empecemos a peinar esto. Iré aquí mismo entre los comentarios y empezaré por apuntar el div de la tarjeta de descarga y agregar margen inferior uno EM para conseguir un poco de espaciado. Y luego después de eso, apuntaremos al div contenido de descarga y estableceremos su color de fondo en blanco. Y luego apuntaremos al ancla dentro de ella y colocaremos su color de fondo en negro. Después haz su color blanco. Y agrega un relleno de un EM de arriba e abajo y dos VM de izquierda y derecha. Entonces diremos la decoración del texto ninguno y el texto transformar capitalizar. Ya puedes ver ya tenemos nuestro div contenido de descarga con fondo color blanco. Y este ancla de aquí tiene un fondo negro. Pero hagamos que este ícono sea más grande. Volver a mi CSS. Voy a apuntar al icono dentro de la etiqueta de anclaje y establecer su tamaño de fuente en 2.5 EM. Para que veas que es más grande. Ahora, sigamos adelante. Añadamos algo de relleno aquí a la clase de información de descarga. Por lo que volvamos a nuestro CSS. Voy a apuntar a la clase de información de descarga y agregar relleno 1 e m de arriba e abajo, y luego a EM de izquierda y derecha. A continuación, hagamos que estas imágenes sean más pequeñas porque se ven raras en este momento. Por lo que apuntaré a las imágenes dentro del div cast de descarga y estableceré la altura en 60 píxeles. Entonces su ancho también a 60 píxeles. Y luego agrega un radio de frontera del 50 por ciento para que se convierta en una imagen circular. Ya puedes ver que en general las secciones se ven más limpias. De acuerdo, vamos a agregar algunos estilos a esta descarga leyendo div, tragar, volver a mi CSS y apuntar a este div y color de fondo, nuestro color amarillo. Después agrega relleno, un EM de arriba e abajo, y dos EM de izquierda y derecha. Después agrega color negro y font-size 00.9 AM. Ahora, vamos a apuntar a este lapso. Te acuerdas que tiene una clase de tarifa. Por lo que volveré a mi CSS y apuntaré a este lapso y agregaré font-size, 2.5 mm. Peso fuente, negrita, y margen, inferior menos 0.25 EM. Volver a nuestro CSS. Iré aquí abajo el selector de clases de info de descarga. Y seleccionaré el H4 y agregaré el margen 0. Entonces añadiré la etiqueta p y añadiré el margen 0 también. Y tamaño de fuente 0.9 EBM. Y terminamos el estilo de esta sección. Y en la siguiente lección comenzaremos a agregar nuestro flexbox para que se vea como queremos. Entonces nos vemos. 26. 26 agregar flexbox: Hola a todos. En esta lección, vamos a cambiar el diseño de la sección de descargas usando Flexbox. Entonces, empecemos. Muy bien, para que puedan ver aquí tenemos nuestra sección, y contiene dos dibs mayores. El primer div, que contiene la imagen y tiene una clase de imagen de descarga. Y el segundo, que contiene todo este contenido y tiene una clase de contenido de descarga. Si encojo mi navegador hasta llegar al tamaño de la pantalla del móvil y voy a mi demo aquí mismo. Se puede ver que tenemos nuestra imagen ocupando todo el ancho. Y debajo de ella tenemos el contenido de descarga div. Y se puede ver la etiqueta de anclaje aquí está ocupando el ancho completo. Y debajo de ella, esta descarga info div también está ocupando todo el ancho y las imágenes se muestran horizontalmente. Además, la sección de lectura se ve bonita. Entonces vayamos a nuestro CSS y cambiemos un poco nuestro diseño. Seleccionaré el contenido de descarga div, que contiene la etiqueta ancla, la info div, y la calificación div. Y voy a decir display flex. Recuerda queremos que se apilen uno por debajo del otro y los dispositivos móviles. Por lo que estableceré flex flow a columna. Y ahora se puede ver que la etiqueta de anclaje aquí está ocupando todo el ancho. Esto se debe a que stretch es el valor predeterminado para la propiedad align items. Y recordarás que los elementos de alineación funcionan a lo largo del eje transversal, que es horizontal en este caso, porque el flujo de flujo se establece en la columna. Entonces, por ejemplo, si vuelvo a mi CSS y agrego elementos de alineación, inicio flex. Se puede ver que los elementos dentro del div contenido de descarga están alineados con el inicio del contenedor. Muy bien, Quitemos esta línea. Y sigamos adelante. Queremos que el contenido dentro de esta etiqueta ancla se sienta uno debajo del otro. Recuerda, dentro de esta etiqueta ancla, tenemos un lapso que contiene esta palabra de descarga. Y entonces tenemos un ícono debajo de eso. que podamos volver a nuestro CSS, luego apuntar a la etiqueta de anclaje, y establecer display en flex. Después flexiona la columna de flujo para que los elementos se sientan uno debajo del otro. Y luego justificar el centro de contenidos para asegurarse de que los elementos siempre estarán centrados verticalmente aunque cambie la altura. Y entonces sólo vamos a agregar texto, alinear centro. Y ahora la etiqueta de ancla está mirando como queremos. A continuación, queremos que este div con la clase de género de descargas y este div con una clase de cast de descarga se muestre como contenedores flex para que el contenido se muestre horizontalmente, no verticalmente. Por lo que volvamos a nuestro CSS. Nos centraremos en el género de descarga y descargaremos cast divs. Y estableceremos la propiedad display en flex y dicho flex wrap para envolver para asegurarnos de que los elementos se envolverán a la siguiente línea si no tienen espacio. Y se puede ver ahora el contenido dentro de cada uno de ellos se muestra horizontalmente con esta palabra aquí mismo no se centra verticalmente. Por lo que volvamos a nuestro CSS. Añadiré un centro de líneas de artículos. Y puedes ver ahora están centrados perfectamente a lo largo del eje transversal, que aquí es vertical porque el flujo flex es rho por defecto. A continuación, pasemos a la calificación de descargas. Simplemente queremos que se vea como la etiqueta de anclaje allá arriba, lo que significa que queremos que todos los tramos dentro de ella se muestren uno debajo del otro y se centren. Para que podamos volver a nuestro CSS. Y luego aquí mismo al lado de la etiqueta de anclaje, agregaremos el selectivo para la sección de clasificación de descargas. Y así, lo tenemos de la manera que queremos. Siguiente. También queremos agregar un poco de espaciado aquí mismo. Por lo que volvamos a nuestro CSS. Voy a apuntar al H.264 que está dentro de la sección de información de descarga. Y sumaré base flex 20 por ciento. Y ahora puedes ver que hay espacio aquí mismo, que se verá bien en los dispositivos móviles. A continuación, quiero agregar un poco de margen aquí mismo. Por lo que volvamos a nuestro CSS. Nos dirigiremos a las descargas género div, y agregaremos margen inferior, desde diez píxeles. Y ahora se ve mejor. Por lo que ahora esto se ve genial para dispositivos móviles. Pero en tabletas en pantallas anchas, queremos que la etiqueta de anclaje, la sección de información de descarga, y la sección de lectura de descargas se muestren lado a lado. Esto se puede hacer súper fácilmente usando flexbox. Sólo tendremos que apuntar a su contenedor, que es el div de contenido de descarga, y establecer su propiedad de display en flex. Entonces hagámoslo. Volver a nuestro CSS. Haré una nueva regla para pantallas medianas y grandes. A continuación, apunte al contenedor de contenido de descarga y diga display flex. Ahora se muestran uno al lado del otro horizontalmente. Pero hay un problema. Tenemos algo de espacio vacío aquí mismo. Por lo que necesitamos distribuir este espacio vacío entre los tres elementos. Te acuerdas que podemos hacer eso usando la propiedad flex grow. Por ejemplo, si configuro la propiedad flex grow para cada uno de ellos en una, entonces este espacio libre se distribuirá por igual entre ellos. Pero lo que haré aquí es establecer la propiedad flex grow para el ancla y la sección de calificación de descarga 2, 1, y establecerla en dos para la sección de información de descarga. De esa manera, ocupará el doble del espacio a la voluntad de los otros dos, porque tiene más contenido. Por lo que volvamos a nuestro CSS. Voy a apuntar la etiqueta de anclaje y la calificación de descarga y establecer flex crecer a uno. Entonces voy a apuntar a la descarga info div y dicho flex crecer a dos. Y ahora se puede ver que esta sección se ve muy bien. Y si encojo mi navegador, puedes ver que es totalmente sensible en todos los dispositivos. Si alguna vez intentas alcanzar este tipo de maquetación sin Flexbox, te resultará muy difícil. Pero con Flexbox, todo es mucho más fácil. Entonces esto es todo para esta lección, todos, y los veré en la siguiente. 27. 27 construir nuestra galería con la disposición de cantada horizontal utilizando flexbox: Hola a todos. En esta lección, estaremos construyendo nuestra galería. Entonces, empecemos. Muy bien, todos, empezaré por ir aquí después de la sección de descargas y añadir una nueva sección con una clase de galería. Y dentro de ella, sumaré un H2 y le daré una clase de cabecera de sección. Y diremos galería de películas. Y debajo de eso, añadiré un div con la clase de imágenes de galería. Y dentro de ese div, estaremos agregando los divs que contienen nuestras imágenes. Entonces primero, añadiré un nuevo div con una clase de imagen de galería. Y dentro de eso, voy a añadir una etiqueta de ancla. Entonces estaremos agregando nuestra imagen dentro de la etiqueta de anclaje. Si voy a mi navegador y veo esto, puedes ver que tenemos nuestra imagen aquí mismo. Ahora de vuelta a nuestro HTML. Voy a pausar la grabación y copiar este div con la clase de imagen de galería diez veces y cambiar las imágenes. Muy bien, entonces estamos de vuelta. He añadido 10 divs con nuevas imágenes. Entonces si voy a mi navegador, puedes ver que están sentados uno debajo del otro justo aquí. Ahora, vamos a nuestro CSS. Voy a apuntar a las imágenes de la galería div, que contiene todos los divs internos. Y estableceré su propiedad de display en flex. Ya puedes ver todos los divs de imágenes de galería que contienen las imágenes mostradas horizontalmente en una línea. Volvamos a nuestro CSS debajo de este flex de pantalla y dicho flex, envolver para envolver. Y además apuntemos a los divs con la clase de imagen de galería y agreguemos altura 250 píxeles para que todos los divs tengan la misma altura. Ya puedes ver las imágenes se vuelven a mostrar una debajo de la otra, y todos tenemos la misma altura de 250 píxeles. Volvamos a nuestro CSS. A continuación, queremos agregar algunas propiedades de base flex aleatoria, divs que contienen nuestras imágenes. De esa manera cada div tendrá un ancho diferente al de los demás, como el layout que queremos. Ahora podemos hacer eso de dos maneras. En primer lugar, podemos simplemente agregar una clase única para cada div y luego apuntar esas clases individualmente en nuestro CSS y agregar diferentes propiedades de base flex a cada una de ellas. Pero en nuestro caso, tenemos 10 divs. Por lo que sería muy difícil hacerle esto a cada uno de ellos y no es una solución dinámica. El otro camino es mediante el uso de algunos selectores CSS avanzados. Entonces pegaré algo de código aquí. Y ahora se puede ver que las imágenes tienen valores aleatorios para su propiedad de base flex. Vayamos a nuestro CSS y te explicaré lo que acabo de hacer. Entonces aquí, acabo de seleccionar la galería imagen div. Y en caso de que no sepas lo que hace el enésimo niño, solo acepta números para determinar el elemento específico que deseas. Entonces, por ejemplo, si agrego uno aquí, entonces lo que esto hará es que apunte al primer div que tenga la clase de imagen de galería. Y si agrego cinco, entonces apunta al quinto div con la clase de imagen de galería y así sucesivamente. Pero ¿qué es esto, esto para n más uno? Bueno, en primer lugar, el en letra aquí mismo significa que este proceso de selección se repetirá dinámicamente. Por ejemplo, si solo elimino esto y agrego solo, entonces esto apuntará al primer elemento que tiene la clase de imagen de galería, luego al segundo, luego al tercero, y así sucesivamente. Para que al final, seleccionarán todos los elementos. Pero si lo logramos a n, entonces apuntará al segundo y se sumará a cada vez. Por lo que se seleccionará el segundo, el cuarto , el seis, y el octavo, etcétera. Y si hacemos esto para n, creo que ahora puedes adivinar que seleccionará el elemento número 48 y 12 y así sucesivamente. Pero si lo hacemos para n más uno, entonces éste que agregamos se llama el offset, es el número desde el que empezaremos a contar. Entonces en este caso, seleccionaremos elementos que tengan los números de 159 y demás, en lugar de 4, 8, 12. Entonces por ejemplo, si voy justo aquí al segundo selector y agrego borde cinco píxeles, rojo sólido. Ahora, si miramos este selector, veremos por n, lo que significa que seleccionaremos un nuevo elemento cada cuatro elementos, por ejemplo, para ocho y 12. Pero aquí hay un dos, lo que significa que nuestro offset es dos. Es decir, comenzaremos a seleccionar nuestros elementos desde el segundo elemento. Entonces serán 2, 6, 10, y así sucesivamente. Entonces vayamos a nuestro navegador y recarguemos. Y ahora se puede ver que tenemos el borde rojo alrededor del elemento número 2, luego el número 6, y luego el número diez. Entonces ahora ya sabes cómo agregué los valores dinámicos de base flex. Pero cuando mires aquí mismo, notarás que hay un espacio libre. Podemos aumentar los elementos con para ocupar este espacio libre usando la propiedad flex grow. Por lo que volvamos a nuestro CSS. Eliminemos eso y vayamos aquí mismo dentro del selector de imágenes de galería y establecer flex, crecer a uno. Y ahora se puede ver que los elementos se expanden para tomar el espacio restante. Pero aquí hay un problema. Las imágenes dentro de nuestros divs no están ocupando toda la altura. Esto se puede arreglar fácilmente volviendo a nuestro CSS y apuntando a las imágenes. Después agrega altura 100. Y se puede ver las imágenes están estresadas para ocupar toda la altura de la galería imagen div, pero no se ven muy bien. Ve cómo se ven obligados a caber en el contenedor. Si volvemos a nuestro CSS y agregamos cubierta de ajuste de objeto. Y el problema se ha ido. Las imágenes se ven geniales. Ahora, una cosa nos queda, necesitamos un poco de espaciado entre las imágenes. Por lo que volvamos a nuestro CSS. Iré aquí mismo en nuestra galería imagen div y añadiré un margen de 0 en la parte superior. 0 de la derecha, ocho píxeles de abajo, y ocho píxeles de la izquierda. Y vamos a apuntar al div externo con la clase de imágenes de galería y agregar margen izquierdo menos ocho píxeles. Por lo que tirará del contenedor ocho píxeles a la izquierda y compensará los ocho píxeles que el contenedor fue empujado hacia la derecha. Entonces ahí lo tienes. Un diseño de galería muy avanzado que se ve muy bien y es totalmente receptivo. Si lo veo en diferentes pantallas, se puede ver que es totalmente sensible. Los elementos se están frotando bien cuando no hay suficiente espacio. Porque recuerda, configuramos flex wrap para envolver. Entonces eso es todo para esta lección. Todo el mundo. En la siguiente lección, seguiremos construyendo nuestra galería. Entonces nos vemos. 28. 28 para añadir el plugin de galería: Hola a todos. En esta lección estaremos creando la ventana modal para nuestra galería usando el plugin de JavaScript Lightbox creado por bajo efectivo el auto. Entonces, empecemos. Muy bien, Ahora, si miramos nuestro HTML, se puede ver que nuestras imágenes están envueltas dentro de etiquetas de anclaje. Ahora en la apertura una etiqueta, queremos usar el atributo href para controlar a qué estamos apuntando. Queremos que cada imagen en miniatura se vincule a la versión sin cruzar de esa imagen. Entonces voy a agregar H ref y luego copiar la ruta de la imagen y pegarla aquí. Y ahora si vuelvo a mi navegador y hago clic en esta imagen, puedes verla ahora lleva a la imagen completa. Ahora claramente, esto no es una ventana modal. Ni siquiera hemos enchufado la caja de luz aún. Y lo que está pasando aquí es nuestra página web simplemente nos vincula a una nueva página, o en este caso, a una nueva imagen. Y podemos volver a nuestra página simplemente haciendo clic en el botón Atrás. Volvamos a nuestro HTML. Pasaré por todos los enlaces y añadiré los atributos href para ellos. Entonces voy a pausar la grabación y manejar eso. Y de vuelta. Por lo que ahora tenemos nuestras imágenes y cuando hacemos click en cualquiera de ellas, nos llevará a la versión completa de la imagen. Ahora queremos hacer que la ventana modal surta efecto cuando hacemos click en las imágenes. Entonces vamos a buscar caja de luz abrirá este enlace con ubicación, el nombre del auto. Y luego lo descargaremos. A continuación, extraeremos el archivo zip, lo abriremos y luego abriremos la carpeta dist. Y necesitaremos la carpeta CSS aquí mismo. Entonces voy a copiarlo y pegarlo en nuestra carpeta del proyecto. También necesitaremos la carpeta JavaScript. Entonces voy a abrir la carpeta JS y copiar el archivo de light box dot js. Y luego vuelve a la carpeta del proyecto y abre la carpeta JS y pega el archivo aquí. Y ahora necesitamos incluir este archivo en nuestra página web. Swell, vuelve a mi editor de códigos y ve justo aquí antes de nuestro archivo main.js. Y voy a escribir guión fuente JS, lightbox dot js. Y además vamos a incluir nuestro archivo CSS. Desplazaré hasta la cabeza de nuestra página web. Y vamos a ir justo aquí debajo de las fuentes de Google, y diremos link H ref CSS, lightbox dot CSS. Ahora con el cuadro de luz CSS y archivos JavaScript en su lugar, estamos a un paso de tener un comportamiento modal. Vamos a desplazarnos hacia abajo a nuestras imágenes de galería. Empecemos con la primera imagen. Entonces cuando el elemento a, voy a agregar un nuevo atributo llamado Caja de luz de datos. puedes agregar un valor de cualquier cosa que te guste. Por lo que usaré galería. Ahora cuando hago clic en la primera imagen, se puede ver que se abre en un modal. A continuación, necesitamos aplicar este atributo data-lightbox a todas nuestras imágenes. Hagamos eso. Ahora si volvemos al navegador, recargamos y abrimos cualquier imagen, aparecerá en un modal. Y si presiono el botón de flecha derecha en mi teclado, se puede ver la siguiente imagen se muestra muy bien y así sucesivamente. Y ahora hemos terminado nuestra sección de galerías. Seguiremos trabajando y aprendiendo en las próximas conferencias. 29. 29 construir nuestro mosaico lateral utilizando flexbox: En esta lección, vamos a empezar a agregar contenido a nuestra barra lateral. Entonces, empecemos. Está bien, así que antes que nada, iré aquí mismo dentro del div con la clase de barra lateral. Y eliminaré este contenido ficticio que agregamos antes. Entonces comenzaremos agregando un div con una clase de widget. Y dentro de ella, vamos a añadir otro div con una clase de contenido de widget. Y luego dentro de eso vamos a sumar H3 y sólo decir películas mejor valoradas. Y dentro de eso, vamos a añadir un nav con una clase de menú de barra lateral. Y luego agregaremos UL LI, luego una etiqueta de anclaje dentro de ella. Y diremos El Padrino. Y luego copiaremos ese LI y pegamos un par de veces. Y entonces sólo diremos 12 Hombres enojados y el Caballero Oscuro. Y ahora puedes ver nuestro menú está aquí mismo. Vamos a nuestro CSS y hagamos un poco más. Irá aquí mismo entre los comentarios. Y vamos a apuntar a la barra lateral, ¿verdad? Clase. Y luego le agregaremos relleno a E m. Y luego le agregaremos color negro. Y por debajo de eso vamos a apuntar a la clase widget. Y vamos a añadir color de fondo blanco, y luego margen inferior a EM. Entonces habrá algo de espaciado en la parte inferior cuando agreguemos más widgets. Ya puedes ver que ahora tiene un color de fondo blanco, pero agreguemos algo de relleno aquí. Volver a nuestro CSS. Voy a apuntar al div contenido del widget, y luego agregar relleno de 0.5 EM de arriba e abajo y dos EM de izquierda y derecha. Y luego debajo de eso, apuntaré a la UL del menú de la barra lateral y agregaré lista-style-type, ninguno para que podamos deshacernos de las balas. Y luego el relleno dejó una VM. Por lo que ahora puedes ver el menú se desplaza un poco a la izquierda debido a nuestro relleno. Entonces ahora vamos a darle estilo a los enlaces de nuevo a nuestro CSS. Voy a apuntar a la etiqueta de anclaje dentro del menú de la barra lateral. Y voy a añadir bloque de display. Y luego relleno punto inferior para EN para que podamos conseguir algo de espaciado debajo de ellos. Y luego color negro. Texto, decoración, ninguno. Y font-weight, audaz. Está bien, ya puedes ver que se ve mejor ahora. Por lo que volver a nuestro HTML. Voy a pausar la grabación y copiar este div con una clase de Widget un par de veces. Y cambiaré los contenidos para que podamos obtener más contenido en nuestra barra lateral. De vuelta otra vez. Ahora puedes ver que tenemos más contenido en la barra lateral, y nuestra barra lateral se ve muy bien en pantallas más anchas. Pero si inspecciono algún elemento en la página y redimensiono las ventanas para que nuestra barra lateral se colapse cuando golpeamos el tamaño mediano de la pantalla. Se puede ver que los widgets están tomando todo el ancho de la barra lateral, y esto se verá muy bien en los dispositivos móviles. Por ejemplo, si sigo encogiendo mi navegador hasta que llego al rango de tamaños de pantalla pequeños, puedes ver que los widgets se ven muy bien. Pero cuando volvamos a expandirnos al tamaño mediano, creo que se verá mejor si tenemos dos widgets por fila en pantallas medianas hará que eso suceda al usar Flexbox. Por lo que de vuelta a nuestro CSS, vamos a crear un nuevo rol para pantallas medianas, que tienen un ancho mínimo de 800 diez píxeles y un ancho máximo de cien, ciento veinte píxeles. Y luego apuntaremos a la barra lateral derecha div. A continuación, establezca su propiedad de visualización en flex. Ya puedes ver todos los widgets ahora se muestran uno al lado del otro horizontalmente. Volver a nuestro CSS. Iremos por debajo de display flex y agregaremos flex wrap, wrap. Y ahora los elementos se leen a la siguiente línea. Volver a nuestro CSS. Voy a apuntar al div con la clase de widget y añadir base flex 48.8%. Y ahora solo hay dos widgets por fila. Pero queremos que este 3% de espacio restante aquí esté entre los widgets, no al final del contenedor. Eso es fácil de hacer. Para que a nuestro CSS. Voy a ir justo aquí debajo del flex wrap, rata y añadir justificar el espacio de contenido entre. Y ahora están bien separados. Pero queda una cosa, Vamos a nuestro CSS y desplázate hacia arriba hasta que encontremos la clase derecha de la barra lateral. Y luego cambia el color de fondo azul por el mismo color de fondo del cuerpo. Y ahora nuestra barra lateral se ve muy bien en pantallas medianas. Y si vamos a pantallas más pequeñas, se ve bien, entonces pantallas más grandes se ve muy bien día también. Entonces eso es todo para esta lección, todos. Y te veré en el próximo. 30. 30 construir nuestro menú y nuestro pie de pies: Hola a todos. En esta lección, estaremos agregando el menú a nuestro proyecto. Entonces, empecemos. Muy bien, Entonces estaremos agregando un menú que es muy similar al sencillo menú que creamos en las lecciones anteriores. Simplemente eliminaremos algunos enlaces y cambiaremos los colores. Entonces aquí estoy abriendo el archivo HTML del menú de símbolos que creamos antes. Y copiaré esta URL e iré al archivo HTML del proyecto y lo copiaré aquí mismo en la etiqueta nav con una clase de menú principal. Y entonces solo dejaré tres enlaces y quitaré los demás. Vamos a cambiar el texto del enlace. Entonces diremos reloj, luego descarga, luego galería. Y ahora puedes ver el menú. También tomemos prestados los estilos del archivo CSS del menú simple. Entonces ahora estoy abriendo el archivo CSS y un menú sencillo, y voy a copiar todos los estilos que agregamos antes. Después ve a la carpeta CSS de nuestro proyecto y pega aquí mismo. Entonces eliminaré este menú Selector de encabezamiento porque no tenemos el menú Encabezado. Y luego cambiaré este selector de menús y lo haré menú principal para que los estilos se apliquen a nuestro menú. También cambiaré este selector de navegación única y lo haré menú principal también. De esa forma, los estilos flexbox se aplicarán a nuestro menú. Y luego cambiaremos estos 600 píxeles a 810 píxeles. Y además, eliminemos este color de fondo de la URL porque tenemos nuestro color amarillo aquí arriba. Y luego cambia el color de los eslabones a negro. Después haga su tamaño de fuente 1.1 EM. Y es negrita de peso de fuente. Además, cuando pasamos el mouse sobre él, queremos que el color de fondo sea negro y el color amarillo. Y aquí tenemos nuestro menú luciendo genial. Y cuando pasamos el ratón sobre cualquier enlace, el fondo se vuelve negro y el color cambia a amarillo. Y se ve muy bien en pantallas anchas. Y si lo vemos en dispositivos móviles, se puede ver que los enlaces están muy bien sentados uno debajo del otro. Ahora, nos queda una cosa por hacer, y ese es el pie de página. Simplemente contendrá una simple línea de texto. Entonces vamos a nuestro HTML. Desplázate hacia abajo hasta el pie de página, y solo eliminemos este. Y decir Todos los derechos reservados. Ahmed Sidak Udemy. Ahora vamos a nuestro CSS en busca de pie de página. Después quita este selector de cabecera y esta altura de 100 píxeles y agrega color blanco. A continuación, el texto alinear centro y relleno, 1.5 e m. luego tamaño de fuente 1 punto 2, EM, y negrita de peso fuente. Entonces debajo de eso apuntaremos al encabezado y estableceremos su color de fondo en negro. Y ahora tenemos nuestro pie de página. Y finalmente, por fin, todos, hemos terminado nuestro proyecto. Creo que aprendimos mucho sobre cómo usar flexbox en acción mientras construíamos las diferentes secciones de este proyecto. Espero que te haya gustado y espero que ahora tengas una sólida comprensión de todas las propiedades de flexbox y cómo usarlas. Y por supuesto, si tienes alguna pregunta o comentario o algo que quieras preguntar al respecto, déjalo en la sección de preguntas y respuestas y estaré más que feliz de contestar lo antes posible. Gracias.