💙 Cómo crear una GALERÍA de IMÁGENES con FLEXBOX CSS [Tutorial paso a paso]

Подписаться 117 тыс.

Просмотров 54 тыс.

50% 1

¿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/tecnicas-chatgpt
📚 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":
notodoesprogramar.com/
🦊 100 Fábulas para Programadores
kiko.pro/100fabulas
📙 Libro: Aprende HTML
kiko.pro/librohtml
👁️ 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/instagram
Twitter: kiko.pro/twitter
TikTok: kiko.pro/tiktok
GitHub: kiko.pro/github
kikopalomares.com/
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.

Наука

Опубликовано:

28 янв 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 75

@kikopalomares 3 года назад

CURSO GRATIS de FLEXBOX AQUÍ 👉 bit.ly/38yEiO3

@olimpiaivonnerodriguez1079 Год назад

Tengo dudas como colocar varias imágenes en un pie de pagina. Tienes videos sobre eso?

@alejandrotorres3290 Год назад

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

@lsolano2707 2 года назад

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

@Vicky-lo6ei 2 года назад

Gracias es el diseño que mas me ha gustado de todas las que he visto, limpia y bonita.

@paolamagaliortiztriguis8546 2 года назад

Muchísimas gracias Kiko por este tutorial! No sabes lo mucho que me ha servido!! 🙌👏

@angang5643 Месяц назад

Muchas gracias, muy simple y totalmente entendible gran video Kiko

@guadalupetulian5435 2 года назад

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!!!

@williammandujano8095 2 года назад

justo lo que necesitaba fue una explicación sencilla pero que se entendió gracias :)

@jonasefanvasquezyanez1834 Год назад

Muchas gracias Kiko el video fue de muchisima ayuda!!!!

@loneliness746 Год назад

MUCHÍSIMAS GRACIAS, se ve excelente así mi galería, es un proyecto de materia.

@cactusverdementa139 3 года назад

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!

@kikopalomares 3 года назад

genial! me alegro mucho! bienvenida! 😁

@virtualpyshop_py2603 Месяц назад

Excelente Kiko. Gracias por el tutorial. Saludos desde Paraguay

@wilsonojeda749 6 месяцев назад

Excelente, gracias.

@olimpiaivonnerodriguez1079 Год назад

Eres el mejor!!!

@JuanCarlosGonzalez-jq7nl 2 года назад

Excelente Kiko!!. Podrías subir un video de como agrandar las fotos de esta misma galería, tipo Lightbox??

@ruthjimenez9286 Год назад

Gracias Kiko

@DaliDev 3 года назад

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

@kikopalomares 3 года назад

gracias a ti por tu comentario! =D

@russocf 3 года назад

Muchas gracias

@josecalcagni8472 2 года назад

👉👉👉 Kiko, muchas gracias. Excelente información, muy claro y bien explicado. 😃👌👍

@patriciodiblasi4280 2 года назад

gracias!!

@felipegallardo1551 3 месяца назад

genial!

@carla120683 Год назад

super!

@lbzsmith 2 года назад

muy bueno. me puse a estudiar media queries gracias a este video

@allanenrique8047 3 года назад

Sos un crack vato✌🏻

@kikopalomares 3 года назад

muchas gracias! 😬

@cifcashernandez2154 Год назад

Gracias

@ducavzla 2 года назад

gracias a ti resolvi ciertas inquietudes y pude hacer la tarea xd

@pineapple20nov Год назад

excelente video, pero tengo una duda, porque no usaste Gap en vez de padding y margin para separar cada imagen. 😊

@vanessamiracol8018 3 года назад

Gracias!! me sirvió un montón!! lo recomiendo

@kikopalomares 3 года назад

me alegro mucho!! 😁

@vanessamiracol8018 3 года назад

@@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

@atzel09 3 года назад

Capo

@diegoezequielantoniodelgre6143 2 года назад

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?

@dabiun7443 2 года назад

Carajo hermoso

@serols88 Год назад

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 :(

@SakuHeli0s Год назад

¡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!

@kikopalomares Год назад

me alegro que te haya salido y te sirvan mis videos!!

@eduardojose1041 Месяц назад

SALUDOS, MUY BUENO EL VIDEO PERO COMO LE HAGO PARA PONER UN TEXTO COMO DESCRIPCION DE LA IMAGEN AL PASAR EL MOUSE

@omarjesussilvaaguilera9730 Год назад

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?

@marturanga Год назад

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!!!!!

@javitxu43 Год назад

quitando el padding?

@alejandrotorres3290 Год назад

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

@andresfelipecirorestrepo9180 2 года назад

Que puedo hacer si me quedan espacios en blanco en la galeria :c?

@martingiusti1828 2 года назад

no me funciona lo de la parte responsive e hice todo tal cual

@DeejayFlystereo Год назад

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.

@alejandrotorres3290 Год назад

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

@enriqueruiz320 2 года назад

Olé

@advelectronica 2 года назад

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

@alejandrotorres3290 Год назад

para 4 le puso flex 25% , para 2 le puso flex 50% entons para 3 tendrias q ponerle 33.33% :3

@maydeavalos3839 Год назад

@@alejandrotorres3290 en que parte se pone eso?

@alejandrotorres3290 Год назад

@@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:

@juanmagomezomil9176 Год назад

Me funciona bien hasta los 4 divs o sea 20 imagenes quiero agregar otro div de 5 imagenes y no me funciona :(

@alejandrotorres3290 Год назад

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

@jordyperez9969 Год назад

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

@kikopalomares Год назад

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

@jordyperez9969 Год назад

@@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!

@kikopalomares Год назад

@@jordyperez9969 me alegro! 👍

@ramagago7393 Год назад

en el minuto 01:43 pensé que me debían una piña 😂

@aventador208 3 года назад

increible, ha sidmo mas util que otris videos de 15 mins

@kikopalomares 3 года назад

muchas gracias! 😁

@aventador208 3 года назад

@@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?

@kikopalomares 3 года назад

@@aventador208 ahora mismo no me acuerdo que expliqué en el vídeo... pero la propiedad de max-width es compatible con todos los navegadores

@aventador208 3 года назад

@@kikopalomares okey, gracias por la info ;)

@LeugimPrograma 3 года назад

Primer comentario

@kikopalomares 3 года назад

Aquí tienes: 🥇

@LeugimPrograma 3 года назад

@@kikopalomares XD

@josuecalderon3063 2 года назад

no me sirvió, me aparecen todas grandes, vi el video 3 veces y todo al pie de la letra

@carlapetta7674 2 года назад

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