💙 Cómo crear una GALERÍA de IMÁGENES con FLEXBOX CSS [Tutorial paso a paso]
ฝัง
- เผยแพร่เมื่อ 25 ส.ค. 2024
- ¿Quieres aprender flexbox de la mejor forma posible?
👇👇 ACCEDE al CURSO GRATIS
👇 Si quieres aprender más sobre flexbox aquí te dejo el curso gratis!👇
bit.ly/38yEiO3
🎁 GUIA GRATIS: 5 Técnicas de ChatGPT para Desarrolladores 👉 crz.dev/tecnic...
📚 Recursos de programación 👉 crz.dev/sub
👨💻 Formación de IA para Desarrolladores:
crz.dev/ia-star
👨💻 Todos mis cursos gratis:
kiko.pro/cursos
📚 Puedes ver todos mis libros aquí:
kiko.pro/libros
📘 MI LIBRO "No todo es programar":
notodoesprogra...
🦊 100 Fábulas para Programadores
kiko.pro/100fa...
📙 Libro: Aprende HTML
kiko.pro/libro...
👁️ Puedes encontrar cosas más interesantes en:
kiko.pro/
🖱️ Si quieres ver el mi setup completo 👉 kiko.pro/setup
🎉 Continua la fiesta en mis otras redes sociales:
Discord: kiko.pro/discord
Instagram: kiko.pro/insta...
Twitter: kiko.pro/twitter
TikTok: kiko.pro/tiktok
GitHub: kiko.pro/github
kikopalomares....
Algunos de los enlaces son enlaces de afiliados, por lo que quizás reciba alguna pequeña comisión por compras a través de esos enlaces.
![[LIVE] : ONE ลุมพินี 76 | คู่เอก "ผึ้งหลวง vs สมิงดำ"](http://i.ytimg.com/vi/9SBshmGQOIM/mqdefault.jpg)
![fellow fellow - PROUD feat. INK WARUNTORN [STRING QUARTET]](http://i.ytimg.com/vi/BQrVkMPTdHE/mqdefault.jpg)
CURSO GRATIS de FLEXBOX AQUÍ 👉 bit.ly/38yEiO3
Tengo dudas como colocar varias imágenes en un pie de pagina. Tienes videos sobre eso?
Me quedó la espina de como tener las imagenes a la misma altura así que investigué :3 , lo que me quedó mejor fue colocarle un alto dentro del img (como en este caso cada columna ocupa un 25% de ancho yo le puse de height:20% para q se mantenga rectangular ) y para q no se deformen le agregas ahi mismo en el img la propiedad "object-fit" con el valor de "fill" asi la imagen se compacta al tamaño del div espero les sirva
Eres un crack, me he visto solo 2 videos tuyos y ya me has solucionado un problema que llevaba semanas rompiendome la cabeza !! te mereceres más likes y más subs (aqui te ganas otras) Además tu manera de explicar es superamena. GRACIAS!
genial! me alegro mucho! bienvenida! 😁
gran video, de mucha ayuda, gracias
Muchas gracias, muy simple y totalmente entendible gran video Kiko
Que gran video, abrí varias pestañas con cosas similares pero al ver esta no tuve necesidad de buscar más y cerré las otras. Que gran video
Excelente Kiko. Gracias por el tutorial. Saludos desde Paraguay
Gracias es el diseño que mas me ha gustado de todas las que he visto, limpia y bonita.
Muchísimas gracias Kiko por este tutorial! No sabes lo mucho que me ha servido!! 🙌👏
es como el 5to video que veo para solucionar un problema que tenia con el codigo.. y el unico video que me sirvio fue este.. un genio el tipo!!!
justo lo que necesitaba fue una explicación sencilla pero que se entendió gracias :)
genial!
MUCHÍSIMAS GRACIAS, se ve excelente así mi galería, es un proyecto de materia.
Muchas gracias Kiko el video fue de muchisima ayuda!!!!
Excelente, gracias.
De verdad Kiko Muhcas gracias por estos Shots de aprendizaje, que a los que vamos empezando nos ayudan brutal..!!!! saludos desde México mi sangre ..!!!!
gracias a ti por tu comentario! =D
Gracias Kiko
Eres el mejor!!!
Gracias
gracias!!
Muchas gracias
👉👉👉 Kiko, muchas gracias. Excelente información, muy claro y bien explicado. 😃👌👍
super!
muy bueno. me puse a estudiar media queries gracias a este video
Gracias!! me sirvió un montón!! lo recomiendo
me alegro mucho!! 😁
@@kikopalomares Tienes algún tutorial de
como añadirle un Lightbox a esa galería ?
o algún video que me puedas recomendar ?
... Te lo agradezco mucho
Sos un crack vato✌🏻
muchas gracias! 😬
¡Me ha encantado el video! Lo unico que a mi no se porque, incluso poniendo el display flex, las imagenes se me siguen viendo super enormes y no se si, es de por si que ya son grandes o debo usar algunas mas pequeñas... pero es que no me queda igual XD
Mil gracias por estos videos, Kiko!
PD: Parece que puse algo mal en el HTML! Volvi a repetirlo de 0 y ahora la galeria queda preciosa. No sabes Kiko la gran ayuda que haces con estos videos, de verdad!
Un saludo!
me alegro que te haya salido y te sirvan mis videos!!
Existe manera de ordenar los items de izquierda a derecha ?
Carajo hermoso
Excelente Kiko!!. Podrías subir un video de como agrandar las fotos de esta misma galería, tipo Lightbox??
SALUDOS, MUY BUENO EL VIDEO PERO COMO LE HAGO PARA PONER UN TEXTO COMO DESCRIPCION DE LA IMAGEN AL PASAR EL MOUSE
gracias a ti resolvi ciertas inquietudes y pude hacer la tarea xd
amigo, esta muy bueno, yo lo intente pero no me sale, es como que me toma el flex wrap antes, osea cuando estoy con los pixeles de un pc ya me baja todo por el wrap, sera por que las imagenes ya son muy grandes?
Capo
Espectacular! rápido y conciso. Pregunta: cómo eliminás la línea blanca que queda abajo de las fotos. En caso de no querer generar un espacio entre las fotos y hacer que queden perfectamente pegadas, sin espacio blanco? Gracias!!!!!
quitando el padding?
prueba poniendole margin-top: 0px o margin-bottom: 0px segun como lo tengas definido , tmb puede ser el padding en lugar del margin si lo q decidiste fue colocar la separacion en la imagen en lugar del div
excelente video, pero tengo una duda, porque no usaste Gap en vez de padding y margin para separar cada imagen. 😊
Hola Kiko! Disculpa, estoy intentando hacer lo mismo pero no parece surtir efecto ninguno de los cambios quehago en el CSS. Estoy usando una nav bar de bootstrap. Será que es eso?
Hola, me ha ayudado bastante :) peor quisiera saber algo con urgencia, como hago para darle click a una de esas imagenes y que se expanda a toda la pantallla completa? led agradezco la ayuda por favor :(
Que puedo hacer si me quedan espacios en blanco en la galeria :c?
sigo a rajatabla todas tus enseñanzas y esta me mareo un poco pero trato de seguirte, porque quise hacer que cambie a 3 y no pude
para 4 le puso flex 25% , para 2 le puso flex 50% entons para 3 tendrias q ponerle 33.33% :3
@@alejandrotorres3290 en que parte se pone eso?
@@maydeavalos3839 ahi explica 3:50 en la parte de colum , si quieres 4 divides el 100% tons quedaria 4 partes de25 si quieres 2 seria 2 partes de 50 y en el caso de 3 lo mas cercano es 33.33%, si es algo estatico seria ponerlo momas en el colum pero si es para diferentes medidas como para celulares tienes q agregarlo en un query c:
Hola. yo el problema que le veo es que cuando esta en pantalla completa la parte de abajo de las columnas las imagenes no quedan en linea. ¿Sabes si se pueden alinear de alguna manera?.Gracias un saludo.
hola, tmb me quedó esa espina así que investigué :3 , lo que me quedó mejor fue colocarle un alto dentro del img (como en este caso cada columna ocupa un 25% de ancho yo le puse de height:20% para q se mantenga rectangular ) y para q no se deformen le agregas ahi mismo en el img la propiedad "object-fit" con el valor de "fill" asi la imagen se compacta al tamaño del div espero t sirva o a quien lo lea
Olé
Por mas que lo hago no me sale, no entiendo he intentado hacer una galeria de esta forma por mucho tiempo y nunca me sale, hice lo mismo que Kiko, solo que con un map para recorrer las imagenes, el row fuera del map y column dentro del map, estoy trabajando en reactjs
Hola! tienes el código del ejemplo del vídeo aquí por si quieres trastearlo y comparar con lo que tengas: kikopalomares.com/clases/como-crear-una-galeria-de-imagenes-con-flexbox-css
@@kikopalomares Muchas gracias me funciono, lo que pasa es que vi que con 3 lineas de codigo se te formo solita la galeria y me quede intentando como por una hora buscando el por que en esas 3 lineas a mi no me salia, ahora hice todo el codigo del css y si me funciono, muchas gracias!
@@jordyperez9969 me alegro! 👍
Me funciona bien hasta los 4 divs o sea 20 imagenes quiero agregar otro div de 5 imagenes y no me funciona :(
Recuerda q los divs agregan "columnas" no filas entonces si con 4 divs le dimos flex:25% al colum entonces para tener 5 divs tienes q ponerle flex:20% con eso ya funcionaría :3
no me funciona lo de la parte responsive e hice todo tal cual
increible, ha sidmo mas util que otris videos de 15 mins
muchas gracias! 😁
@@kikopalomares de nada, lo que si, no he conseguido reducir el nº de columnas con el max-width... ¿puede deverse que no es compatible con firefox?
@@aventador208 ahora mismo no me acuerdo que expliqué en el vídeo... pero la propiedad de max-width es compatible con todos los navegadores
@@kikopalomares okey, gracias por la info ;)
en el minuto 01:43 pensé que me debían una piña 😂
mi profesor te usa de temario obligatorio :/
es un profesor listo
no me sirvió, me aparecen todas grandes, vi el video 3 veces y todo al pie de la letra
Me pasó lo mismo, pero porque me negaba a poner el box-sizing: border-box;
Lo que si me pasa y aún no se cómo resolver es que cuando tengo menos de 4 elementos en la última fila, se me agrandan las imágenes y quisiera que se mantengan al 25% de la pantalla :S
A mi me esta pasando lo mismo quedan las imagenes gigantes una abajo de otra. Pudiste solucionarlo?
@@lisandro580 igual a mi
Primer comentario
Aquí tienes: 🥇
@@kikopalomares XD