Curso de HTML y CSS | Clase 5 — Flexbox

Summary

En 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.

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

hola chicos bueno bienvenidos otra vez y

hoy vamos a ver un repaso de la clase

número 5 de flex box

así que arranquemos primero que nada

les voy a pasar y nunca lo dije tampoco

pero siempre dejo en la descripción del

vídeo un link de drive con los archivos

que use para el vídeo por si les sirve

descargarlo y verlo

en todo lo que yo voy usando en los

vídeos siempre lo pongo en la

descripción

con eso un link de drive con los

archivos que mostrando en el vídeo en

este en particular también voy a dejar

este link de la documentación de

mozilla

sobre flex box que por ahí les puede

servir y es lo que subir usando de guía

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

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

explicar todo del nuevo periodismo con

el profe en la clase pero voy a

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

sitio

con

componer las cosas que más se usan lo

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

box que la verdad que se usa muchísimo

así que van a ver que se pulsan en todo

e incluso anidar tips que con flex box y

todo así que vamos a pasar a eso voy a

pasarse entonces este dictamen la gente

del vídeo y arranquemos tengo la clase

número 5 ya una carpeta con una carpeta

de imágenes de unas cositas que voy a

usar tenía acá una imagen que detener a

ver si lo tengo acá en realidad si esta

imagen la clase 5

perfecto bien así que voy a abrir la

visual studio como siempre abrir code

y vamos a arrancar como siempre desde

cero para mostrar todos los pasos otra

vez vamos a crear un archivo nuevo que

sea el index html y dentro vamos a crear

nuestras en castex inicial de

html

y vamos a ponerle un título vamos a

ponerle carpe viajes a través vamos a

seguir en la página de viajes y vamos a

crear una carpeta de styles donde vamos

a meter nuestro archivo style punto se s

acá bajo el title vamos a limpiar este

style recuerden sling 2.0 se s y con

esta recomendación del viso les pidió

que ya podemos directamente tener toda

esta estructura y simplemente habría que

borrar esto y escribir la ruta hacia

nuestros archivos ese es el perfecto

vamos a también como siempre crear un h

1 y probar que todo funcione vamos a

hacer un hola mundo en el index y

hacerlo de color rojo

en el css para checar que todo funcione

y vamos a abrirlo con el life server

dandole click through life' y ya tenemos

nuestro la mundo con el título de carpi

viaje es perfecto todo funciona

perfectamente así que vamos a eliminar

esto vamos a eliminar esto y vamos a

empezar también como siempre a construir

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

poquito más completo y por ahí repasar

un poco de cosas de clase has de ver

camión así que vamos a arrancar

entonces tenemos nuestro header donde

vamos a meter nuestra máquina navegación

así que esto se hace con la etiqueta now

tiene ave corta y ya tenemos nuestra

etiqueta esto simplemente semántica

no es necesario que sea así y cientos

fueran tips funcionarían exactamente

igual esto es importante que quede claro

las etiquetas heather la etiqueta nada

la etiqueta footer en todas estas

etiquetas que tienen un nombre y son

contenedores por lo general funcionan

visualmente exactamente igual que un dip

pero es importante que tengan su nombre

porque son etiquetas con valor semántico

es decir para el navegador tienen un

significado el navegador espera que haya

cierta información en particular y

dentro el navegador a espera que dentro

de las etiquetas no haya un menú de

navegación entonces está bueno que las

usemos correctamente

bien vamos a crear nuestro menú de

navegación va a ser una lista y dentro

de nuestros ítems vamos a crear una ley

de inicio dentro tiene que tener el link

también así que vamos a hacer el apache

ref y vamos a llamar a punto barra index

index html que sería esta misma página

vamos a poner a inicio y voy a crear

antes dos archivos más que van a ser

quienes somos punto html y

contacto punto html así ya lo tenemos

también

y de hecho estos dos archivos vamos a

meter una carpeta que se llame fuera de

styles y que se llame faces

y ahí dentro vamos a meter contacto y

quiénes somos perfecto así que vamos a

crear los ítems del menú para estos dos

vamos a abrir otro l y vamos a hacer el

a h ref y dentro tenemos que llamar a

los archivos paramos ponemos punto barra

como siempre para que hubiese el juego

que nos recomiende que hay que poner

adentro y tenemos la carpeta imágenes el

index que ya lo limpiamos aquí arriba la

carpeta basics que es la que queremos y

la carpeta styles que son básicamente lo

que tenemos acá en la carpeta root en la

carpeta raíz de nuestro proyecto así que

a mostrar la carpeta page y vamos a

elegir quiénes somos y ahora si ponemos

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

contacto con un hr punto punto barra un

segundito

a este punto barra entramos a país y

elegimos contacto cerramos comillas y

aquí dentro le ponemos contacto bien si

guardamos y vamos a nuestro navegador

vemos que tenemos la lista que armada

así que vamos a empezar a hacer grupo

con nuestro css

antes que nada igualmente afuera de la

napa voy a agregar el logo

que vamos a usar para este proyecto

vamos a abrir una etiqueta de img

si lo ponemos sin el signo de mayor

podemos escribir simplemente img y acaba

disolución una recomienda la primera que

aparece es la correcta y ya podemos

escribir que directamente la ruta de la

imagen que sería punto barra elegir la

carrera de imagen y elegir el logo y en

alto vamos a ponerle luego simplemente

el logo de carpi viajes

ahí está perfecto

y ahora sí entonces vamos a pasar a

escribir un poco de html

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

css y primero que nada como siempre

importantísimo el reset tenemos que

hacer acá arriba de todo

tenemos que agregarle un margen de 0

badín de 0 y box 6 y border box

importantísimo para que los padres no

nos rompan nada y los bordes tampoco y

ahora sí bueno de paso ya que estamos

haciendo la parte superior vamos a

buscar una tipografía vamos a tragar

fondos punto google.com y vamos a elegir

una que no sea el único que ya lo usamos

del vídeo pasado

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

por ahí

bueno vamos a elegir esta carnet que

está interesante y vamos a elegir

entonces a fin 100

las 300 400

600 y 87 800

ahora si así está bien no va a hacer

falta más no creo que usemos más

acá podemos verlas ya legislación 300

400 600 800 y siempre con la opción de

