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!
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 ..!!!!
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?
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?
¡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!
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!!!!!
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
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
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
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 :(
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!
@@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:
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
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! 😁
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
Muchas gracias, muy simple y totalmente entendible gran video Kiko
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!!!
Gracias es el diseño que mas me ha gustado de todas las que he visto, limpia y bonita.
Excelente Kiko. Gracias por el tutorial. Saludos desde Paraguay
Muchísimas gracias Kiko por este tutorial! No sabes lo mucho que me ha servido!! 🙌👏
justo lo que necesitaba fue una explicación sencilla pero que se entendió gracias :)
MUCHÍSIMAS GRACIAS, se ve excelente así mi galería, es un proyecto de materia.
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
Muchas gracias Kiko el video fue de muchisima ayuda!!!!
gran video, de mucha ayuda, gracias
Excelente, gracias.
👉👉👉 Kiko, muchas gracias. Excelente información, muy claro y bien explicado. 😃👌👍
Gracias Kiko
muy bueno. me puse a estudiar media queries gracias a este video
Eres el mejor!!!
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?
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?
gracias!!
Muchas gracias
Gracias
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
Existe manera de ordenar los items de izquierda a derecha ?
¡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!!
Sos un crack vato✌🏻
muchas gracias! 😬
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
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
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
super!
genial!
Que puedo hacer si me quedan espacios en blanco en la galeria :c?
gracias a ti resolvi ciertas inquietudes y pude hacer la tarea xd
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
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 :(
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! 👍
excelente video, pero tengo una duda, porque no usaste Gap en vez de padding y margin para separar cada imagen. 😊
Carajo hermoso
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:
no me funciona lo de la parte responsive e hice todo tal cual
Capo
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
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
Olé
Primer comentario
Aquí tienes: 🥇
@@kikopalomares XD