Curso de HTML y CSS | Clase 5 — Flexbox

Carpi Coder
28 Jul 202256:22

Summary

TLDREn este vídeo, se explica cómo utilizar flexbox para crear diseños web responsivos y atractivos. Se demuestra cómo estructurar un sitio web completo utilizando flexbox, desde el encabezado con el logotipo y el menú de navegación, hasta el contenido principal con imágenes y tarjetas informativas. Se destacan las ventajas de flexbox, como la facilidad para centrar y alinear elementos, ajustar tamaños y proporciones, y crear diseños flexibles que se adaptan a diferentes tamaños de pantalla. A lo largo del vídeo, se enfatiza la importancia de practicar y explorar más allá de lo enseñado para dominar esta poderosa herramienta de diseño web.

Takeaways

  • 😀 Bienvenidos a la clase 5 sobre Flexbox, donde repasaremos los conceptos clave y crearemos un pequeño sitio web práctico.
  • 📄 Siempre deja un enlace de Drive en la descripción del video con los archivos utilizados para que los estudiantes puedan descargarlos y seguir el tutorial.
  • 🔗 También proporciona un enlace a la documentación de Mozilla sobre Flexbox como referencia adicional.
  • 🚀 Comienza creando la estructura HTML básica, incluyendo un encabezado con un menú de navegación y secciones principales.
  • 💻 Aplica estilos CSS, importando una nueva fuente de Google Fonts y estableciendo un reinicio CSS (reset) para una base sólida.
  • �ută Utiliza Flexbox en varias partes del sitio, como el encabezado, el menú de navegación y las secciones de contenido principal.
  • 🖼️ Aprende a centrar elementos verticalmente con Flexbox y a ajustar el espacio entre elementos con la propiedad 'gap'.
  • 🃏 Crea tarjetas (cards) con imágenes, títulos, texto y botones, estilizándolas con Flexbox para acomodarlas una al lado de la otra o en columna.
  • 🔢 Explora cómo controlar las proporciones de ancho de los elementos flexibles utilizando la propiedad 'flex' con valores numéricos.
  • 🏡 Finaliza el sitio agregando un pie de página (footer) con derechos reservados, también utilizando Flexbox para alinear sus elementos.

Q & A

  • ¿Cuál es el objetivo principal del video?

    -El objetivo del video es repasar la clase número 5 sobre Flexbox, mostrando cómo crear un sitio web pequeño utilizando las propiedades de Flexbox más comunes.

  • ¿Qué es Flexbox y por qué es tan utilizado?

    -Flexbox es un módulo de diseño en CSS que proporciona una forma eficiente de distribuir y alinear elementos en un contenedor. Es muy utilizado porque permite una gran flexibilidad en el diseño, soluciona problemas de maquetación y facilita la creación de diseños responsive.

  • ¿Qué propiedades de Flexbox se mencionan en el video y cuál es su función?

    -Se mencionan propiedades como display: flex, flex-direction, justify-content, align-items, gap, y flex. Display: flex se aplica al contenedor para activar Flexbox. Flex-direction define la orientación de los elementos hijos. Justify-content y align-items permiten alinear horizontal y verticalmente los elementos. Gap crea espacios entre los elementos y flex ajusta el tamaño de los elementos hijos.

  • ¿Cómo se puede centrar vertical y horizontalmente un elemento dentro de un contenedor Flexbox?

    -Para centrar un elemento vertical y horizontalmente dentro de un contenedor Flexbox, se debe aplicar justify-content: center y align-items: center al contenedor.

  • ¿Por qué es importante el uso de clases en HTML y CSS?

    -El uso de clases en HTML y CSS es importante porque permite aplicar estilos específicos a elementos individuales o grupos de elementos, facilitando la organización del código y el diseño del sitio web.

  • ¿Qué es el anidamiento de Flexbox y cuándo se utiliza?

    -El anidamiento de Flexbox se refiere a la capacidad de tener contenedores Flexbox dentro de otros contenedores Flexbox. Se utiliza cuando se necesita controlar el diseño y la alineación de elementos dentro de otros elementos que ya están alineados con Flexbox.

  • ¿Cuál es la diferencia entre gap y padding en Flexbox?

    -Gap crea espacios entre los elementos hijos de un contenedor Flexbox, mientras que padding agrega espacios entre el contenido de un elemento y sus bordes internos.

  • ¿Qué ventajas ofrece Flexbox en comparación con los métodos de diseño anteriores?

    -Flexbox ofrece varias ventajas en comparación con métodos anteriores, como una mayor flexibilidad en la alineación y distribución de elementos, mejor soporte para diseños responsive, y una forma más sencilla de manejar el diseño en general.

  • ¿Cómo se pueden ajustar los tamaños de los elementos hijos en Flexbox?

    -Los tamaños de los elementos hijos en Flexbox se pueden ajustar utilizando la propiedad flex o especificando anchos fijos. Flex permite distribuir el espacio disponible entre los elementos hijos de acuerdo con un valor numérico proporcional.

  • ¿Qué otros conceptos y herramientas se mencionan en el video además de Flexbox?

    -En el video, también se mencionan conceptos como la importancia del reinicio de estilos (reset), la inclusión de fuentes web, el uso de la herramienta de inspección de elementos del navegador, y la creación de estructuras semánticas con elementos HTML5 como header, nav y footer.

Outlines

00:00

📄 Bienvenida e introducción al repaso de la clase 5 de Flexbox

El instructor da la bienvenida a la clase de repaso de Flexbox y explica que compartirá un enlace con los archivos utilizados en el video. Además, menciona que utilizará la documentación de Mozilla sobre Flexbox como guía. Promete mostrar cómo crear un sitio pequeño utilizando las características más comunes de Flexbox.

05:01

🖥️ Configuración del entorno de trabajo y creación del menú de navegación

El instructor crea un nuevo archivo HTML, establece una estructura básica con estilos CSS e importa una fuente de Google Fonts. Luego, construye un menú de navegación utilizando una lista desordenada y lo estiliza con CSS. Además, agrega un logotipo y acomoda la disposición del menú y el logotipo utilizando Flexbox.

10:01

📐 Alineación y estilizado del menú de navegación con Flexbox

El instructor utiliza propiedades de Flexbox como display: flex, justify-content y align-items para alinear el menú de navegación horizontalmente y centrar los elementos verticalmente. Luego, agrega estilos adicionales como colores, subrayados y espaciado utilizando CSS.

15:05

🖼️ Creación de una sección de imagen principal con Flexbox

Se crea una sección con una imagen de fondo y un texto centrado. El instructor utiliza Flexbox para centrar el texto horizontal y verticalmente dentro de la sección. Además, agrega estilos adicionales como colores, opacidad y espaciado al texto.

20:07

🃏 Estilizado de una sección de tarjetas con Flexbox

El instructor crea una sección con tres tarjetas que contienen imágenes, títulos, texto y botones. Utiliza Flexbox para alinear las tarjetas horizontalmente y ajusta el espaciado y el estilo de cada elemento dentro de las tarjetas.

25:08

🎨 Personalización del estilo de las tarjetas con Flexbox

Se exploran técnicas adicionales para personalizar el estilo de las tarjetas, como el uso de bordes redondeados, opacidad de colores y ajuste de tamaños de imágenes. El instructor también muestra cómo anidar elementos Flexbox dentro de las tarjetas para lograr un diseño más complejo.

30:10

⚙️ Ajuste de proporciones y tamaños de las tarjetas con Flexbox

El instructor enseña cómo ajustar las proporciones y tamaños de las tarjetas utilizando la propiedad flex. Explica cómo establecer valores numéricos para controlar el ancho relativo de cada tarjeta en relación con las demás.

35:12

📐 Continuación del estilizado de las tarjetas con Flexbox

Se continúa ajustando el estilo de las tarjetas, agregando espacios internos (padding) y márgenes para separar los elementos. El instructor también muestra cómo anidar contenedores Flexbox dentro de las tarjetas para lograr una mejor organización del contenido.

40:12

🔍 Exploración de técnicas adicionales con Flexbox

El instructor explora algunas técnicas adicionales con Flexbox, como el uso de la propiedad flex-direction para cambiar la orientación de los elementos hijos. También menciona la propiedad flex-wrap, aunque no la utiliza en este ejemplo.

45:14

⚖️ Ajuste de proporciones y tamaños de tarjetas con flex

Se muestra cómo ajustar las proporciones y tamaños de las tarjetas utilizando la propiedad flex de manera más dinámica. El instructor explica cómo asignar valores numéricos a flex para controlar el ancho relativo de cada tarjeta en relación con las demás.

50:19

🔚 Finalización del sitio con un pie de página y consejos finales

El instructor crea un pie de página utilizando Flexbox para alinear y espaciar los elementos. Finalmente, brinda algunos consejos finales, como investigar más sobre Flexbox, ver videos tutoriales y practicar con los conceptos aprendidos.

55:19

🔗 Enlaces útiles y despedida

El instructor comparte enlaces útiles, como un enlace a un archivo de Google Drive con los archivos utilizados en el video y un enlace a la documentación de Mozilla sobre Flexbox. Se despide y anima a los estudiantes a practicar y seguir aprendiendo.

Mindmap

Keywords

💡CSS

CSS (Hojas de Estilo en Cascada) es un lenguaje de estilo que se utiliza para controlar la presentación visual de las páginas web. En el video, se explora ampliamente el uso de CSS para dar estilo y diseñar los diferentes elementos de una página web, como el encabezado, el menú de navegación, las tarjetas y el pie de página. Se muestra cómo aplicar estilos CSS para cambiar colores, tamaños, fondos, bordes, tipografías y cómo posicionar los elementos utilizando propiedades como display, flex, padding, margin, entre otros.

💡Flexbox