import lo podemos copiar directamente al

importe y pegarlo también importantísimo

esto va arriba antes del reset y en

nuestra vez el mismo podemos hacer que

todo nuestros sitios de encarta

tipografía así que lo que hay que hacer

es copiar esta línea de aquí abajo la

pegamos acá y ya está perfecto ahora

todo nuestro sitio va a tener esa

tipografía podemos comprobarlo si ya lo

vemos que realmente ya no estará acá acá

abajo del menú y tenemos esa tipografía

y ahora lo que hay que hacer es acomodar

un poco todo esto bien vamos a ponerle

una clase a nuestra imagen la clase logo

y a nuestra navarra le vamos a poner la

clase

harvard a la ue le le vamos a poner otra

casa también que va a ser un amparo en

bajo y bajo menú para usar un poco de

bem y a nuestro sistema de lista esto lo

pueden hacer con la tecla alt si yo clic

aquí mantengo mantengo apretado la tecla

alt en windows y hago clic en todo el

lugar donde quiero escribir por escribir

los tres al mismo tiempo pongo un

espacio y acá le agregara los tres la

misma clase que va a ser la clase menú

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

solamente la clase menú ahora sí

perfecto entonces tenemos nuestra imagen

con la clase logo nuestro napar con la

clase na para y nuestro menú con la

clase menú y cada with el del menú con

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

perfecto así que vamos a nuestro css

ahora sí y vamos a empezar a estilizar

un poco todo primero que nada lo que

quiero hacer es que esta imagen sea

bastante más chica así que vamos a

llamar a la clase logo que como tenemos

la imagen nombrada y le vamos a decir

que tenga un ancho de 100 píxeles por

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

genial

y después ahora sí vamos a empezar a

editar nuestro nuestro menú lo primero

que voy a hacer es ponerle color de

fondo al header para qué

se puede distinguir lo que estamos

haciendo así que vamos a abrir la

etiqueta header simplemente sin clase le

vamos a poner un background ba ground

color

escribí algo mal de nuevo para crear un

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

yo lo que hago siempre es poner red

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

es por seleccionar el color que quiera

ahí está vamos a elegir un rosita como

siempre

algo así

y ahí está vamos a llegar que funciona y

ya tenemos nuestros fondos del

encabezado de color y perfecto

voy a pasar luego abajo así que

ordenadito todo esto en el orden que

vamos haciendo y vamos a llamar ahora a

nuestra navarra y a nuestro menú vamos a

empezar por el menú primero y vamos a

empezar a usar un poco de flex box vamos

a llamar a la clase menú y como vemos

acá están uno abajo del otro y nosotros

queremos que esté uno al lado del otro

la forma de hacerlo hasta ahora que

teníamos era poner la display in line

line blog a cada una de los ítems o sea

llamar a menú ítem y ponerle un display

in line y lo que va a hacer es ponerlos

uno al lado del otro pero hay una forma

que tenemos mejor para solucionarlo

ahora que funciona mejor que está un

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

que se utiliza ahora para este tipo de

soluciones que es simplemente a menú que

es recordemos nuestra web

donde tiene cada uno estos elementos

darle un display flex

recordemos que display flex se utiliza

en el padre siempre nosotros queremos

acomodar esos ítems perfectos display

flex se le pone a su padre directo no a

navarra sino a menú que estrictamente su

padre el padre de cada google dos ítems

si lo ponemos a la par lo que estaríamos

haciendo es aplicarle todas las

propiedades trex como hijo a la huele

pero no a cada uno estos elementos por

eso es importante que el display se

aplique al padre directo de los interés

que queremos acomodar en este caso el

menú va a tener de flex y si vamos al

navegador sabemos que se pusieron uno al

lado del otro lo que también queremos

sacarle esta viñeta que tienen esto

recordemos a la web le damos un list

style type none y automáticamente se nos

elimina la viñeta perfecto

y ahora lo que queremos es que estos

ítem del menú queden a la derecha del

logo del logotipo si está en el menú que

en uno al lado del otro es decir en los

7 merlo como se suele hacer así tanto la

img que es el logo como el nap que es

otro hijo de heather ambos son hijos de

género entonces lo que podemos hacer es

darles play flex al header para que

estos ítems se coloquen uno al lado del

otro y trabajar y funcionen como

elementos flex perfecto entonces

bastaría solamente contarle el display

flex a nuestro género

porque es el padre directo de estos dos

ítems que queremos modificar la imagen y

la napa y si vamos al navegador ya vemos

que funciona perfectamente y nuestro

logo y nuestro

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

otro

perfecto quizás ahora lo que queremos es

alejarnos un poco acomodarlos un poco

que queden centrados así que vamos a

trabajar en eso recuerden siempre

podemos inspeccionar elementos para ver

cómo están funcionando estos estos

elementos voy a ponerlo abajo para que

se vea mejor

y le voy a explicar también de paso un

poco esta parte de diseccionar que por

ahí nunca la barca vamos demasiado

en cada navegador es un poco diferente

pero por lo general lo importante son

estas dos secciones que me parece que

por defecto aparece a la derecha y

digamos funciona exactamente igual si

sacamos esto en chrome tenemos lo mismo

tenemos arriba nuestra estructura html y

abajo las clases css que afectan a cada

uno de los elementos por ejemplo si yo

selecciono menú le hago clic en la parte

de abajo me va a aparecer el css que

afecta a menú que es lo que acabamos de

poner nosotros el display flex y el list

style type none

lo mismo si le hago clic a heather por

ejemplo tiene nuestro patrón color

rosita y nuestro display flex que le

pusimos recién ayer e incluso este lado

no figura el archivo en el que está y la

línea en la que está por ejemplo que

dice está el css la línea 10

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

efectivamente tenemos nuestro género con

los estilos que aparecen allí y está

bueno e incluso si quieren ir probando

cosas para ver si funcionan pueden

modificarlo pueden modificar el color

desde acá mismo y verlo en navegar

directamente

supongamos que queremos poner un rojo

así y queremos

que tenga una altura lo podemos poner a

cada height de 200 píxeles y pasen el

tipo de cosas se puede ir probando lo

que sí pasa es que si apretamos f5

recargamos la página estos cambios se

