5 líneas de CSS flex para que tu LAYOUT se ADAPTE al CONTENIDO y NO al tamaño de pantalla

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

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

50% 1

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-flex
{▶️} CodelyTV
├ 🎥 Suscríbete: ru-vid.com?sub_co...
├ 🐦 Twitter CodelyTV: / codelytv
├ 💂🏼 Twitter Rafa: / rafaoe
├ 🍺 Twitter Isma: / ismanapa
├ 📸 Instagram: / codelytv
├ ℹ️ LinkedIn: / codelytv
├ 🟦 Facebook: / codelytv
└ 📕 Catálogo cursos: bit.ly/cursos-codely

Наука

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

15 сен 2021

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

¿Qué le echas en falta a este truquito? ¿qué es lo que te gusta de él?

@mauriciobravob Год назад

es posible tener el codigo fuente o ejemplo de lo comentado en video, Gracias

@Adeltar009 Год назад

Muestren el html 😮‍💨

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

He flipao... y eso que soy colombiano, no debería flipar.

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

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

@cristianosvaldovallesviza1599 2 месяца назад

¡Esta genial el tuto..! Muchas gracias

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

Cada día se aprende algo nuevo! Gracias CodelyTV!

@agustinagonzalez2682 9 месяцев назад

muy buen video,pero no encuentro el video que recomiendas de css flex a fondo

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

Bueno bueno el truco! Gracias

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

Uffffff Muchas gracias, que maravilla

@SonGoku-pc7jl Год назад

ole os lo haveis currado :) 2 buenos sistemas para pequeños layouts :D

@sankrey Год назад

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!

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

Esto me acaba de salvar la vida JAJAJA, Muchas gracias

@CodeMaker23 Год назад

sub y like bien merecidos, muchas gracias!

@FrankGP.com. 2 года назад

wowww esta bueno esa funcion

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

se gano un like y un suscriptor por ese truquillo tan bueno

@the5tops618 10 месяцев назад

me preguntaba si no seria mas facil para este caso particular usar css grid. Tengo ententido que flex es para elementos unidimensionales.

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

q genialidad

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

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.

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

Exelente vieo voy a ponerlo en practica

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

genioooooooos

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

super el video, felicitaciones. duda, que theme usas de vscode?

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

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

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

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.

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

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

@DesingFxTube Год назад

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

@jazo2212 11 месяцев назад

Hola, como ordeno varios labels en un cuadrado? quiero ordenar 20 labels en un marco o cuadrado

@omararaujo6859 11 месяцев назад

cual es la diferencia entre usar flex-basis y width?

@marcosescobar1654 9 месяцев назад

Gracias por la información, muy buena. Solo una sugerencia, traten de vocalizar mejor.

@aefasesoresenergeticos8754 Год назад

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

@jazo2212 Год назад

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

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

la barra o menu en flex.. el content en grid

@danielcardenas4879 Год назад

eso es lo que queria pero las clases de bootstrap no me dejan cambiar el tamaño o tiene incovenientes

@MORFO458 9 месяцев назад

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

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

Al entrar al video era esceptico😂pero os habeis ganado el like y la suscripción

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

X2 ahahahahaHha

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

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

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

Genial genial, voy a estudiar bien esta técnica para mandar a la mierda todos los framework de css Yea!!!

@mariaamparodominguez939 Год назад

mi like y mi suscripcion

@CarlosGutierrez-pn5fb 2 года назад

Buena info, pero habría que leer la documentación porque sólo viéndolo no es nada legible

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

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

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

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

@steelkraken 9 месяцев назад

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