Flexbox es un módulo de diseño en CSS que proporciona una forma eficiente de diseñar, alinear y distribuir el espacio entre los elementos de una interfaz. En el video, se dedica gran parte a explicar y utilizar las propiedades de Flexbox, como display: flex, flex-direction, justify-content, align-items, gap, entre otras. Se muestra cómo Flexbox permite acomodar y centrar elementos de manera sencilla, crear diseños flexibles y responsivos, y cómo se puede anidar contenedores flexibles dentro de otros. Flexbox es una herramienta poderosa y ampliamente utilizada en el desarrollo web moderno.

💡Responsive Design

El diseño web responsive, o diseño adaptable, se refiere a la práctica de crear sitios web que se adaptan y se visualizan correctamente en diferentes dispositivos y tamaños de pantalla. En el video, se menciona que Flexbox es una herramienta clave para lograr un diseño responsive, ya que facilita la distribución y alineación de elementos de manera flexible. Además, se comenta que cuando se estudien las media queries, se entenderá mejor cómo Flexbox contribuye al diseño responsivo. El objetivo del diseño responsive es garantizar una experiencia de usuario óptima, independientemente del dispositivo utilizado para acceder al sitio web.

💡HTML

HTML (Lenguaje de Marcado de Hipertexto) es el lenguaje estándar utilizado para crear y estructurar el contenido de las páginas web. En el video, se muestra cómo se crea la estructura básica de HTML para una página web, incluyendo elementos como el encabezado (<header>), el menú de navegación (<nav>), las secciones (<section>), las imágenes (<img>), los títulos (<h1>, <h2>, etc.), los párrafos (<p>), los botones (<button>), entre otros. HTML es la base sobre la cual se construye el contenido y la semántica de una página web, y posteriormente se le aplica el estilo y diseño utilizando CSS.

💡Selectores CSS