van a borrar obviamente nos quedan

guardados en el archivo pero si sirven

para ir probando cosas para no tener que

estar suscribiendo el archivo si quieren

probar cómo queda un background color

celeste acá lo pueden probar y si le

dicen bueno este es el que quiero así me

gusta lo voy a dejar así se pueden

copiar el color y llevárselo css y

pegarlo acá sin problemas y ahora si al

guardar se va a quedar eso para eso

sirve la parte de inspeccionar pero

bueno perfecto vamos a chequear cómo

está funcionando esto también en el

inspección al elemento se hacen clic en

un elemento en particular y del

intencional ese ítem ya se selecciona en

la parte de html entonces bueno para

saberlo

y perfecto tenemos nuestro anapar y nos

da ing fíjense que la napa

está ocupando todo el alto ahí nos marca

que nos preocupa todo el alto del género

entonces para acomodar los elementos y

centrarlo verticalmente habría que

modificar esto de la anap para perfecto

vamos a meternos un poco en eso primero

que nada por ahí separar un poco el logo

y ganar palmas cierto que son estos dos

la img y el lado entonces lo que hay que

hacer es aplicar estilos en el header

mismo que es el padre de ellos al que le

dimos en réflex así que en el mismo

header donde hicimos iplex le vamos a

poner por ejemplo

just y faith content center vamos a ver

qué pasa vamos a guardar y vemos que los

dos ítems se centraron

perfecto

pero lo que queremos no es que estén

centrados sino que estén a la derecha

como estabas pero que tengan un espacio

entre ellos entonces podemos probar

otras propiedades active hay content

como por ejemplo

bueno flex start sería lo que viene por

defecto y por eso es que están a la

izquierda reflex en y se van a ir al

final y si le ponemos un space between

por ejemplo lo que va a hacer es que van

a tener todo el espacio que sobre entre

ellos

y ambos se van para las para las puntas

del documento no queremos que haya

tantos pasos y que probemos space around

lo que va a hacer es

hacer que haya un espacio entre ellos y

también un espacio alrededor y por

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

espacios entre los ítems y entre los

bordes exteriores sean exactamente

iguales pero ninguna estas opciones es

la que queremos entonces vamos a

directamente sacar esto de xàtiva y

counter y hay una propiedad que está

bueno saberla y que está bueno probarla

usarla porque sirve mucho que es la

propiedad de lan

nunca lo que va a hacer es agregar un

espacio el espacio que nosotros le

digamos entre cada uno de los ítems

hijos de este contenedor donde estamos

aplicando display flex por ejemplo si yo

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

va a hacer es poner un espacio de 10

píxeles entre los dos elementos en este

caso que tenemos como hijos

si yo pusiera un gap de 60 píxeles el

espacio que va a haber es de la pixels

entre cada uno entonces quizás para este

caso donde no necesitamos que se centren

y que estén

en diferentes posiciones del documento

simplemente queremos que tengan una

mínima separación podemos simplemente

agregar un gap de 20 pixels y ya se van

a separar así recuerden este esta

propiedad de gap o también se pueda

escribir así escribir guión gap

funcionan igual son lo mismo recomiendo

que si pueden usar las dos al mismo

tiempo porque hay algunos navegadores

viejos como el safari en versiones

anteriores que no soportan gap pero si

grygera o al revés no me acuerdo bien

entonces está bueno si pueden dejar las

dos puestas está buenísimo

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

navegadores así que es genial

lo que hace es agregar un espacio entre

los elementos de flex a los hijos flex

que estamos generando desde acá desde

header con el display flex pero

solamente funciona con un elemento que

tiene el flex no podríamos aplicar legar

a un elemento por ejemplo acá que no

tiene desperfectos no va a funcionar

para nada de hecho podemos chequearlo si

vamos a inspeccionar el logo vemos que

automáticamente

nuestro navegador nos lo tacha nos lo

ponen gris porque no lo está tomando en

cuenta no está haciendo nada y nos avisa

acá mismo

el navegador nos avisa que no podemos

usar

y en este elemento porque no es un

contenedor flex y un contenedor libre

eso lo vamos a ver en otra clase

pero básicamente no va a funcionar

podemos tener que ponerlo solamente iba

a funcionar solamente si lo tenemos en

un contenedor flex como es este caso del

head perfecto bien ya lo tenemos ha

ordenado como queremos y lo que quedaría

por ahí es centrar esto verticalmente y

también separarlos entre sí para

separarlos vamos a hacerlos antes

podemos hacer lo mismo ponerles un gap

al menú que es el que contienen otros

ítems vamos a ponerle un cap de 10

píxeles por ahí para probar y así

estaría bien y vamos a agregarle grid y

acá solamente

para que funcione mejor en cualquier

navegador y ya tenemos más trocitos bien

separados como queremos lo que quedaría

ahora si es centrarla verticalmente y

nos imaginaríamos que simplemente

poniendo alain items centre esto

quedaría centrado lo que pasa es que si

inspeccionamos y vemos cómo funciona

exactamente y esto va a depender siempre

de que estemos haciendo así que si no

nos si no funciona algo en particular

deberíamos venir acá inspeccionar y ver

qué está pasando si vemos que nuestra

par tiene todo el alto de nuestro

contenedor pero el menú no entonces la

forma de solucionar esto son dos

no lo voy a hacer analizar nuestros las

dos opciones para que veamos cómo

podríamos solucionarlo una de ellas es

simplemente darle al menú una altura del

100% height de 100 por ciento para que

en este caso no tome el 100% de su

contenedor que es la anap está la misma

nada que tenemos acá que como vemos es

el contenedor de huele el padre y esto

nos va a solucionar el problema y ahora

si tenemos

nuestro huele con los items centrados

y hay como un espacio un poco raro pero

solo que por el mismo organismo altura

de la tipografía no quedan exactamente

centrados eso lo vamos a acomodar pero

de todas formas ahí ya vemos que se

centra porque ahora si nuestro huele

mide el 100% de su padre al ponerle

alicientes y por ciento funciona

perfectamente la otra opción a contentar

que también es varias y se puede usar

perfectamente y creo que es la que yo

elegiría la verdad es simplemente a lana

para vamos a llamarla en otro css vamos

a formar anapar y le vamos a decir que

