Curso de HTML y CSS | Clase 5 — Flexbox
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
📄 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.
🖥️ 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.
📐 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.
🖼️ 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.
🃏 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.
🎨 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.
⚙️ 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.
📐 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.
🔍 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.
⚖️ 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.
🔚 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.
🔗 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
💡Flexbox
💡Responsive Design
💡HTML
💡Selectores CSS
💡Display
💡Propiedades CSS
💡Posicionamiento
💡Anidamiento
💡Responsividad
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
Посмотреть больше похожих видео
Flexbox or Grid in CSS - Differentiate Easily With Examples
Learn CSS Flexbox in 20 Minutes (Course)
🎯 CSS GRID en 10 minutos (DESDE CERO).
✅ Crear MEGA MENÚ con Elementor Pro (3.12) | Sin plugins extra
▶️ #14 QUE ES MEDIA QUERY??? 💻 Curso CSS
Master Auto Layout in 20 minutes | 2023 Auto Layout Figma Tutorial
5.0 / 5 (0 votes)