Los selectores CSS son patrones utilizados para seleccionar y apuntar a elementos HTML específicos a los que se aplicarán los estilos definidos. En el video, se muestra el uso de diferentes tipos de selectores CSS, como selectores de etiqueta (p, h1, nav, etc.), selectores de clase (.clase), selectores de ID (#id), selectores de atributo ([atributo]), entre otros. Los selectores son fundamentales en CSS porque permiten apuntar a elementos específicos y aplicar estilos de manera selectiva y precisa. En el video, se observa cómo se utilizan selectores para estilizar el encabezado, el menú de navegación, las tarjetas y otros elementos de la página web.

💡Display

La propiedad display en CSS controla el comportamiento de renderizado de un elemento HTML. En el video, se explora ampliamente el uso de display: flex, que convierte al elemento en un contenedor flexible, permitiendo alinear y distribuir sus elementos hijos de manera flexible. También se menciona display: inline para mostrar elementos en línea, y display: block para mostrar elementos como bloques. La propiedad display es fundamental en CSS para controlar el flujo, la disposición y el comportamiento de los elementos en una página web.

💡Propiedades CSS

Las propiedades CSS son los valores que se asignan a los diferentes aspectos de la presentación visual de un elemento HTML. En el video, se exploran y utilizan numerosas propiedades CSS, como background-color, color, font-family, font-size, padding, margin, border-radius, overflow, max-width, entre otras. Cada propiedad CSS tiene un propósito específico, como cambiar el color de fondo, el color del texto, el tamaño de la fuente, los márgenes y rellenos, los bordes redondeados, el manejo del desbordamiento de contenido, y mucho más. El dominio de las propiedades CSS es fundamental para lograr el diseño y la apariencia deseada en una página web.

💡Posicionamiento

El posicionamiento en CSS se refiere a la capacidad de controlar la ubicación y el orden de los elementos en una página web. En el video, se exploran diferentes técnicas de posicionamiento, como el uso de Flexbox (display: flex) para alinear y distribuir elementos de manera flexible, y la aplicación de propiedades como justify-content y align-items para controlar la alineación horizontal y vertical. También se muestra cómo utilizar propiedades como margin y padding para ajustar el espacio entre los elementos y los bordes. El posicionamiento es crucial para lograr un diseño atractivo y funcional en una página web.

💡Anidamiento

El anidamiento, en el contexto del video, se refiere a la capacidad de anidar o colocar elementos HTML y contenedores CSS uno dentro del otro. En el video, se muestra cómo se pueden anidar secciones (<section>) dentro de otras secciones, y cómo se pueden crear contenedores flexibles (display: flex) dentro de otros contenedores flexibles. El anidamiento permite crear estructuras y diseños más complejos, y es una técnica fundamental en el desarrollo web para organizar y agrupar elementos relacionados de manera lógica y semántica.

💡Responsividad

La responsividad, o diseño web responsivo, se refiere a la capacidad de una página web para adaptarse y verse correctamente en diferentes dispositivos y tamaños de pantalla. En el video, se menciona que Flexbox es una herramienta clave para lograr un diseño responsivo, ya que permite crear diseños flexibles y adaptables. Además, se comenta que cuando se estudien las media queries, se entenderá mejor cómo Flexbox contribuye a la responsividad. La responsividad es esencial en el desarrollo web moderno, ya que garantiza una experiencia de usuario óptima independientemente del dispositivo utilizado para acceder al sitio web.

Highlights

La importancia de dejar en la descripción del video un link con los archivos utilizados para que el usuario pueda descargarlos y seguir el tutorial.

La relevancia de utilizar la documentación de Mozilla como guía para aprender Flexbox.

La explicación del uso de la importación de fuentes de Google Fonts para aplicar una tipografía personalizada en todo el sitio web.

La demostración de cómo inspeccionar elementos en el navegador para comprender mejor el funcionamiento del CSS aplicado.

La creación de una navegación con menú utilizando una lista desordenada y aplicando estilos con Flexbox.

La explicación del uso de la propiedad gap para separar elementos hijos dentro de un contenedor flexible.

La demostración de cómo centrar verticalmente un elemento utilizando la propiedad align-items en un contenedor flexible.

La aplicación de estilos a los enlaces del menú de navegación, incluyendo el subrayado del enlace activo.

La creación de una sección con una imagen de fondo y un texto centrado utilizando Flexbox.

La explicación de la propiedad background-size: cover para que una imagen ocupe todo el contenedor flexible.

La demostración de la creación de tarjetas responsive con imágenes, títulos y botones utilizando Flexbox.

La explicación del uso de la propiedad flex-grow para controlar el tamaño proporcional de los elementos hijos dentro de un contenedor flexible.

La creación de un pie de página centrado con dos párrafos separados utilizando Flexbox.

El resumen de la versatilidad de Flexbox y su importancia en el diseño web responsive.

La recomendación de investigar más sobre Flexbox y su documentación para profundizar en sus capacidades.

Transcripts

play00:00

hola chicos bueno bienvenidos otra vez y

play00:04

hoy vamos a ver un repaso de la clase

play00:07

número 5 de flex box

play00:11

así que arranquemos primero que nada

play00:13

les voy a pasar y nunca lo dije tampoco

play00:15

pero siempre dejo en la descripción del

play00:17

vídeo un link de drive con los archivos

play00:19

que use para el vídeo por si les sirve

play00:22

descargarlo y verlo

play00:24

en todo lo que yo voy usando en los

play00:25

vídeos siempre lo pongo en la

play00:27

descripción

play00:28

con eso un link de drive con los

play00:31

archivos que mostrando en el vídeo en

play00:34

este en particular también voy a dejar

play00:35

este link de la documentación de

play00:38

mozilla

play00:39

sobre flex box que por ahí les puede

play00:41

servir y es lo que subir usando de guía

play00:43

para ir nuestro honor es por ahí lo más

play00:45

común o lo que más usamos no voy a

play00:47

explicar todo del nuevo periodismo con

play00:48

el profe en la clase pero voy a

play00:51

mostrarles por ahí cómo hacer un pequeño

play00:54

sitio

play00:55

con

play00:57

componer las cosas que más se usan lo

play00:59

más común en lo que se suele usar flex

play01:01

box que la verdad que se usa muchísimo

play01:03

así que van a ver que se pulsan en todo

play01:04

e incluso anidar tips que con flex box y

play01:08

todo así que vamos a pasar a eso voy a

play01:11

pasarse entonces este dictamen la gente

play01:13

del vídeo y arranquemos tengo la clase

play01:16

número 5 ya una carpeta con una carpeta

play01:19

de imágenes de unas cositas que voy a

play01:21

usar tenía acá una imagen que detener a

play01:24

ver si lo tengo acá en realidad si esta

play01:25

imagen la clase 5

play01:28

perfecto bien así que voy a abrir la

play01:31

visual studio como siempre abrir code

play01:36

y vamos a arrancar como siempre desde

play01:39

cero para mostrar todos los pasos otra

play01:40

vez vamos a crear un archivo nuevo que

play01:42

sea el index html y dentro vamos a crear

play01:46

nuestras en castex inicial de

play01:48

html

play01:50

y vamos a ponerle un título vamos a

play01:52

ponerle carpe viajes a través vamos a

play01:55

seguir en la página de viajes y vamos a

play01:58

crear una carpeta de styles donde vamos

play02:00

a meter nuestro archivo style punto se s

play02:05

acá bajo el title vamos a limpiar este

play02:08

style recuerden sling 2.0 se s y con

play02:12

esta recomendación del viso les pidió

play02:13

que ya podemos directamente tener toda

play02:15

esta estructura y simplemente habría que

play02:17

borrar esto y escribir la ruta hacia

play02:20

nuestros archivos ese es el perfecto

play02:23

vamos a también como siempre crear un h

play02:26

1 y probar que todo funcione vamos a

play02:28

hacer un hola mundo en el index y

play02:30

hacerlo de color rojo

play02:34

en el css para checar que todo funcione

play02:37

y vamos a abrirlo con el life server

play02:38

dandole click through life' y ya tenemos

play02:41

nuestro la mundo con el título de carpi

play02:44

viaje es perfecto todo funciona

play02:45

perfectamente así que vamos a eliminar

play02:48

esto vamos a eliminar esto y vamos a

play02:50

empezar también como siempre a construir

play02:53

un menú de navegación ahora por ahí un

play02:55

poquito más completo y por ahí repasar

play02:58

un poco de cosas de clase has de ver

play02:59

camión así que vamos a arrancar

play03:03

entonces tenemos nuestro header donde

play03:06

vamos a meter nuestra máquina navegación

play03:07

así que esto se hace con la etiqueta now

play03:09

tiene ave corta y ya tenemos nuestra

play03:12

etiqueta esto simplemente semántica

play03:15

no es necesario que sea así y cientos

play03:17

fueran tips funcionarían exactamente

play03:18

igual esto es importante que quede claro

play03:21

las etiquetas heather la etiqueta nada

play03:23

la etiqueta footer en todas estas

play03:25

etiquetas que tienen un nombre y son

play03:27

contenedores por lo general funcionan

play03:30

visualmente exactamente igual que un dip

play03:32

pero es importante que tengan su nombre

play03:34

porque son etiquetas con valor semántico

play03:37

es decir para el navegador tienen un

play03:38

significado el navegador espera que haya

play03:40

cierta información en particular y

play03:42

dentro el navegador a espera que dentro

play03:44

de las etiquetas no haya un menú de

play03:46

navegación entonces está bueno que las

play03:48

usemos correctamente

play03:50

bien vamos a crear nuestro menú de

play03:52

navegación va a ser una lista y dentro

play03:55

de nuestros ítems vamos a crear una ley

play03:57

de inicio dentro tiene que tener el link

play04:00

también así que vamos a hacer el apache

play04:02

ref y vamos a llamar a punto barra index

play04:06

index html que sería esta misma página

play04:09

vamos a poner a inicio y voy a crear

play04:11

antes dos archivos más que van a ser

play04:13

quienes somos punto html y

play04:17

contacto punto html así ya lo tenemos

play04:20

también

play04:22

y de hecho estos dos archivos vamos a

play04:24

meter una carpeta que se llame fuera de

play04:26

styles y que se llame faces

play04:29

y ahí dentro vamos a meter contacto y

play04:32

quiénes somos perfecto así que vamos a

play04:36

crear los ítems del menú para estos dos

play04:38

vamos a abrir otro l y vamos a hacer el

play04:41

a h ref y dentro tenemos que llamar a

play04:44

los archivos paramos ponemos punto barra

play04:46

como siempre para que hubiese el juego

play04:47

que nos recomiende que hay que poner

play04:50

adentro y tenemos la carpeta imágenes el

play04:52

index que ya lo limpiamos aquí arriba la

play04:55

carpeta basics que es la que queremos y

play04:56

la carpeta styles que son básicamente lo

play04:58

que tenemos acá en la carpeta root en la

play05:00

carpeta raíz de nuestro proyecto así que

play05:03

a mostrar la carpeta page y vamos a

play05:05

elegir quiénes somos y ahora si ponemos

play05:08

acá quiénes somos y por último el l y de

play05:11

contacto con un hr punto punto barra un

play05:16

segundito

play05:19

a este punto barra entramos a país y

play05:21

elegimos contacto cerramos comillas y

play05:24

aquí dentro le ponemos contacto bien si

play05:28

guardamos y vamos a nuestro navegador

play05:29

vemos que tenemos la lista que armada

play05:32

así que vamos a empezar a hacer grupo

play05:35

con nuestro css

play05:37

antes que nada igualmente afuera de la

play05:40

napa voy a agregar el logo

play05:42

que vamos a usar para este proyecto

play05:44

vamos a abrir una etiqueta de img

play05:48

si lo ponemos sin el signo de mayor

play05:50

podemos escribir simplemente img y acaba

play05:52

disolución una recomienda la primera que

play05:54

aparece es la correcta y ya podemos

play05:56

escribir que directamente la ruta de la

play05:58

imagen que sería punto barra elegir la

play06:00

carrera de imagen y elegir el logo y en

play06:03

alto vamos a ponerle luego simplemente

play06:04

el logo de carpi viajes

play06:07

ahí está perfecto

play06:10

y ahora sí entonces vamos a pasar a

play06:12

escribir un poco de html

play06:15

vamos a de css perdón vamos a ir a la

play06:17

css y primero que nada como siempre

play06:19

importantísimo el reset tenemos que

play06:22

hacer acá arriba de todo

play06:24

tenemos que agregarle un margen de 0

play06:26

badín de 0 y box 6 y border box

play06:31

importantísimo para que los padres no

play06:33

nos rompan nada y los bordes tampoco y

play06:36

ahora sí bueno de paso ya que estamos

play06:38

haciendo la parte superior vamos a

play06:40

buscar una tipografía vamos a tragar

play06:42

fondos punto google.com y vamos a elegir

play06:44

una que no sea el único que ya lo usamos

play06:46

del vídeo pasado

play06:49

vamos a elegir otra más otra más linda

play06:51

por ahí

play07:00

bueno vamos a elegir esta carnet que

play07:02

está interesante y vamos a elegir

play07:05

entonces a fin 100

play07:08

las 300 400

play07:13

600 y 87 800

play07:17

ahora si así está bien no va a hacer

play07:19

falta más no creo que usemos más

play07:21

acá podemos verlas ya legislación 300

play07:24

400 600 800 y siempre con la opción de

play07:28

import lo podemos copiar directamente al

play07:31

importe y pegarlo también importantísimo

play07:33

esto va arriba antes del reset y en

play07:36

nuestra vez el mismo podemos hacer que

play07:38

todo nuestros sitios de encarta

play07:39

tipografía así que lo que hay que hacer

play07:41

es copiar esta línea de aquí abajo la

play07:44

pegamos acá y ya está perfecto ahora

play07:46

todo nuestro sitio va a tener esa

play07:47

tipografía podemos comprobarlo si ya lo

play07:50

vemos que realmente ya no estará acá acá

play07:52

abajo del menú y tenemos esa tipografía

play07:54

y ahora lo que hay que hacer es acomodar

play07:56

un poco todo esto bien vamos a ponerle

play07:58

una clase a nuestra imagen la clase logo

play08:01

y a nuestra navarra le vamos a poner la

play08:04

clase

play08:05

harvard a la ue le le vamos a poner otra

play08:09

casa también que va a ser un amparo en

play08:12

bajo y bajo menú para usar un poco de

play08:14

bem y a nuestro sistema de lista esto lo

play08:16

pueden hacer con la tecla alt si yo clic

play08:18

aquí mantengo mantengo apretado la tecla

play08:21

alt en windows y hago clic en todo el

play08:23

lugar donde quiero escribir por escribir

play08:24

los tres al mismo tiempo pongo un

play08:26

espacio y acá le agregara los tres la

play08:28

misma clase que va a ser la clase menú

play08:31

ítem y de hecho a la ue le vamos a poner

play08:35

solamente la clase menú ahora sí

play08:37

perfecto entonces tenemos nuestra imagen

play08:40

con la clase logo nuestro napar con la

play08:42

clase na para y nuestro menú con la

play08:45

clase menú y cada with el del menú con

play08:47

una clase menú y un bajo y un bajo ítem

play08:50

perfecto así que vamos a nuestro css

play08:53

ahora sí y vamos a empezar a estilizar

play08:54

un poco todo primero que nada lo que

play08:56

quiero hacer es que esta imagen sea

play08:57

bastante más chica así que vamos a

play08:59

llamar a la clase logo que como tenemos

play09:01

la imagen nombrada y le vamos a decir

play09:03

que tenga un ancho de 100 píxeles por

play09:05

ahí ahí está perfecto algo así estaría

play09:07

genial

play09:09

y después ahora sí vamos a empezar a

play09:11

editar nuestro nuestro menú lo primero

play09:15

que voy a hacer es ponerle color de

play09:16

fondo al header para qué

play09:19

se puede distinguir lo que estamos

play09:20

haciendo así que vamos a abrir la

play09:21

etiqueta header simplemente sin clase le

play09:24

vamos a poner un background ba ground

play09:27

color

play09:29

escribí algo mal de nuevo para crear un

play09:31

color ahí está ahora sí le vamos a poner

play09:33

yo lo que hago siempre es poner red

play09:35

porque es muy fácil y rápido escribir y

play09:37

es por seleccionar el color que quiera

play09:41

ahí está vamos a elegir un rosita como

play09:43

siempre

play09:44

algo así

play09:48

y ahí está vamos a llegar que funciona y

play09:51

ya tenemos nuestros fondos del

play09:52

encabezado de color y perfecto

play09:55

voy a pasar luego abajo así que

play09:57

ordenadito todo esto en el orden que

play09:58

vamos haciendo y vamos a llamar ahora a

play10:01

nuestra navarra y a nuestro menú vamos a

play10:05

empezar por el menú primero y vamos a

play10:07

empezar a usar un poco de flex box vamos

play10:09

a llamar a la clase menú y como vemos

play10:12

acá están uno abajo del otro y nosotros

play10:13

queremos que esté uno al lado del otro

play10:15

la forma de hacerlo hasta ahora que

play10:17

teníamos era poner la display in line

play10:20

line blog a cada una de los ítems o sea

play10:23

llamar a menú ítem y ponerle un display

play10:27

in line y lo que va a hacer es ponerlos

play10:30

uno al lado del otro pero hay una forma

play10:32

que tenemos mejor para solucionarlo

play10:34

ahora que funciona mejor que está un

play10:36

poco más soportado también y que es lo

play10:39

que se utiliza ahora para este tipo de

play10:41

soluciones que es simplemente a menú que

play10:44

es recordemos nuestra web

play10:47

donde tiene cada uno estos elementos

play10:49

darle un display flex

play10:51

recordemos que display flex se utiliza

play10:54

en el padre siempre nosotros queremos

play10:57

acomodar esos ítems perfectos display

play10:59

flex se le pone a su padre directo no a

play11:02

navarra sino a menú que estrictamente su

play11:04

padre el padre de cada google dos ítems

play11:06

si lo ponemos a la par lo que estaríamos

play11:08

haciendo es aplicarle todas las

play11:10

propiedades trex como hijo a la huele

play11:12

pero no a cada uno estos elementos por

play11:14

eso es importante que el display se

play11:15

aplique al padre directo de los interés

play11:18

que queremos acomodar en este caso el

play11:20

menú va a tener de flex y si vamos al

play11:21

navegador sabemos que se pusieron uno al

play11:24

lado del otro lo que también queremos

play11:25

sacarle esta viñeta que tienen esto

play11:28

recordemos a la web le damos un list

play11:30

style type none y automáticamente se nos

play11:36

elimina la viñeta perfecto

play11:39

y ahora lo que queremos es que estos

play11:42

ítem del menú queden a la derecha del

play11:44

logo del logotipo si está en el menú que

play11:46

en uno al lado del otro es decir en los

play11:49

7 merlo como se suele hacer así tanto la

play11:51

img que es el logo como el nap que es

play11:53

otro hijo de heather ambos son hijos de

play11:56

género entonces lo que podemos hacer es

play11:59

darles play flex al header para que

play12:01

estos ítems se coloquen uno al lado del

play12:03

otro y trabajar y funcionen como

play12:05

elementos flex perfecto entonces

play12:07

bastaría solamente contarle el display

play12:09

flex a nuestro género

play12:12

porque es el padre directo de estos dos

play12:14

ítems que queremos modificar la imagen y

play12:17

la napa y si vamos al navegador ya vemos

play12:20

que funciona perfectamente y nuestro

play12:22

logo y nuestro

play12:23

menú de navegación están uno al lado del

play12:26

otro

play12:27

perfecto quizás ahora lo que queremos es

play12:29

alejarnos un poco acomodarlos un poco

play12:31

que queden centrados así que vamos a

play12:33

trabajar en eso recuerden siempre

play12:35

podemos inspeccionar elementos para ver

play12:37

cómo están funcionando estos estos

play12:39

elementos voy a ponerlo abajo para que

play12:41

se vea mejor

play12:42

y le voy a explicar también de paso un

play12:44

poco esta parte de diseccionar que por

play12:46

ahí nunca la barca vamos demasiado

play12:48

en cada navegador es un poco diferente

play12:50

pero por lo general lo importante son

play12:52

estas dos secciones que me parece que

play12:55

por defecto aparece a la derecha y

play12:57

digamos funciona exactamente igual si

play12:59

sacamos esto en chrome tenemos lo mismo

play13:01

tenemos arriba nuestra estructura html y

play13:03

abajo las clases css que afectan a cada

play13:06

uno de los elementos por ejemplo si yo

play13:08

selecciono menú le hago clic en la parte

play13:11

de abajo me va a aparecer el css que

play13:14

afecta a menú que es lo que acabamos de

play13:16

poner nosotros el display flex y el list

play13:17

style type none

play13:20

lo mismo si le hago clic a heather por

play13:23

ejemplo tiene nuestro patrón color

play13:25

rosita y nuestro display flex que le

play13:28

pusimos recién ayer e incluso este lado

play13:30

no figura el archivo en el que está y la

play13:33

línea en la que está por ejemplo que

play13:34

dice está el css la línea 10

play13:38

y si voy a nuestros ss en la línea 10

play13:41

efectivamente tenemos nuestro género con

play13:43

los estilos que aparecen allí y está

play13:44

bueno e incluso si quieren ir probando

play13:46

cosas para ver si funcionan pueden

play13:48

modificarlo pueden modificar el color

play13:50

desde acá mismo y verlo en navegar

play13:51

directamente

play13:53

supongamos que queremos poner un rojo

play13:55

así y queremos

play13:57

que tenga una altura lo podemos poner a

play13:59

cada height de 200 píxeles y pasen el

play14:02

tipo de cosas se puede ir probando lo

play14:04

que sí pasa es que si apretamos f5

play14:06

recargamos la página estos cambios se

play14:07

van a borrar obviamente nos quedan

play14:09

guardados en el archivo pero si sirven

play14:11

para ir probando cosas para no tener que

play14:13

estar suscribiendo el archivo si quieren

play14:15

probar cómo queda un background color

play14:17

celeste acá lo pueden probar y si le

play14:20

dicen bueno este es el que quiero así me

play14:21

gusta lo voy a dejar así se pueden

play14:23

copiar el color y llevárselo css y

play14:25

pegarlo acá sin problemas y ahora si al

play14:27

guardar se va a quedar eso para eso

play14:29

sirve la parte de inspeccionar pero

play14:31

bueno perfecto vamos a chequear cómo

play14:33

está funcionando esto también en el

play14:35

inspección al elemento se hacen clic en

play14:37

un elemento en particular y del

play14:38

intencional ese ítem ya se selecciona en

play14:41

la parte de html entonces bueno para

play14:43

saberlo

play14:45

y perfecto tenemos nuestro anapar y nos

play14:48

da ing fíjense que la napa

play14:51

está ocupando todo el alto ahí nos marca

play14:53

que nos preocupa todo el alto del género

play14:55

entonces para acomodar los elementos y

play14:58

centrarlo verticalmente habría que

play15:00

modificar esto de la anap para perfecto

play15:05

vamos a meternos un poco en eso primero

play15:07

que nada por ahí separar un poco el logo

play15:09

y ganar palmas cierto que son estos dos

play15:11

la img y el lado entonces lo que hay que

play15:15

hacer es aplicar estilos en el header

play15:17

mismo que es el padre de ellos al que le

play15:18

dimos en réflex así que en el mismo

play15:20

header donde hicimos iplex le vamos a

play15:22

poner por ejemplo

play15:25

just y faith content center vamos a ver

play15:28

qué pasa vamos a guardar y vemos que los

play15:30

dos ítems se centraron

play15:32

perfecto

play15:34

pero lo que queremos no es que estén

play15:36

centrados sino que estén a la derecha

play15:37

como estabas pero que tengan un espacio

play15:39

entre ellos entonces podemos probar

play15:41

otras propiedades active hay content

play15:42

como por ejemplo

play15:45

bueno flex start sería lo que viene por

play15:48

defecto y por eso es que están a la

play15:50

izquierda reflex en y se van a ir al

play15:53

final y si le ponemos un space between

play15:56

por ejemplo lo que va a hacer es que van

play15:58

a tener todo el espacio que sobre entre

play16:00

ellos

play16:02

y ambos se van para las para las puntas

play16:04

del documento no queremos que haya

play16:06

tantos pasos y que probemos space around

play16:08

lo que va a hacer es

play16:10

hacer que haya un espacio entre ellos y

play16:13

también un espacio alrededor y por

play16:15

último space y berlín va a ser que estos

play16:18

espacios entre los ítems y entre los

play16:21

bordes exteriores sean exactamente

play16:22

iguales pero ninguna estas opciones es

play16:24

la que queremos entonces vamos a

play16:27

directamente sacar esto de xàtiva y

play16:28

counter y hay una propiedad que está

play16:32

bueno saberla y que está bueno probarla

play16:34

usarla porque sirve mucho que es la

play16:36

propiedad de lan

play16:38

nunca lo que va a hacer es agregar un

play16:41

espacio el espacio que nosotros le

play16:43

digamos entre cada uno de los ítems

play16:45

hijos de este contenedor donde estamos

play16:47

aplicando display flex por ejemplo si yo

play16:50

pusiera acá un gap de 10 píxels lo que

play16:52

va a hacer es poner un espacio de 10

play16:54

píxeles entre los dos elementos en este

play16:56

caso que tenemos como hijos

play16:59

si yo pusiera un gap de 60 píxeles el

play17:00

espacio que va a haber es de la pixels

play17:02

entre cada uno entonces quizás para este

play17:04

caso donde no necesitamos que se centren

play17:06

y que estén

play17:08

en diferentes posiciones del documento

play17:10

simplemente queremos que tengan una

play17:11

mínima separación podemos simplemente

play17:13

agregar un gap de 20 pixels y ya se van

play17:16

a separar así recuerden este esta

play17:18

propiedad de gap o también se pueda

play17:20

escribir así escribir guión gap

play17:22

funcionan igual son lo mismo recomiendo

play17:25

que si pueden usar las dos al mismo

play17:27

tiempo porque hay algunos navegadores

play17:29

viejos como el safari en versiones

play17:31

anteriores que no soportan gap pero si

play17:33

grygera o al revés no me acuerdo bien

play17:36

entonces está bueno si pueden dejar las

play17:39

dos puestas está buenísimo

play17:41

y les va a servir y va a servir para más

play17:43

navegadores así que es genial

play17:46

lo que hace es agregar un espacio entre

play17:49

los elementos de flex a los hijos flex

play17:52

que estamos generando desde acá desde

play17:55

header con el display flex pero

play17:57

solamente funciona con un elemento que

play17:58

tiene el flex no podríamos aplicar legar

play18:01

a un elemento por ejemplo acá que no

play18:03

tiene desperfectos no va a funcionar

play18:05

para nada de hecho podemos chequearlo si

play18:08

vamos a inspeccionar el logo vemos que

play18:10

automáticamente

play18:12

nuestro navegador nos lo tacha nos lo

play18:14

ponen gris porque no lo está tomando en

play18:15

cuenta no está haciendo nada y nos avisa

play18:18

acá mismo

play18:20

el navegador nos avisa que no podemos

play18:23

usar

play18:24

y en este elemento porque no es un

play18:26

contenedor flex y un contenedor libre

play18:28

eso lo vamos a ver en otra clase

play18:30

pero básicamente no va a funcionar

play18:32

podemos tener que ponerlo solamente iba

play18:34

a funcionar solamente si lo tenemos en

play18:36

un contenedor flex como es este caso del

play18:38

head perfecto bien ya lo tenemos ha

play18:41

ordenado como queremos y lo que quedaría

play18:43

por ahí es centrar esto verticalmente y

play18:45

también separarlos entre sí para

play18:48

separarlos vamos a hacerlos antes

play18:49

podemos hacer lo mismo ponerles un gap

play18:51

al menú que es el que contienen otros

play18:54

ítems vamos a ponerle un cap de 10

play18:56

píxeles por ahí para probar y así

play18:58

estaría bien y vamos a agregarle grid y

play19:00

acá solamente

play19:02

para que funcione mejor en cualquier

play19:05

navegador y ya tenemos más trocitos bien

play19:07

separados como queremos lo que quedaría

play19:10

ahora si es centrarla verticalmente y

play19:12

nos imaginaríamos que simplemente

play19:14

poniendo alain items centre esto

play19:18

quedaría centrado lo que pasa es que si

play19:21

inspeccionamos y vemos cómo funciona

play19:23

exactamente y esto va a depender siempre

play19:25

de que estemos haciendo así que si no

play19:27

nos si no funciona algo en particular

play19:28

deberíamos venir acá inspeccionar y ver

play19:30

qué está pasando si vemos que nuestra

play19:32

par tiene todo el alto de nuestro

play19:35

contenedor pero el menú no entonces la

play19:37

forma de solucionar esto son dos

play19:40

no lo voy a hacer analizar nuestros las

play19:42

dos opciones para que veamos cómo

play19:44

podríamos solucionarlo una de ellas es

play19:46

simplemente darle al menú una altura del

play19:48

100% height de 100 por ciento para que

play19:51

en este caso no tome el 100% de su

play19:53

contenedor que es la anap está la misma

play19:55

nada que tenemos acá que como vemos es

play19:57

el contenedor de huele el padre y esto

play20:00

nos va a solucionar el problema y ahora

play20:01

si tenemos

play20:02

nuestro huele con los items centrados

play20:07

y hay como un espacio un poco raro pero

play20:09

solo que por el mismo organismo altura

play20:11

de la tipografía no quedan exactamente

play20:13

centrados eso lo vamos a acomodar pero

play20:16

de todas formas ahí ya vemos que se

play20:17

centra porque ahora si nuestro huele

play20:19

mide el 100% de su padre al ponerle

play20:22

alicientes y por ciento funciona

play20:23

perfectamente la otra opción a contentar

play20:26

que también es varias y se puede usar

play20:28

perfectamente y creo que es la que yo

play20:30

elegiría la verdad es simplemente a lana

play20:33

para vamos a llamarla en otro css vamos

play20:36

a formar anapar y le vamos a decir que

play20:38

tenga display flex

play20:41

alain items centre para que pase

play20:46

exactamente lo mismo

play20:48

vamos no se guardó esto

play20:53

vamos a chequear ahí está perfecto así

play20:55

pasa exactamente lo mismo vemos que

play20:57

nuestro huele sigue siendo así de

play20:59

bajitos igual que es un contenido ya no

play21:01

al 100% ya le sacamos la altura del 100%

play21:04

pero la napa al ser gay pride flex

play21:07

tiene un solo hijo pero funciona

play21:09

exactamente igual y darle alain interest

play21:12

center lo que hace es simplemente a

play21:14

todos sus hijos que en este caso es no

play21:16

sólo centrarlo verticalmente

play21:18

tenemos que dar los hijos y después flex

play21:20

porque alain intensa enter sólo no

play21:22

funciona vemos que acá pasa lo mismo se

play21:24

pone en gris porque no funciona alain

play21:27

item center pero dándole display flex ya

play21:30

podemos usarlo así también y funciona

play21:32

exactamente igual no hace falta darle un

play21:35

100% al menú sigan aparte nos entra el

play21:38

menú digamos en lugar de estar centrando

play21:41

cada uno estos ítems con dándole dándole

play21:44

a line y se encenderá menú lo que

play21:46

estamos haciendo es darle display flex

play21:47

al anapar para que no se entren en

play21:49

nuestro mismo entero

play21:51

pero el resultado final visualmente es

play21:53

exactamente el mismo

play21:55

perfecto

play21:57

vamos a pasar ahora ya tenemos terreno

play21:59

armado si hacemos clic nos lleva a los

play22:01

archivos que queremos

play22:03

qué pasó ahí está vamos a ver si todo

play22:05

funciona bien perfecto y vamos a ya que

play22:09

estamos

play22:12

ok ya que estamos vamos a darle un color

play22:16

en otra mano items menú ítem y vamos a

play22:20

darle un color white y un text

play22:23

decoration

play22:24

none para sacarle subrayado que tienen

play22:27

claro habría que llamar fíjense qué menú

play22:30

ítem es la clase de ley y nosotros

play22:33

queremos como siempre les recuerdo a

play22:35

afectar al ancor al link tenemos que

play22:37

llamar directamente al link así que

play22:39

simplemente agregamos una acá con

play22:41

espacio para que tome a todos los que

play22:44

están dentro de la clase de menú iter y

play22:46

ahora sí nos queda así como queremos

play22:49

y también vamos a por ejemplo a inicio

play22:52

en este caso vamos a dar la clase active

play22:55

porque estamos en la página de inicio

play22:56

que es el index y entonces vamos a

play22:59

llamar también a menos ítems

play23:02

punto perdón

play23:04

active y después al a y le vamos a dar

play23:08

un text decoration underline

play23:11

para que nos traten de inicio que he

play23:13

desgastado perfecto

play23:16

acá lo que hice fue llamar a la clase

play23:18

menor ítem que también tienen clase

play23:20

menor es decir perdón active va a llamar

play23:23

a todos los elementos html que tengan la

play23:26

clase militar y la clase activo en

play23:28

nuestro caso es solamente este porque

play23:30

todos los demás menos items no tienen la

play23:32

clase active en este caso si iba a

play23:35

buscar todos los que haya dentro y le va

play23:37

a poner text decoration underline que lo

play23:39

que hace es subrayar el texto vamos a

play23:41

poner un papel también para que tenga

play23:43

texto doble tenga subrayado doble perdón

play23:45

y perfecto ya tenemos otro menú

play23:48

funcionando perfectamente y vamos a

play23:50

agregar acá abajo la imagen que habíamos

play23:52

puesto a la vez pasada

play23:54

pero lo vamos a hacer un poquito mejor

play23:56

ahora vamos a abrir una etiqueta de

play23:58

e-mail porque acá va estar nuestro

play23:59

contenido principal de la página

play24:02

y dentro vamos a agregar una sección

play24:06

sexo

play24:08

perfecto y dentro de la sección vamos a

play24:11

tener una imagen y un texto la sección

play24:13

se va a llamar imagen principal

play24:16

principal ahí está y dentro vamos a

play24:19

tener un texto que diga

play24:21

bienvenidos a karp y viajes perfectos

play24:26

la imagen principal va a ser una sección

play24:28

que va a tener la imagen de fondo para

play24:31

que la podemos usar como imagen de fondo

play24:32

de esa sección y dentro tiene un h 2 con

play24:38

un texto nada más nada nada muy raro y

play24:42

vamos a llamar a esta clase en el css

play24:44

así que vamos a tomar la imagen

play24:45

principal y le vamos a decir que tenga

play24:52

background imagen con la url de nuestra

play24:57

imagen

play24:58

barra

play25:00

perdón estamos en el css y tenemos que

play25:03

salir hacia atrás una carpeta así que lo

play25:05

correcto sería poner dos puntos y una

play25:07

barra y ahora si nos permite elegir

play25:09

entre nuestras carpetas de la raíz vamos

play25:12

a elegir img y vamos a elegir paisaje

play25:13

punto jpg

play25:15

recuerden siempre background y mix se

play25:17

usa con el url paréntesis y comillas y

play25:21

dentro de las comillas la ruta la imagen

play25:22

y recuerden que están en la carpeta

play25:24

styles y quieren ir a una carpeta

play25:26

hermana tienen que poner dos puntos para

play25:29

salir de la carpeta styles jaycee podrán

play25:30

grabar una otra

play25:33

y perfecto si guardamos vamos a ver que

play25:35

se ve apenitas la imagen porque tenemos

play25:37

el texto muy bajito le vamos a altura

play25:39

imagen principal que tiene una altura de

play25:40

80 a bh por ahí de 80 por hate y ahí

play25:45

está perfecto así está así me parece

play25:46

bien

play25:47

cómodo y vamos a acomodar un poco esta

play25:50

imagen que tenemos atrás vamos a decirle

play25:54

que tenga un background repeat de none

play25:56

repeat la altura la voy a poner arriba

play25:59

así queda todo lo que pagaron justito

play26:00

esto no cambia nada esto pues tal en

play26:02

cualquier orden todo esto me gusta

play26:04

tenerlo un poquito ordenado por ahí para

play26:05

leerlo mejor y saber que estoy haciendo

play26:07

pero no tiene que tener sí o sí un orden

play26:09

en particular y perfecto ya en la imagen

play26:13

no se repite y le vamos a dar un

play26:15

background size de cover para que ocupe

play26:18

todo su contenedor todo el sección de

play26:20

imagen principal perfecto y vamos a

play26:22

darle también por las dudas un

play26:23

background posición de centre center

play26:26

para que se centre en nuestro contenedor

play26:30

perfecto y ahora lo que queremos hacer

play26:33

es llamar a este h 2 y centrarlo como

play26:36

hacíamos eso

play26:37

sin flex box la verdad que es muy

play26:39

complicado pero con flex box es una

play26:42

solución muy fácil simplemente a nuestra

play26:44

sección a nuestro contenedor de este h 2

play26:46

en este caso h 2 va a ser un hijo de de

play26:49

este contenedor flex así que imagen

play26:51

principal le vamos a dar un display flex

play26:53

display flex si guardamos esto no va a

play26:57

cambiar absolutamente nada todavía pero

play26:59

si le ponemos un satisfy content center

play27:02

lo que va a hacer es alinear a todos sus

play27:04

hijos horizontalmente en el centro en

play27:06

este caso tiene un solo hijo pero

play27:08

funciona perfectamente igual a eso lo

play27:10

que queremos genial y si le decimos a

play27:13

alain items center va a ser lo mismo

play27:16

pero verticalmente y ahora nuestro texto

play27:18

aparece acá genial lo que podemos hacer

play27:21

es ahora si llamara imagen principal

play27:26

h 2 que es nuestra sección con la clase

play27:30

imagen principal y dentro de sólo un h 2

play27:33

y le vamos a decir que tenga color white

play27:35

para qué

play27:38

se puede leer y vamos a darle también un

play27:41

fondo de color para que se pueda leer un

play27:44

poco más como todavía porque cuando

play27:45

empecemos a crear puede ser que ya no se

play27:47

lea así que le vamos a decir que tenga

play27:49

un background color de vamos a ponerle

play27:52

red solamente para ir viendo los

play27:54

espacios fíjense que acá queda muy

play27:56

pegado de los dos lados así estaría

play27:58

bueno ponerle un pad y a los costados

play28:01

vamos a ponerle un padding inline que lo

play28:03

que hacía recuerden es agregar padding

play28:05

left y paint right y ponerle unos 15

play28:09

pixels vamos a probar y ahí está

play28:11

perfecto ya tiene un espacio un poco más

play28:13

considerable más cómodo para leer y nos

play28:15

queda tan pegado al borde

play28:18

y lo que quiero hacer es cambiar de

play28:20

color black nada más

play28:23

y ello parece mucho mejor pero también

play28:25

les quería mostrar

play28:27

algo para que para que lo conozcan una

play28:29

propiedad que tenemos acá en css que no

play28:33

solamente se pueden dar colores sólidos

play28:35

de fondo se puede hacer si nosotros

play28:37

posicionamos nuestro cursor acá y nos

play28:39

vamos los elegimos rgb por ejemplo no

play28:42

hace falta elegir rgb pero tenemos esta

play28:44

esta barrita además de la de los colores

play28:46

los podemos elegir diferentes colores

play28:48

tenemos esta barrita que es de opacidad

play28:50

si nosotros arrastramos nuestro

play28:53

nuestro cursor por acá podemos ir

play28:55

cambiando la opacidad de nuestro nuestro

play28:59

color es decir si lo ponemos al 50% va a

play29:02

quedar ahí el 0,5 fíjense este último

play29:04

numerito que aparece acá y termina

play29:06

parece acaba cambiando si lo ponemos en

play29:08

0.5 lo que va a hacer es que nuestro

play29:11

fondo va a ser negro pero con una

play29:12

opacidad del 50% es decir pasa

play29:15

translúcido sea puede ver a través de

play29:16

ese fondo y no va a ser completamente

play29:19

negro opaco entonces se lea bien el

play29:21

texto pero también se ve un poco el

play29:23

fondo y porque si lo quieren probar está

play29:24

bueno

play29:26

en el gba fíjense que por lo general

play29:29

cuando tenemos solamente colores sólidos

play29:32

tenemos rgb y tres valores que son los

play29:34

valores de red green y blue desde la

play29:37

forma de escribir de colores de rege

play29:39

beige y vamos cambiando de color vamos a

play29:41

ver que por ejemplo en rojo tenemos 255

play29:44

que es el máximo 0 y 0 porque no tienen

play29:46

ni verdad ni acción simplemente es rojo

play29:48

puro y lo mismo va pasando con los demás

play29:52

colores se van transformando y bueno en

play29:55

000 sería negro y en 255 o sea el máximo

play29:58

de todos es blanco lo voy a dejar

play30:00

nuevamente en cero

play30:03

pero fíjense que cuando yo bajo la

play30:05

opacidad cambia de rgb a rgb y eso es

play30:10

y el último el último valor que se

play30:12

agrega es la opacidad y va entre 0 a 1

play30:15

es decir uno sería

play30:17

opaco totalmente opaco y cero si lo

play30:20

dejamos en rgb a 000 va a ser

play30:22

completamente transparente y fíjense que

play30:24

ahí se nota ya no tenemos ningún fondo

play30:26

lo voy a volver a dejar en 0.5 por ahí

play30:29

cerquita

play30:31

para que se vea el fondo negro pero

play30:33

también se ve un poco la imagen de atrás

play30:34

era un poquito mostrarles eso y

play30:36

avanzamos ya tenemos nuestro texto acá

play30:38

centrado de hecho si le agregamos por

play30:41

ejemplo un texto descriptivo aquí debajo

play30:43

vamos a ponerle el orden

play30:45

así cortito

play30:48

y vemos que nos acomoda como queremos

play30:51

porque se acomodan uno al lado del otro

play30:53

no se ve casi pero están uno al lado del

play30:55

otro lo que queremos para acomodar esto

play30:57

es darle simplemente a nuestro

play30:59

contenedor flex

play31:01

[Música]

play31:03

flex the direction flex the direction y

play31:06

flex direction hay varios estos the road

play31:09

rivers volume rivers la verdad es que

play31:11

rivers yo nunca lo tuve que usar y se

play31:13

usan muy poco pero row y columnas son

play31:15

los que más se usan road es el que flex

play31:18

box trae por defecto por eso casi nunca

play31:19

tampoco lo escribimos pero suele haber

play31:22

casos en los que se suele utilizar en

play31:24

este caso vamos a elegir columna lo que

play31:26

va a hacer es cambiar nuestro sentido

play31:28

orientación de nuestro contenedor flex

play31:30

en lugar de acomodar los elementos uno

play31:32

al lado del otro nos va a acomodar uno

play31:34

abajo del otro así que vamos a elegir

play31:35

columna y vamos a ver qué pasa

play31:38

y ahora vemos que tenemos nuestro título

play31:41

y nuestro texto justo debajo vamos a

play31:44

venir acá vamos a darle un par de

play31:45

estilos al texto imagen principal pe y

play31:49

le vamos a decir primero que nada que

play31:51

tenga color white así lo podemos ver

play31:54

y vamos a ver acá ya tenemos en nuestro

play31:57

texto lo que quizás queremos ahora es

play31:58

que el texto no ocupe todo el ancho

play32:00

porque queda incómodo y también que esté

play32:02

centrado entonces para centrar lo

play32:04

primero que nada text align center

play32:06

siempre eso no cambia

play32:09

y ya nuestro texto está centrado pero

play32:11

queremos que por iu no ocupe todo el

play32:12

ancho como decíamos entonces la forma de

play32:14

solucionarlo son o darle un ancho fijo a

play32:16

este párrafo o darle un padding a los

play32:19

costados en nuestro contenedor en

play32:21

nuestra imagen principal podemos poner

play32:22

también un padre inline que recuerda en

play32:25

el país agrega espacio por dentro

play32:27

decirse para nuestro contenido de los

play32:29

bordes del lado interior y si le ponemos

play32:31

unos 150 píxeles por ejemplo

play32:34

sabemos que nuestros contenidos empieza

play32:36

a ajustar y se empieza a ir un poco más

play32:38

para adentro y nos ha trampeado el borde

play32:40

si nos fijamos inspeccionamos vamos a

play32:42

ver cómo funciona fíjense nuestra

play32:44

sección imagen principal tiene un

play32:46

padding a los costados para inglés y

play32:48

para dean wright de 50 píxels y ese es

play32:51

el espacio y violeta que vemos acá en

play32:52

los costados y por eso el texto no se

play32:54

estira más que eso vamos a ponerle un

play32:56

poquito más sólo para que quede un

play32:58

poquito más prolijo

play33:00

perfecto y ella tenemos un elemento flex

play33:03

muy bien armado y fíjense que usamos

play33:06

flex en varios iguales ya usamos flex en

play33:09

nuestro header para poder acomodar

play33:11

nuestro logo con nuestro menú

play33:13

usamos flex en nuestra parte para poder

play33:17

centrar nuestro menú acá mismo es en

play33:19

este caso no usamos flex para como

play33:21

elementos decisivos simplemente para

play33:23

acomodar un solo para centrar nuestro

play33:25

menú pulsamos flex también en el menú

play33:28

para acomodar entre sí cada uno de estas

play33:30

cita ante el menú para poder separarlos

play33:32

poder ponerlos al lado del otro también

play33:35

lo usamos ahí es de la intención de usar

play33:37

no lo usamos para nada

play33:39

y usamos flex también en nuestra sección

play33:41

de imagen principal

play33:44

para acomodar estos ítems que tenemos

play33:46

acá

play33:47

genial

play33:48

vamos a hacer un poquito más vamos a ir

play33:52

a hacer unas tarjetitas como los que

play33:54

hicimos en el vídeo anterior pero ahora

play33:56

usando flex y no display in line así que

play33:58

vamos a abrir otra sección que se llame

play34:01

tarjetitas con la clase tarjetitas y

play34:04

dentro vamos a crear una por ahora y

play34:07

podemos agregar dos más así quedan las

play34:09

tres una lado la otra como vimos en el

play34:11

vídeo pasado vamos a crear un libro

play34:14

las tarjetitas solamente en singular

play34:18

y dentro va a tener una imagen img src

play34:24

perdón voy a borrar es directamente el

play34:26

viaje vivir con esto ahí está elegimos

play34:30

img y en el cierre se ponemos la otra

play34:32

imagen punto barra elegimos img y

play34:36

elegimos paisaje otra vez vamos a usar

play34:37

la misma vamos a ponerle el paisaje

play34:41

d en el texto alternativo y vamos a

play34:43

agregarle una clase class

play34:47

a esta tarjetita y en bajo y en bajo

play34:50

imagen recuerden que la clase yo la

play34:53

pongo que adelante pero la pueden poner

play34:54

acá mismo también o la pueden poner acá

play34:57

mismo también sin ningún problema lo que

play34:59

nunca hay que hacer es hacer por ejemplo

play35:02

tenemos la clase 3 de imagen y agregar

play35:04

otra clase y agregar la así

play35:06

poner las

play35:08

imagen por ejemplo algo así esto no va a

play35:11

funcionar bien esta última no la va a

play35:13

tomar siempre en este caso a tomar la

play35:15

primera así que no hagan esto si quieren

play35:17

hallar otra clase obviamente deben acá

play35:19

mismo dentro del mismo atributo class

play35:20

agregar un espacio y la siguiente clase

play35:23

que quieran tener y le agregan ahí es

play35:24

sin problema bien después vamos a crear

play35:28

un título que sea un h 4 con que tenga

play35:31

un texto por ejemplo

play35:33

viaje número uno algo así le vamos a dar

play35:37

la clase

play35:39

tarjetita hay un bajo y un bajo título

play35:41

vamos a ir a un texto descriptivo

play35:45

loren

play35:47

vamos a darle un poquito más corto que

play35:49

llegué hasta acá por ejemplo perfecto

play35:51

creo que es un poquito más corto también

play35:54

algo así y le vamos a dar la clase

play35:57

tarjetita y un bajo bien bajo el texto

play36:02

y por último un botoncito abajo button

play36:06

class

play36:09

tarjetita y en bajo de un bajo botón

play36:13

y le vamos a poner ver más algo así

play36:16

algo así va a ser nuestra tarjetita y

play36:18

vamos a ver cómo está funcionando acá

play36:21

bien perfecto

play36:23

vamos primero que nada a estilizar la un

play36:25

poco vamos a abrir nuestros ss y vamos

play36:27

trama la tarjetita y le vamos a decir

play36:30

que tenga un background color en este

play36:33

caso va a ser con el mismo rossi

play36:34

personas para el encabezado así usamos

play36:37

este mismo color y vamos a chequear que

play36:39

esté funcionando bien y ya tenemos

play36:41

nuestras tarjetita con el vaquero color

play36:43

lo que está pasando es que todo con todo

play36:47

el ancho porque es un tip obviamente va

play36:49

a ocupar todo el ancho así funcionan los

play36:50

elementos del bloque pero lo podemos

play36:52

solucionar muy fácilmente así que vamos

play36:55

vamos a hacer una cosa vamos a duplicar

play36:57

esta tarjeta dos veces más así nos

play36:59

quedan tres iguales y ya vemos acá

play37:01

tenemos tarjetita la segunda tarjetita y

play37:03

la tercera tarjetita así que si es

play37:06

tarjetitas le damos display flex

play37:09

nos debería poner una lav la otra cierto

play37:11

si quieres vamos a probar vamos a llamar

play37:13

tarjetitas y le vamos a decir que tenga

play37:16

display flex y vamos a ver qué pasa con

play37:18

estas tres tarjetas que tenemos ahora y

play37:20

vemos que intentan

play37:22

acomodarse una a la otra de hecho si

play37:24

alejamos el navegador que está pasando

play37:26

se están acomodando una al lado de la

play37:28

otra de hecho no las podemos llegar a

play37:30

ver incluso porque se van porque las

play37:31

imágenes son grandes de hecho la imagen

play37:33

tiene tamaño y lo que me parece a mí que

play37:36

está pasando esta imagen es demasiado

play37:37

grande y por eso no deja que se vea la

play37:41

tarjeta tarjeta lo podemos solucionar

play37:42

quizás si lo podemos solucionar si le

play37:45

decimos que tarjetita

play37:47

imagen tenga un ancho de

play37:50

300 píxeles por ejemplo y ya vemos que

play37:54

hay ahora si teniendo el navegador en el

play37:56

zoom que tiene que tener se ven las tres

play37:58

tarjetas

play38:00

así que vamos a intentar ahora sí a

play38:02

acomodar las un poquito mejor

play38:04

qué podemos hacer vamos a aplicar varias

play38:07

cosas primero que nada quiero probar si

play38:09

en lugar de 300 píxeles no le doy un

play38:11

ancho fijo sino que le digo que tenga

play38:13

100% ahí está eso que quería lograr lo

play38:16

que está pasando es que obviamente con

play38:18

display flex intenta acomodar todos los

play38:20

ítems como hablo del otro entonces le da

play38:22

a su contenedor un ancho fijo lo que

play38:25

pasa con las imágenes es fíjense lo

play38:27

siguiente es lo en lugar de esto voy a

play38:29

hacer que tarjetita tenga un ancho de

play38:31

300 píxeles

play38:32

y vemos lo que pasa las imágenes se

play38:35

comportan de una forma un poco extraña y

play38:37

lamentablemente para solucionarlo casi

play38:40

siempre si queremos que esta imagen no

play38:41

sobresalga de su contenedor a la misma

play38:44

imagen hay que aplicarle un quiz o en su

play38:46

defecto y creo que lo mejor un max wheat

play38:49

para que como máximo mira 100% de su

play38:52

contenedor en este caso ahí se soluciona

play38:54

ahora si nuestra imagen mide como

play38:56

muchísimo como máximo el 100 por ciento

play38:59

detrás de la tarjetita digamos

play39:03

y por eso es que pasa esto el display

play39:06

flexo no está conjugando los internos

play39:08

con un 33% cada uno de ancho en una

play39:10

pantalla pero la imagen como sobresalen

play39:13

uno dejaba ver todos entonces

play39:14

simplemente del mundo leer un max with

play39:16

the 100% la imagen lo que hace es que

play39:18

ocupe como máximo el ancho de tarjetita

play39:21

y por eso ahora ya no se escapan entre

play39:23

sí entonces qué más podemos hacer para

play39:26

acomodar un poco mejor todo esto hasta

play39:29

nuestro nuestro display flex tarjetitas

play39:32

le podemos decir que tenga un padding

play39:34

por ahí para separarlo de los costados

play39:36

primero que nada vamos a darle un país

play39:38

de 60 pixels capas más no vamos a darle

play39:42

si vamos a darle 60 a ver qué tal bueno

play39:44

está bien así de 60 me parece sería un

play39:46

padding a todos los costados de

play39:48

tarjetitas tarjetitas recuerden es la

play39:50

sexo que tenemos y dentro de ella

play39:52

tenemos cada unas tarjetas con el color

play39:54

de fondo rosa por eso el fondo de

play39:56

tarjetitas se ve blanco eso está

play39:58

perfecto así y lo que también podemos

play39:59

hacer es darle un gap

play40:01

a estas tarjetitas entre sí y la forma

play40:03

de hacerlo sería también

play40:05

al mismo a la misma sección darle un gap

play40:08

que queramos de separación entre cada en

play40:10

las tarjetas lo que va a hacer es

play40:12

agregar

play40:14

un espacio entre cada uno de sus hijos

play40:16

entre cada uno elementos flex que tiene

play40:18

dentro

play40:21

y quedaría solamente un poco estilizar

play40:23

un poco todo esto para que no esté tan

play40:24

tan pegado los bordes y no mucho más la

play40:27

verdad así que vamos a darle a tarjetita

play40:30

por ejemplo

play40:31

un border radius para hacerlo un poquito

play40:34

más lindo 30 píxels algo así y fíjense

play40:37

también que acá la imagen se está

play40:39

comportando un poco raro y es porque

play40:41

está por encima del dif y por eso no

play40:43

podemos ver el bordes radios en la parte

play40:46

superior la forma de solucionarlo sería

play40:48

a la tarjetita misma darle un overflow

play40:51

hidden para que todo lo que sobresalga

play40:53

de su contenido todo lo que está adentro

play40:55

y sobresale de sus de sus bordes no se

play40:59

vea se oculte y entonces allí la imagen

play41:01

ya se corta donde queremos e incluso el

play41:03

botón aquí bajo que antes también se

play41:05

veía sobresaliendo ya no sobresalen de

play41:08

ese borde en radios perfecto

play41:13

y no mucho más después quedaría por ello

play41:15

como grupo con los espaciados acá

play41:17

como decimos la vez pasada pues nos

play41:19

podemos poner un margen a la imagen a

play41:20

esto y a esto para que se separen los

play41:23

asistentes entre sí otra forma de

play41:25

hacerlo en este caso podemos la

play41:27

tarjetita misma que es fijense tarjetita

play41:29

tiene cuatro hijos tiene una imagen un h

play41:32

4 un párrafo y un botón podemos

play41:35

simplemente tarjetita darle un display

play41:37

flex lo que va a pasar ahora se va a

play41:40

romper un poco todo porque caudé los

play41:41

items están intentando ponerse al

play41:43

costado y ahora como no se ven por el

play41:45

ave oncología no los podemos ver pero si

play41:47

le damos un flex direction

play41:50

columna ahora si los ítems se van a

play41:53

volver a ver vamos a tener cada uno

play41:54

abajo del otro

play41:57

y simplemente es dándole cap

play42:00

el gap que queramos a quería poner de 20

play42:02

píxels a los ítems de la tarjetita que

play42:06

recuerden son la imagen el título el

play42:08

párrafo y el botón ya se empiezan a

play42:11

separar entre sí así como queremos

play42:13

genial vamos a darle también un patín a

play42:16

los costados a cada una de las tarjetas

play42:18

para que nuestro contenido se separe de

play42:21

los bordes laterales así que vamos a

play42:23

darle un padding online de unos 10

play42:26

píxeles quizás algo así

play42:30

y lo que pasa acá es que los demás que

play42:33

también se separan y eso no queremos que

play42:35

pase

play42:37

así que podemos ver cómo lo solucionamos

play42:38

vamos a sacar este padre island y la

play42:41

forma de solucionarlo sería a cada uno

play42:43

de estos ítems darle por ahí margen a

play42:45

los costados

play42:46

o incluso lo que podemos hacer es estos

play42:49

ítems de abajo encerrarlos en un 10

play42:52

nuevo y la imagen dejarla por separado y

play42:54

ahí en este caso

play42:56

tarjetita tendría sólo dos hijos la

play42:58

imagen vamos a probarlo así lo

play43:00

visualizamos mejor pero primero que nada

play43:02

voy a separar una de las tarjetitas para

play43:04

poder visualizarlo bien a esto está la

play43:06

tarjeta que vamos a modificar solamente

play43:07

vamos acá mismo agregar un dip

play43:11

a cada uno estos elementos al h4 alpe y

play43:13

el botón los vamos a meter dentro de ese

play43:15

día entonces ahora tarjetita tiene dos

play43:17

hijos tiene la imagen y este día que va

play43:20

a tener la clase

play43:22

información por ejemplo

play43:24

perfecto entonces ahora tarjetita de

play43:28

display flex solamente va a tener

play43:30

afectadas la imagen y el dip que

play43:31

contiene todo esto

play43:34

pero ahora si este tipo de información

play43:36

podemos llamarlo aquí en el css y

play43:39

decirle que tenga un padín in line

play43:43

padín inline de unos 20 píxels y vemos

play43:48

acá en este de la izquierda que es el

play43:49

único que modificamos que tiene para

play43:51

dictar los costados y se separa del

play43:53

contenido del borde lateral

play43:57

y ahora si el egap que le ponemos

play43:59

tarjetita para dejar uno que es un

play44:01

poquito más chico para que no se separe

play44:02

tanto

play44:04

y lo que puede tener también él

play44:07

el libre información es para padding

play44:11

botón para que se separe este botón del

play44:13

borde inferior así que le vamos a poner

play44:15

también un fácil botón de 20 píxeles

play44:19

y fíjense que lo que hice acá es

play44:20

básicamente desgranar tres países así

play44:22

que lo podríamos hacer también así

play44:23

padding arriba va a tener cero pero en

play44:26

todo lo demás lado va a tener 20 píxeles

play44:29

y lo podemos llamar así y simplemente va

play44:31

a tener tops

play44:32

0-20 botón de 20 y left de 20 iba a

play44:36

funcionar exactamente igual digamos

play44:39

y lo que podemos hacer ahora sí es

play44:41

eliminar las tarjetitas de abajo y

play44:43

dejarlas igual que la de arriba para qué

play44:46

funciona exactamente igual que en las

play44:48

tres igual es genial

play44:52

bueno nada ahí puse un montón de flex

play44:55

box bastantes propiedades hay muchas que

play44:58

no use el extra direction la usamos

play44:59

vamos a ver si hay algo que quiero

play45:01

contarles bueno estos defectos y textos

play45:04

ya lo usamos ya lo vimos

play45:10

flex de dirección lo mismo flex rap en

play45:14

este caso no lo necesitamos no es algo

play45:16

que tampoco

play45:17

muchísimo acomodando elementos con flex

play45:21

vamos a ver

play45:23

esto perfecto sí creo que vivimos

play45:27

así había algo más que les quería

play45:29

mostrar alain items ya lo vimos a con

play45:31

frecuentes también los que más se usan

play45:32

la verdad son bueno básicamente display

play45:34

flex flex a direction satisfy content y

play45:37

alain items para acomodar un poco los

play45:39

elementos pero supongamos que tenemos la

play45:42

tarjetita del medio la del centro le

play45:43

vamos a poner tarjetita

play45:46

principal

play45:48

entonces vamos a llamar a tarjetita

play45:50

punto principal y le vamos a decir que

play45:52

tenga

play45:54

un ancho de 600 píxeles y vamos a ir a

play45:57

nuestro html y vamos a ver que ahora la

play46:00

del medio tiene un ancho diferente a las

play46:02

otras dos

play46:03

esto se puede hacer así y fíjense que

play46:05

las dos digamos las tres ocupan todavía

play46:08

el 100% del ancho vamos a llamar

play46:11

vamos a en lugar de 600 que tenga 900 y

play46:14

vamos a ver que ahora es más ancha que

play46:16

las demás y hay otra forma de solucionar

play46:19

esto porque fíjense que no siempre en

play46:22

1900 esto se va adaptando de acuerdo al

play46:25

ancho de nuestra pantalla eso está

play46:27

buenísimo también porque no nos fuerza

play46:30

que tengan 900 porque yo también 900

play46:32

píxeles sería gigante y las otras no

play46:34

entrarían por eso se va acomodando así

play46:35

como un navegador lo decide también lo

play46:38

bueno que tiene es que todas ocupan el

play46:39

mismo alto se van acomodando en eso

play46:41

también

play46:43

entonces flex está buenísimo para estas

play46:45

cosas porque nos acomoda las cosas

play46:47

bastante orgánicamente y no tenemos que

play46:49

forzar anchos en todas partes

play46:52

pero lo que le quería mostrar es que hay

play46:54

otra forma de hacer esto supongamos que

play46:57

por nuestro contenido las tres no son

play46:58

iguales en tamaño hay una forma de

play47:01

solucionarlo que es simplemente si

play47:03

queremos que todos los hijos de nuestro

play47:06

contenedor tengan el mismo ancho es

play47:09

darle un flex 1 y lo que va a hacer es

play47:12

que todas tengan el mismo ancho sí sí

play47:14

ahora por ejemplo vamos a hacerlo así

play47:16

más fácil no vamos a cambiar esto a la

play47:19

primera le vamos a poner tarjetita 1 a

play47:22

la segunda tarjetita 2

play47:25

y la tercera tarjetita 3 y ahora sí en

play47:29

nuestro css vamos a llamar a cada una

play47:31

tarjetita 1

play47:34

tarjetita 2

play47:39

tarjetita 3 perfecto y supongamos que

play47:43

queremos que tenga un ancho de 200

play47:45

píxeles

play47:47

un ancho de 500 píxeles y un ancho de

play47:52

900 píxeles el navegador no va a

play47:54

respetar estás medidas siempre porque va

play47:56

a depender siempre el contenido de los

play47:57

elementos flex pero sí que va a tratar

play47:59

de mantener esta proporción fíjense que

play48:01

la primera va a ser más chica que la

play48:03

segunda y la segunda va a ser más chica

play48:05

y la trasera y así exactamente funciona

play48:07

si achicamos la pantalla vamos a ver que

play48:10

siempre va a tener esta relación de

play48:12

aspecto pero no siempre van a mirar

play48:13

exactamente lo que le dijimos que mirar

play48:15

simplemente va a mantener la relación de

play48:17

tamaños

play48:19

cuando se lo aplicamos a uno solo lo que

play48:22

hace el navegador es calcular el ancho

play48:24

de todas primero dividiendo el ancho

play48:27

total que tenemos por la cantidad de

play48:29

elementos que hay le va a dar ese ancho

play48:31

a cada uno internamente en nueve horas

play48:33

de trabajo y después fuerza esa

play48:36

proporción respecto al ancho que le

play48:37

asignemos a unos elementos

play48:40

y por ende los tres obviamente va a

play48:41

tomar ese ancho de referencia para

play48:43

mantener esa proporción y esa relación

play48:45

entre los ítems entre sí

play48:48

la diferencia con usar el flex y el

play48:50

numerito es que

play48:52

esta propiedad de flex laborismo que lo

play48:55

usemos si le ponemos flex uno a cada uno

play48:58

fíjense que van a tener los tres del

play49:00

mismo tamaño

play49:04

ahora mismo por el contrario si por

play49:06

ejemplo a tarjetitas dos le ponemos flex

play49:08

2 lo que va a hacer es que esta tarjeta

play49:10

va a decir exactamente el doble que las

play49:13

demás es decir si ésta mide 100 pixels

play49:15

estaba a 1200 para 1100 también si le

play49:18

ponemos por ejemplo 1.5 va a medir el

play49:21

mismo que esto pero es que conforman 5

play49:23

digamos y esa es la proporción que van

play49:25

teniendo es como una proporción entre

play49:27

cada uno de los sitios

play49:29

lo mismo si le pongo 6 acá para mí era

play49:31

extremadamente grande porque va a medir

play49:33

6 veces lo que mide cada una de las

play49:35

demás y con esto podemos ir jugando

play49:38

entre ellas para ir generando diferentes

play49:40

diferentes opciones y laborismo para que

play49:42

lo pueda ir probando y ver qué cosas se

play49:44

pueden hacer entre elementos flex

play49:47

y nada no mucho más pero bueno lo que le

play49:50

quería mostrar en realidad era que si en

play49:51

algún momento por cuestiones del

play49:53

contenido de nuestros nuestros elementos

play49:55

nos quedan diferentes tamaño por ejemplo

play49:58

si yo tuviera que este texto un poco más

play50:00

largo vamos a ver qué pasa

play50:03

fíjense que simplemente teniendo el

play50:05

texto más largo y que no sean

play50:07

exactamente iguales en contenido ya está

play50:09

me queda muchísimo más grande y la forma

play50:11

de solucionarlo era esta que les decía

play50:13

de a todos los hijos aplicarles flex 1

play50:18

y así básicamente hacemos que todo se

play50:21

igualen en tamaño es decir a tarjetitas

play50:23

a cada unas tarjetitas estoy aplicando

play50:25

flex 1 es como si por separado a

play50:28

tarjetita 1 vamos a verlo

play50:31

como si por separado la tarjetita 1 2 y

play50:33

3 les pusiera flex 1

play50:38

hace eso igual a su tamaño igual a su

play50:40

proporción para que todas midan

play50:42

exactamente lo mismo dentro de su