tenga display flex

alain items centre para que pase

exactamente lo mismo

vamos no se guardó esto

vamos a chequear ahí está perfecto así

pasa exactamente lo mismo vemos que

nuestro huele sigue siendo así de

bajitos igual que es un contenido ya no

al 100% ya le sacamos la altura del 100%

pero la napa al ser gay pride flex

tiene un solo hijo pero funciona

exactamente igual y darle alain interest

center lo que hace es simplemente a

todos sus hijos que en este caso es no

sólo centrarlo verticalmente

tenemos que dar los hijos y después flex

porque alain intensa enter sólo no

funciona vemos que acá pasa lo mismo se

pone en gris porque no funciona alain

item center pero dándole display flex ya

podemos usarlo así también y funciona

exactamente igual no hace falta darle un

100% al menú sigan aparte nos entra el

menú digamos en lugar de estar centrando

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

a line y se encenderá menú lo que

estamos haciendo es darle display flex

al anapar para que no se entren en

nuestro mismo entero

pero el resultado final visualmente es

exactamente el mismo

perfecto

vamos a pasar ahora ya tenemos terreno

armado si hacemos clic nos lleva a los

archivos que queremos

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

funciona bien perfecto y vamos a ya que

estamos

ok ya que estamos vamos a darle un color

en otra mano items menú ítem y vamos a

darle un color white y un text

decoration

none para sacarle subrayado que tienen

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

ítem es la clase de ley y nosotros

queremos como siempre les recuerdo a

afectar al ancor al link tenemos que

llamar directamente al link así que

simplemente agregamos una acá con

espacio para que tome a todos los que

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

ahora sí nos queda así como queremos

y también vamos a por ejemplo a inicio

en este caso vamos a dar la clase active

porque estamos en la página de inicio

que es el index y entonces vamos a

llamar también a menos ítems

punto perdón

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

un text decoration underline

para que nos traten de inicio que he

desgastado perfecto

acá lo que hice fue llamar a la clase

menor ítem que también tienen clase

menor es decir perdón active va a llamar

a todos los elementos html que tengan la

clase militar y la clase activo en

nuestro caso es solamente este porque

todos los demás menos items no tienen la

clase active en este caso si iba a

buscar todos los que haya dentro y le va

a poner text decoration underline que lo

que hace es subrayar el texto vamos a

poner un papel también para que tenga

texto doble tenga subrayado doble perdón

y perfecto ya tenemos otro menú

funcionando perfectamente y vamos a

agregar acá abajo la imagen que habíamos

puesto a la vez pasada

pero lo vamos a hacer un poquito mejor

ahora vamos a abrir una etiqueta de

e-mail porque acá va estar nuestro

contenido principal de la página

y dentro vamos a agregar una sección

sexo

perfecto y dentro de la sección vamos a

tener una imagen y un texto la sección

se va a llamar imagen principal

principal ahí está y dentro vamos a

tener un texto que diga

bienvenidos a karp y viajes perfectos

la imagen principal va a ser una sección

que va a tener la imagen de fondo para

que la podemos usar como imagen de fondo

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

un texto nada más nada nada muy raro y

vamos a llamar a esta clase en el css

así que vamos a tomar la imagen

principal y le vamos a decir que tenga

background imagen con la url de nuestra

imagen

barra

perdón estamos en el css y tenemos que

salir hacia atrás una carpeta así que lo

correcto sería poner dos puntos y una

barra y ahora si nos permite elegir

entre nuestras carpetas de la raíz vamos

a elegir img y vamos a elegir paisaje

punto jpg

recuerden siempre background y mix se

usa con el url paréntesis y comillas y

dentro de las comillas la ruta la imagen

y recuerden que están en la carpeta

styles y quieren ir a una carpeta

hermana tienen que poner dos puntos para

salir de la carpeta styles jaycee podrán

grabar una otra

y perfecto si guardamos vamos a ver que

se ve apenitas la imagen porque tenemos

el texto muy bajito le vamos a altura

imagen principal que tiene una altura de

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

está perfecto así está así me parece

bien

cómodo y vamos a acomodar un poco esta

imagen que tenemos atrás vamos a decirle

que tenga un background repeat de none

repeat la altura la voy a poner arriba

así queda todo lo que pagaron justito

esto no cambia nada esto pues tal en

cualquier orden todo esto me gusta

tenerlo un poquito ordenado por ahí para

leerlo mejor y saber que estoy haciendo

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

en particular y perfecto ya en la imagen

no se repite y le vamos a dar un

background size de cover para que ocupe

todo su contenedor todo el sección de

imagen principal perfecto y vamos a

darle también por las dudas un

background posición de centre center

para que se centre en nuestro contenedor

perfecto y ahora lo que queremos hacer

es llamar a este h 2 y centrarlo como

hacíamos eso

sin flex box la verdad que es muy

complicado pero con flex box es una

solución muy fácil simplemente a nuestra

sección a nuestro contenedor de este h 2

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

este contenedor flex así que imagen

principal le vamos a dar un display flex

display flex si guardamos esto no va a

cambiar absolutamente nada todavía pero

si le ponemos un satisfy content center

lo que va a hacer es alinear a todos sus

hijos horizontalmente en el centro en

este caso tiene un solo hijo pero

funciona perfectamente igual a eso lo

que queremos genial y si le decimos a

alain items center va a ser lo mismo

pero verticalmente y ahora nuestro texto

aparece acá genial lo que podemos hacer

es ahora si llamara imagen principal

h 2 que es nuestra sección con la clase

imagen principal y dentro de sólo un h 2

y le vamos a decir que tenga color white

para qué

se puede leer y vamos a darle también un

fondo de color para que se pueda leer un

poco más como todavía porque cuando

empecemos a crear puede ser que ya no se

lea así que le vamos a decir que tenga

un background color de vamos a ponerle

red solamente para ir viendo los

espacios fíjense que acá queda muy

pegado de los dos lados así estaría

bueno ponerle un pad y a los costados

vamos a ponerle un padding inline que lo

que hacía recuerden es agregar padding

left y paint right y ponerle unos 15

pixels vamos a probar y ahí está

perfecto ya tiene un espacio un poco más

considerable más cómodo para leer y nos

queda tan pegado al borde

