5 líneas de CSS flex para que tu LAYOUT se ADAPTE al CONTENIDO y NO al tamaño de pantalla
HTML-код
- Опубликовано: 16 сен 2024
- No tiene sentido seguir usando media queries en función del tamaño de pantalla cuando, en 2021, vemos como los tamaños cada vez son más diferentes y menos estándar.
En este vídeo vemos 2 formas de conseguir que la ubicación de tu sidebar vaya en función del contenido y no del tamaño de pantalla. Algo que escalará mucho mejor indistintamente de cómo evolucionen los dispositivos desde los que se consulta tu web 🎉
Si quieres ver más trucos como este, el curso de CSS flex a fondo está plagado de ellos, así que… ¡al turrón! 👇
bit.ly/cursazo...
{▶️} CodelyTV
├ 🎥 Suscríbete: ruclips.net/user/c...
├ 🐦 Twitter CodelyTV: / codelytv
├ 💂🏼 Twitter Rafa: / rafaoe
├ 🍺 Twitter Isma: / ismanapa
├ 📸 Instagram: / codelytv
├ ℹ️ LinkedIn: / codelytv
├ 🟦 Facebook: / codelytv
└ 📕 Catálogo cursos: bit.ly/cursos-...
¿Qué le echas en falta a este truquito? ¿qué es lo que te gusta de él?
es posible tener el codigo fuente o ejemplo de lo comentado en video, Gracias
Muestren el html 😮💨
He flipao... y eso que soy colombiano, no debería flipar.
Habría que ver como se comporta en proyectos más grandes, donde se acumulan otros elementos y comportamientos. Pero ya es hora de deshacerse de los media query. Vivamos libres, vivamos sin media query Aguante CodelyTV
Muy buen video, estaba trabajando con una web de WordPress, actualice el tema y se me rompió el código, todo se salió del tamaño que debería de tener y luego utilice esas pocas lineas de código y todo solucionado! Buen video amigo! ya me suscribí y les di like!😁Gracias!
muy buen video,pero no encuentro el video que recomiendas de css flex a fondo
Min 3:55 Aqui se ve como a fuerza necesitas Media Querys para redefinir el tamaño de los elementos de la galeria. Siento que estas confundiendo a la comunidad. Flex no es para redimensionamiento, es para distribucion de elementos. Son cosas totalmente diferentes no son enemigos flex y MQueries son parte del standar css. Pero en fin...
Asi es, es de super ignorantes pensar que una tecnologia es mala o una es mejor que la otra, cada tecnologia existe para algo en especifico, si les da pereza aprender todo lo que se necesita para programar entonces para que se ponen a estudiar esto.
@@luisfelipecardona8808 Es una lastima tanta desinformacion tan solo el titulo del video lo dice todo "Para que tu layout se adapte al contenido y no al tamaño de tu pantalla". Por Dios que aberracion es esa.
No es necesario. Solo tiene que ajustar el menú y los elementos de la galería.
Aparte no entiendo la necesidad de seguir apuntando a los MQ si ya de por sí los tamaños de pantalla tienen al infinito...
Cada día se aprende algo nuevo!
Gracias CodelyTV!
¡Esta genial el tuto..! Muchas gracias
la barra o menu en flex.. el content en grid
Bueno bueno el truco!
Gracias
Sub y like, excelentes datos
Esto me acaba de salvar la vida JAJAJA, Muchas gracias
Uffffff
Muchas gracias, que maravilla
Al entrar al video era esceptico😂pero os habeis ganado el like y la suscripción
X2 ahahahahaHha
ole os lo haveis currado :) 2 buenos sistemas para pequeños layouts :D
Gracias por la información, muy buena. Solo una sugerencia, traten de vocalizar mejor.
Exelente vieo voy a ponerlo en practica
me preguntaba si no seria mas facil para este caso particular usar css grid. Tengo ententido que flex es para elementos unidimensionales.
wowww esta bueno esa funcion
sub y like bien merecidos, muchas gracias!
y por que no simplemente usar grid? En mi opinión, CSS Flex es muy útil cuando se trabaja en 1 dimensión pero al trabajar con filas y columnas es mejor grid. De esa forma, en vez de usar flex-grow: 1 y flex-grow: 999, se puede usar la unidad de fr
Y como dices al final, no comparto tu opinión de que es más fácil Flex que Grid... Y lo de la compatibilidad de navegadores es un 99% vs 96%, no es mucha diferencia
Buena propuesta. No me gusta usar una cantidad sobre la que no tengo ni idea por qué está.
Experimentaré para ver si lo logro, pues apenas estoy aprendiendo
cual es la diferencia entre usar flex-basis y width?
Tengo entendido que es una mala práctica usar flexbox basis y flex grow sin media queries, se podría usar dentro de las medias queries integrando en cada @media screen and....
Hola, como ordeno varios labels en un cuadrado? quiero ordenar 20 labels en un marco o cuadrado
se gano un like y un suscriptor por ese truquillo tan bueno
Como seria armar el CSS Grid donde al inicio solo se muestre el encabezado, pero al buscar un registro en una base de dato esta carga el CSS Grid y ahí recién se despliega todas las demás filas con los registros encontrados. Si al buscar otro registro no se encuentra entonces que el CSS Grid solo muestre el encabezado. El lenguaje podría ser Java Script o Type Script
El min-width no sería necesario, no? Donde se aplica, se podría usar simplemente flex-basis: 60% sin especificar el min-width y el resultado sería el mismo.
eso es lo que queria pero las clases de bootstrap no me dejan cambiar el tamaño o tiene incovenientes
Buena info, pero habría que leer la documentación porque sólo viéndolo no es nada legible
super el video, felicitaciones.
duda, que theme usas de vscode?
genioooooooos
q genialidad
Hola, cuando subo foto de portada no consigo ver la foto 100% en responsive móvil solo puedo ver la posición background center center, he probado todo con css y no sé qué puedo hacer para que las fotos se vean completas.
Si pueden ayudar, gracias saludos
Genial genial, voy a estudiar bien esta técnica para mandar a la mierda todos los framework de css Yea!!!
mi like y mi suscripcion
mmmm... quisiera ver qué opina de esto Núria...
el front end de nuria es inigualable,la sr nuria falta aquí
Exigimos la reacción de Nuria a este video! :D
Apoyo pedrile a Nuria que opina!!
video reacción de nuria sobre el 999, like si pides lo mismo 👍🏻
es css ?
Sass
le echo en falta poder descargar el archivos para seguiros paso a paso... (una idea para futuros videos {podéis hacer algo con 3D o canvas o WEBGL o THREE.js ???) no hay nada de esto en vuestro canal
dios mio tanto costaba poner el html.......?
Odiaba el front 🤣🤣🤣
Grid o flex?
Flex
Fuciona ambos y podras maquetar casi cualquier cosa
Ambos.
vídeo básico 🤘🤘🤘🤘🤘🤘
No hay like.
No hicieron nada extraordinario, wtf.