y lo que quiero hacer es cambiar de

color black nada más

y ello parece mucho mejor pero también

les quería mostrar

algo para que para que lo conozcan una

propiedad que tenemos acá en css que no

solamente se pueden dar colores sólidos

de fondo se puede hacer si nosotros

posicionamos nuestro cursor acá y nos

vamos los elegimos rgb por ejemplo no

hace falta elegir rgb pero tenemos esta

esta barrita además de la de los colores

los podemos elegir diferentes colores

tenemos esta barrita que es de opacidad

si nosotros arrastramos nuestro

nuestro cursor por acá podemos ir

cambiando la opacidad de nuestro nuestro

color es decir si lo ponemos al 50% va a

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

numerito que aparece acá y termina

parece acaba cambiando si lo ponemos en

0.5 lo que va a hacer es que nuestro

fondo va a ser negro pero con una

opacidad del 50% es decir pasa

translúcido sea puede ver a través de

ese fondo y no va a ser completamente

negro opaco entonces se lea bien el

texto pero también se ve un poco el

fondo y porque si lo quieren probar está

bueno

en el gba fíjense que por lo general

cuando tenemos solamente colores sólidos

tenemos rgb y tres valores que son los

valores de red green y blue desde la

forma de escribir de colores de rege

beige y vamos cambiando de color vamos a

ver que por ejemplo en rojo tenemos 255

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

ni verdad ni acción simplemente es rojo

puro y lo mismo va pasando con los demás

colores se van transformando y bueno en

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

de todos es blanco lo voy a dejar

nuevamente en cero

pero fíjense que cuando yo bajo la

opacidad cambia de rgb a rgb y eso es

y el último el último valor que se

agrega es la opacidad y va entre 0 a 1

es decir uno sería

opaco totalmente opaco y cero si lo

dejamos en rgb a 000 va a ser

completamente transparente y fíjense que

ahí se nota ya no tenemos ningún fondo

lo voy a volver a dejar en 0.5 por ahí

cerquita

para que se vea el fondo negro pero

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

era un poquito mostrarles eso y

avanzamos ya tenemos nuestro texto acá

centrado de hecho si le agregamos por

ejemplo un texto descriptivo aquí debajo

vamos a ponerle el orden

así cortito

y vemos que nos acomoda como queremos

porque se acomodan uno al lado del otro

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

otro lo que queremos para acomodar esto

es darle simplemente a nuestro

contenedor flex

[Música]

flex the direction flex the direction y

flex direction hay varios estos the road

rivers volume rivers la verdad es que

rivers yo nunca lo tuve que usar y se

usan muy poco pero row y columnas son

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

box trae por defecto por eso casi nunca

tampoco lo escribimos pero suele haber

casos en los que se suele utilizar en

este caso vamos a elegir columna lo que

va a hacer es cambiar nuestro sentido

orientación de nuestro contenedor flex

en lugar de acomodar los elementos uno

al lado del otro nos va a acomodar uno

abajo del otro así que vamos a elegir

columna y vamos a ver qué pasa

y ahora vemos que tenemos nuestro título

y nuestro texto justo debajo vamos a

venir acá vamos a darle un par de

estilos al texto imagen principal pe y

le vamos a decir primero que nada que

tenga color white así lo podemos ver

y vamos a ver acá ya tenemos en nuestro

texto lo que quizás queremos ahora es

que el texto no ocupe todo el ancho

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

centrado entonces para centrar lo

primero que nada text align center

siempre eso no cambia

y ya nuestro texto está centrado pero

queremos que por iu no ocupe todo el

ancho como decíamos entonces la forma de

solucionarlo son o darle un ancho fijo a

este párrafo o darle un padding a los

costados en nuestro contenedor en

nuestra imagen principal podemos poner

también un padre inline que recuerda en

el país agrega espacio por dentro

decirse para nuestro contenido de los

bordes del lado interior y si le ponemos

unos 150 píxeles por ejemplo

sabemos que nuestros contenidos empieza

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

para adentro y nos ha trampeado el borde

si nos fijamos inspeccionamos vamos a

ver cómo funciona fíjense nuestra

sección imagen principal tiene un

padding a los costados para inglés y

para dean wright de 50 píxels y ese es

el espacio y violeta que vemos acá en

los costados y por eso el texto no se

estira más que eso vamos a ponerle un

poquito más sólo para que quede un

poquito más prolijo

perfecto y ella tenemos un elemento flex

muy bien armado y fíjense que usamos

flex en varios iguales ya usamos flex en

nuestro header para poder acomodar

nuestro logo con nuestro menú

usamos flex en nuestra parte para poder

centrar nuestro menú acá mismo es en

este caso no usamos flex para como

elementos decisivos simplemente para

acomodar un solo para centrar nuestro

menú pulsamos flex también en el menú

para acomodar entre sí cada uno de estas

cita ante el menú para poder separarlos

poder ponerlos al lado del otro también

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

no lo usamos para nada

y usamos flex también en nuestra sección

de imagen principal

para acomodar estos ítems que tenemos

acá

genial

vamos a hacer un poquito más vamos a ir

a hacer unas tarjetitas como los que

hicimos en el vídeo anterior pero ahora

usando flex y no display in line así que

vamos a abrir otra sección que se llame

tarjetitas con la clase tarjetitas y

dentro vamos a crear una por ahora y

podemos agregar dos más así quedan las

tres una lado la otra como vimos en el

vídeo pasado vamos a crear un libro

las tarjetitas solamente en singular

y dentro va a tener una imagen img src

perdón voy a borrar es directamente el

viaje vivir con esto ahí está elegimos

img y en el cierre se ponemos la otra

imagen punto barra elegimos img y

elegimos paisaje otra vez vamos a usar

la misma vamos a ponerle el paisaje

d en el texto alternativo y vamos a

agregarle una clase class

a esta tarjetita y en bajo y en bajo

imagen recuerden que la clase yo la

pongo que adelante pero la pueden poner

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

mismo también sin ningún problema lo que

nunca hay que hacer es hacer por ejemplo

tenemos la clase 3 de imagen y agregar

otra clase y agregar la así

poner las

imagen por ejemplo algo así esto no va a

funcionar bien esta última no la va a

tomar siempre en este caso a tomar la

primera así que no hagan esto si quieren

hallar otra clase obviamente deben acá

mismo dentro del mismo atributo class

agregar un espacio y la siguiente clase

que quieran tener y le agregan ahí es

sin problema bien después vamos a crear

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

un texto por ejemplo

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

la clase

tarjetita hay un bajo y un bajo título

vamos a ir a un texto descriptivo

loren

vamos a darle un poquito más corto que

llegué hasta acá por ejemplo perfecto

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

algo así y le vamos a dar la clase

tarjetita y un bajo bien bajo el texto

y por último un botoncito abajo button

class

tarjetita y en bajo de un bajo botón

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

algo así va a ser nuestra tarjetita y

vamos a ver cómo está funcionando acá

bien perfecto

vamos primero que nada a estilizar la un

poco vamos a abrir nuestros ss y vamos

trama la tarjetita y le vamos a decir

que tenga un background color en este

caso va a ser con el mismo rossi

personas para el encabezado así usamos

este mismo color y vamos a chequear que

esté funcionando bien y ya tenemos

nuestras tarjetita con el vaquero color

lo que está pasando es que todo con todo

el ancho porque es un tip obviamente va

a ocupar todo el ancho así funcionan los

elementos del bloque pero lo podemos

solucionar muy fácilmente así que vamos

vamos a hacer una cosa vamos a duplicar

esta tarjeta dos veces más así nos

quedan tres iguales y ya vemos acá

tenemos tarjetita la segunda tarjetita y

la tercera tarjetita así que si es

tarjetitas le damos display flex

nos debería poner una lav la otra cierto

si quieres vamos a probar vamos a llamar

tarjetitas y le vamos a decir que tenga

display flex y vamos a ver qué pasa con

estas tres tarjetas que tenemos ahora y

vemos que intentan

acomodarse una a la otra de hecho si

alejamos el navegador que está pasando

se están acomodando una al lado de la

otra de hecho no las podemos llegar a

ver incluso porque se van porque las

imágenes son grandes de hecho la imagen

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

está pasando esta imagen es demasiado

grande y por eso no deja que se vea la

tarjeta tarjeta lo podemos solucionar

quizás si lo podemos solucionar si le

decimos que tarjetita

imagen tenga un ancho de

300 píxeles por ejemplo y ya vemos que

hay ahora si teniendo el navegador en el

zoom que tiene que tener se ven las tres

tarjetas

así que vamos a intentar ahora sí a

acomodar las un poquito mejor

qué podemos hacer vamos a aplicar varias

cosas primero que nada quiero probar si

en lugar de 300 píxeles no le doy un

ancho fijo sino que le digo que tenga

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

que está pasando es que obviamente con

display flex intenta acomodar todos los

ítems como hablo del otro entonces le da

a su contenedor un ancho fijo lo que

pasa con las imágenes es fíjense lo

siguiente es lo en lugar de esto voy a

hacer que tarjetita tenga un ancho de

300 píxeles

y vemos lo que pasa las imágenes se

comportan de una forma un poco extraña y

lamentablemente para solucionarlo casi

siempre si queremos que esta imagen no

sobresalga de su contenedor a la misma

imagen hay que aplicarle un quiz o en su

defecto y creo que lo mejor un max wheat

para que como máximo mira 100% de su

contenedor en este caso ahí se soluciona

ahora si nuestra imagen mide como

muchísimo como máximo el 100 por ciento

detrás de la tarjetita digamos

y por eso es que pasa esto el display

flexo no está conjugando los internos

con un 33% cada uno de ancho en una

pantalla pero la imagen como sobresalen

uno dejaba ver todos entonces

simplemente del mundo leer un max with

the 100% la imagen lo que hace es que

ocupe como máximo el ancho de tarjetita

y por eso ahora ya no se escapan entre

sí entonces qué más podemos hacer para

acomodar un poco mejor todo esto hasta

nuestro nuestro display flex tarjetitas

le podemos decir que tenga un padding

por ahí para separarlo de los costados

primero que nada vamos a darle un país

de 60 pixels capas más no vamos a darle

si vamos a darle 60 a ver qué tal bueno

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

padding a todos los costados de

tarjetitas tarjetitas recuerden es la

sexo que tenemos y dentro de ella

tenemos cada unas tarjetas con el color

de fondo rosa por eso el fondo de

tarjetitas se ve blanco eso está

perfecto así y lo que también podemos

hacer es darle un gap

a estas tarjetitas entre sí y la forma

de hacerlo sería también

al mismo a la misma sección darle un gap

que queramos de separación entre cada en

las tarjetas lo que va a hacer es

agregar

un espacio entre cada uno de sus hijos

entre cada uno elementos flex que tiene

dentro

y quedaría solamente un poco estilizar

un poco todo esto para que no esté tan

tan pegado los bordes y no mucho más la

verdad así que vamos a darle a tarjetita

por ejemplo

un border radius para hacerlo un poquito

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

también que acá la imagen se está

comportando un poco raro y es porque

está por encima del dif y por eso no

podemos ver el bordes radios en la parte

superior la forma de solucionarlo sería

a la tarjetita misma darle un overflow

hidden para que todo lo que sobresalga

de su contenido todo lo que está adentro

y sobresale de sus de sus bordes no se

vea se oculte y entonces allí la imagen

ya se corta donde queremos e incluso el

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

veía sobresaliendo ya no sobresalen de

ese borde en radios perfecto

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

como grupo con los espaciados acá

como decimos la vez pasada pues nos

podemos poner un margen a la imagen a

esto y a esto para que se separen los

asistentes entre sí otra forma de

hacerlo en este caso podemos la

tarjetita misma que es fijense tarjetita

tiene cuatro hijos tiene una imagen un h

4 un párrafo y un botón podemos

simplemente tarjetita darle un display

flex lo que va a pasar ahora se va a

romper un poco todo porque caudé los

items están intentando ponerse al

costado y ahora como no se ven por el

ave oncología no los podemos ver pero si

le damos un flex direction

columna ahora si los ítems se van a

volver a ver vamos a tener cada uno

abajo del otro

y simplemente es dándole cap

el gap que queramos a quería poner de 20

píxels a los ítems de la tarjetita que

recuerden son la imagen el título el

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

separar entre sí así como queremos

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

los costados a cada una de las tarjetas

para que nuestro contenido se separe de

los bordes laterales así que vamos a

darle un padding online de unos 10

píxeles quizás algo así

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

también se separan y eso no queremos que

pase

así que podemos ver cómo lo solucionamos

vamos a sacar este padre island y la

forma de solucionarlo sería a cada uno

de estos ítems darle por ahí margen a

los costados

o incluso lo que podemos hacer es estos

ítems de abajo encerrarlos en un 10

nuevo y la imagen dejarla por separado y

ahí en este caso

tarjetita tendría sólo dos hijos la

imagen vamos a probarlo así lo

visualizamos mejor pero primero que nada

voy a separar una de las tarjetitas para

poder visualizarlo bien a esto está la

tarjeta que vamos a modificar solamente

vamos acá mismo agregar un dip

a cada uno estos elementos al h4 alpe y

el botón los vamos a meter dentro de ese

día entonces ahora tarjetita tiene dos

hijos tiene la imagen y este día que va

a tener la clase

información por ejemplo

perfecto entonces ahora tarjetita de

display flex solamente va a tener

afectadas la imagen y el dip que

contiene todo esto

pero ahora si este tipo de información

podemos llamarlo aquí en el css y

decirle que tenga un padín in line

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

acá en este de la izquierda que es el

único que modificamos que tiene para

dictar los costados y se separa del

contenido del borde lateral

y ahora si el egap que le ponemos

tarjetita para dejar uno que es un

poquito más chico para que no se separe

tanto

y lo que puede tener también él

el libre información es para padding

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

borde inferior así que le vamos a poner

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

y fíjense que lo que hice acá es

básicamente desgranar tres países así

que lo podríamos hacer también así

padding arriba va a tener cero pero en

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

y lo podemos llamar así y simplemente va

a tener tops

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

funcionar exactamente igual digamos

y lo que podemos hacer ahora sí es

eliminar las tarjetitas de abajo y

dejarlas igual que la de arriba para qué

funciona exactamente igual que en las

tres igual es genial

bueno nada ahí puse un montón de flex

box bastantes propiedades hay muchas que

no use el extra direction la usamos

vamos a ver si hay algo que quiero

contarles bueno estos defectos y textos

ya lo usamos ya lo vimos

flex de dirección lo mismo flex rap en

este caso no lo necesitamos no es algo

que tampoco

muchísimo acomodando elementos con flex

vamos a ver

esto perfecto sí creo que vivimos

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

mostrar alain items ya lo vimos a con

frecuentes también los que más se usan

la verdad son bueno básicamente display

flex flex a direction satisfy content y

alain items para acomodar un poco los

elementos pero supongamos que tenemos la

tarjetita del medio la del centro le

vamos a poner tarjetita

principal

entonces vamos a llamar a tarjetita

punto principal y le vamos a decir que

tenga

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

nuestro html y vamos a ver que ahora la

del medio tiene un ancho diferente a las

otras dos

esto se puede hacer así y fíjense que

las dos digamos las tres ocupan todavía

el 100% del ancho vamos a llamar

vamos a en lugar de 600 que tenga 900 y

vamos a ver que ahora es más ancha que

las demás y hay otra forma de solucionar

esto porque fíjense que no siempre en

1900 esto se va adaptando de acuerdo al

ancho de nuestra pantalla eso está

buenísimo también porque no nos fuerza

que tengan 900 porque yo también 900

píxeles sería gigante y las otras no

entrarían por eso se va acomodando así

como un navegador lo decide también lo

bueno que tiene es que todas ocupan el

mismo alto se van acomodando en eso

también

entonces flex está buenísimo para estas

cosas porque nos acomoda las cosas

bastante orgánicamente y no tenemos que

forzar anchos en todas partes

pero lo que le quería mostrar es que hay

otra forma de hacer esto supongamos que

por nuestro contenido las tres no son

iguales en tamaño hay una forma de

solucionarlo que es simplemente si

queremos que todos los hijos de nuestro

contenedor tengan el mismo ancho es

darle un flex 1 y lo que va a hacer es

que todas tengan el mismo ancho sí sí

ahora por ejemplo vamos a hacerlo así

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

primera le vamos a poner tarjetita 1 a

la segunda tarjetita 2

y la tercera tarjetita 3 y ahora sí en

nuestro css vamos a llamar a cada una

tarjetita 1

tarjetita 2

tarjetita 3 perfecto y supongamos que

queremos que tenga un ancho de 200

píxeles

un ancho de 500 píxeles y un ancho de

900 píxeles el navegador no va a

respetar estás medidas siempre porque va

a depender siempre el contenido de los

elementos flex pero sí que va a tratar

de mantener esta proporción fíjense que

la primera va a ser más chica que la

segunda y la segunda va a ser más chica

y la trasera y así exactamente funciona

si achicamos la pantalla vamos a ver que

siempre va a tener esta relación de

aspecto pero no siempre van a mirar

exactamente lo que le dijimos que mirar

simplemente va a mantener la relación de

tamaños

cuando se lo aplicamos a uno solo lo que

hace el navegador es calcular el ancho

de todas primero dividiendo el ancho

total que tenemos por la cantidad de

elementos que hay le va a dar ese ancho

a cada uno internamente en nueve horas

de trabajo y después fuerza esa

proporción respecto al ancho que le

asignemos a unos elementos

y por ende los tres obviamente va a

tomar ese ancho de referencia para

mantener esa proporción y esa relación

entre los ítems entre sí

la diferencia con usar el flex y el

numerito es que

esta propiedad de flex laborismo que lo

usemos si le ponemos flex uno a cada uno

fíjense que van a tener los tres del

mismo tamaño

ahora mismo por el contrario si por

ejemplo a tarjetitas dos le ponemos flex

2 lo que va a hacer es que esta tarjeta

va a decir exactamente el doble que las

demás es decir si ésta mide 100 pixels

estaba a 1200 para 1100 también si le

ponemos por ejemplo 1.5 va a medir el

mismo que esto pero es que conforman 5

digamos y esa es la proporción que van

teniendo es como una proporción entre

cada uno de los sitios

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

extremadamente grande porque va a medir

6 veces lo que mide cada una de las

demás y con esto podemos ir jugando

entre ellas para ir generando diferentes

diferentes opciones y laborismo para que

lo pueda ir probando y ver qué cosas se

pueden hacer entre elementos flex

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

quería mostrar en realidad era que si en

algún momento por cuestiones del

contenido de nuestros nuestros elementos

nos quedan diferentes tamaño por ejemplo

si yo tuviera que este texto un poco más

largo vamos a ver qué pasa

fíjense que simplemente teniendo el

texto más largo y que no sean

exactamente iguales en contenido ya está

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

de solucionarlo era esta que les decía

de a todos los hijos aplicarles flex 1

y así básicamente hacemos que todo se

igualen en tamaño es decir a tarjetitas

a cada unas tarjetitas estoy aplicando

flex 1 es como si por separado a

tarjetita 1 vamos a verlo

como si por separado la tarjetita 1 2 y

3 les pusiera flex 1

hace eso igual a su tamaño igual a su

proporción para que todas midan

exactamente lo mismo dentro de su

contenedor flex

de hecho si hago esto también debería

funcionar no exactamente

pero sí eso sí todos les explicamos flex

uno acá poniéndose los trajecitos y

haciendo lo mismo

ya nos bien todas exactamente igual

era eso nada más lo que me faltaba ese

detalle para mostrarles para que sepan

cómo acomodar los anchos y los nuestros

elementos en flex

no hay mucho más por ver que crear un

futuro sólo para para que esté fuera del

mail vamos a crear un futuro y le vamos

a decir que diga a todos los derechos

reservados

y vamos a dar la clase footer vamos a

arreglar se pie para que esté en español

y vamos a venir acá en el css le vamos a

decir que pie tenga un background

color ahí está de este mismo rosita que

estamos usando y que tenga un color de

white

perfecto y vemos que nuestro ítem

nuestro futuro tiene este fondo que

queremos pero queremos que el texto esté

reservado esté centrado perdón

entonces lo que se puede hacer es

simplemente un texto a line center y ya

nuestro texto se va a entrar pero

supongamos que abajo este texto tenemos

por ejemplo tenemos dos párrafos tenemos

el párrafo que diga a todos los derechos

reservados y abajo tenemos un párrafo

que diga carpi viajes algo así

y ahora tenemos nuestros sistemas acá

centrados pero fíjense que si no los

queremos centrados por ejemplo les

podemos dar o sea no les queremos no

bajo el otro a nuestra opi que es el es

el padre de estos dos ítems le podemos

decir que tenga un display flex

y ya se van a acomodar uno al lado del

otro y si le damos un satisfy content

center se nos van a centrar en el centro

pero si le decimos a un space around por

ejemplo algo así ya vamos a tener los

dos ítems acá 1 de este lado y otro del

otro y al mismo bien página vamos a

ponerle un pad y para que se pueda haber

mejor eso vamos a poner un patín block

en este caso que va a ser para dictó y

botón de unos 20 píxeles y ahora sí

tenemos nuestros dos ítems de menú con

un space

around

y ya tenemos otro futuro terminado y

tenemos un sitio bastante pequeño con

contenido de ejemplo pero que va tomando

forma mucho mejor que los vídeos

anteriores entonces fíjense como con

poquitas herramientas que vamos

aprendiendo y que tenemos que practicar

obviamente hay mucho que practicar y

mucho que seguir viendo y todavía queda

mucho por aprender también pero fíjense

como con las la quinta clase con los

contenidos que aprendimos hasta esta

clase no nada más podemos armar algo

con mucha más forma ya con colores con

imágenes de fondo con fondos con

transparencia

con clases diferentes

podemos armar elementos flex que se

acomoden como nosotros queramos que

pueden tener

tarjetita 2 vamos a darle un flex de 15

que pueden tener diferentes tamaños

entre sí porque no funciona

la tarjeta 2 con con letras esto que

podemos ir acomodando cosas un poquito

con más estilo con que quedan más copada

se quedan más lindas y solamente con

cinco clases y con con bastantes pocas

cosas que vimos entonces está buenísimo

y está buenísimo flex porque se usa para

muchísimas cosas acá lo usamos para

acomodar el logo con el menú para

acomodar al menú entre sí para centrar

el menú en otro lado para centrar estos

textos acá para acomodar los ítems entre

sí acá mismo para acomodar estos de acá

abajo también para acomodar las

tarjetitas entre sí para acomodar los

elementos del fútbol es decir se usan

muchísimo y en la realidad también se

usa para estas cosas se usa para todo

porque nos permite mucha flexibilidad y

sobre todo el xbox nos ayudan muchos en

nuestro sitio responsive cuando veamos

media queries se va a entender mejor

porque lo decimos tanto pero lo que hizo

flex fue llegar a html llegar a la css

perdón

fue algo que surgió

con la necesidad y con el objetivo de

muchos problemas que las tablas y el

flow que se usaban antes nos generan

muchos problemas era muy difícil

maquetar shakespeare y no solucionar

muchísimos problemas y como verán se

puede usar para todo nuestro sitio

y sirve un montón así que nada

practiquen lo vean todo lo que hay para

ver investiguen más porque más allá de

todo lo que puede mostrar acá hay mucho

más para ver y aprender de flex

tienen muchas cosas muchas herramientas

y mucha información sobre cómo funcionan

estas cosas de los tamaños

cómo se calculan los espacios con un

space around por ejemplo ese tipo de

cosas está buenísimo si pueden

investigar más y nada más hasta que el

vídeo les voy a dejar entonces en la

descripción el link a un drive con estos

archivos que se para para hacer esta

mini página y el link también de esta

página de la documentación del flex box

para que lo puedan ver un poquito ya que

está acá también se nombrarán cosas que

en clase no vimos y que sería bueno que

si quieren investigar un poco lo vayan

viendo les recomiendo mucho que busquen

vídeos que busquen vídeos sobre cómo

funcionan las cosas de html css de cómo

se pueden hacer diferentes estructuras

con flex diferentes cosas que se pueden

lograr porque hay muchísimo para ver y

muchísimo

y nada más cualquier cosita se encuentra

en el chat ya saben y les dejo un saludo

y nos vemos en el próximo vídeo chao

chao