GUÍA COMPLETA DE FLEXBOX ANIMADA | CSS

Curso completo para aprender Flexbox en CSS. En esta guía vas a ver el funcionamiento de cada una de las propiedades de Flexbox y bajo qué escenarios puedes usarlas. Pon a prueba tus habilidades haciendo los ejercicios para ordenar nuestros elementos con este layout.
👍 Apóyame con un like para llegar a más developers 😊
✅ Te invito a suscribirte al canal 👉 bit.ly/KZbin-VidaMRR
🔔 Activa la campanita para notificarte del siguiente video
Secciones del curso
00:00 Layout básico de Flexbox
05:26 Flex-direction: dirección de elementos
08:17 Flex-wrap: desborde de elementos
11:02 Flex-flow: método alterno a direction y wrap
11:22 Justify-content: alinear elementos horizontalmente
14:30 Align-items: alinear elementos verticalmente
17:49 Align-content: alinear elementos verticalmente desbordados
20:40 gap: espacio entre elementos
22:15 order: posición de elementos
24:52 Flex-grow: proporción de crecimiento
29:25 Flex-shrink: proporción para encogerse
31:47 Flex-basis: tamaño inicial de elementos
36:24 Flex: método abreviado para grow, shrink y basis
37:25 Align-self: para alinear verticalmente cada elemento
✅ Sígueme en las redes sociales:
Discord discord.gg/jrF6fv4j2p
Facebook vidamrr/
Twitter vidamrr
Instagram vidamrr
❤ únete al canal para obtener beneficios exclusivos:
kzbin.info/door/OD6LXgeBoeiUZTsPLdG-0gjoin
😍 Más videos dentro del canal:
Café con Rivas - Vlogs bit.ly/mrr-vlogs
Curso de Node.js bit.ly/mrr-curso-nodejs
Curso de PHP + MySQL bit.ly/mrr-curso-php
Basicos Dev bit.ly/basicos-dev
Tips y trucos bit.ly/tips-trucos
Mi primera app bit.ly/primera-app
Retos de programación bit.ly/problemas-codigo
Inspiración web bit.ly/mrr-inspiracion-web
Tutoriales Javascript bit.ly/tutoriales-javascript
Curso básico de CSS bit.ly/curso-css-basico
Diseño elementos con CSS bit.ly/componentes-css
Mi primer sitio web con CSS bit.ly/primer-sitio-CSS
Curso avanzado de CSS3 bit.ly/curso-css3
Sitio web Completo en CSS3 bit.ly/mrr-sitio-web-css3
#flexbox #css #curso

[@andresmarcano15]

Este es la mejor guía de flexbox que se encuentra en youtube. Muchas gracias por tu dedicación. Solo añadiré algo, en flexbox hay es main axis y cross axis. A partir de eso se define en que eje actuaran algunas propiedades. Es decir en caso de un align-self también puede alinear de manera horizontal cuando el flex-direction es column. Resumen: Al contenedor Flex display: flex flex-direction: row (defecto) | row-reverse | column | column-reverse flex-wrap: nowrap (defecto) | wrap flex-flow: flex-direction + flex-wrap justify-content (main axis): flex-start (defecto) | center | flex-end | baseline | space-around | space-between | space-evenly align-items (cross axis): stretch (defecto sin height definido*) | flex-start | flex-end | center |baseline align-content (cross axis + Wrap): flex-start (defecto) | flex-end | center | space-around | space-between | space-evenly | strech gap: valor; A los items Flex align-self: auto (defecto) | baseline | center | flex-end | flex-start | stretch flex-grow: 0 (defecto) valor positivo flex-shrink: 1 (defecto) valor positivo flex-basis: valor positivo flex: flex-grow + flex-shrink + flex-basis order: 0 (defecto) valor

[@yorkerad]

Este curso es mucho mejor que cursos pagados, excelente contenido, ¡gracias!

[@vidamrr]

Gracia a ti Javier!!! Que bueno que te gustó el video

[@alexanderrepollo1024]

La mejor explicación de flexbox que hay en youtube! Me encanto la verdad, se nota todo el esfuerzo que le pusiste y el conocimiento que tenes. Yo sabia que existía flex porque lo escuche nombrar muchas veces, pero cada vez que quería usarlo, se me complicaba porque no sabia como usar todas estas propiedades. Por lo que esta guia me vino de 10! like y sub para ti bro!

[@kitosake8248]

Excelente video bro!!, agradezco mucho tus cursos

[@jonatanmissora6521]

muy buena guia, excelente trabajo. Se entiende perfecto con esos ejemplos. A la espera de uno para grid. Sigue asi

[@wilsoncabrera636]

Genio! El mejor contenido sobre flex-box que hay en youtube, espero con ansias algo sobre Grid!

[@miguelangelbohorquez5300]

De las mejores explicaciones de flexbox, gracias por hacer contenido de este tipo, tambien seria super una explicaciones de esta forma con css grid.

[@pedroporrasmedina]

Muy buena explicación, gracias por el video, bastante práctico para se utilizado en proyectos!

[@javiercardenes7654]

Excelente guia, llevaba tiempo buscando un tutorial para enteder flexbox, pero este es de lejos el mejor. Gran trabajo.

[@pythonmaker]

Excelente video. Gracias por tu calidad.

[@devlisandro]

Impresionante la calidad del contenido de este caballero, felicitaciones y gracias :)).

[@daep911]

Muy visual, buen video. Interesante el de grid de esta manera

[@romancavanna1464]

Excelente como esta explicado, realmente se nota el cariño de este youtuber y sus ganas de enseñar. Genio total realmente, gracias

[@guillermobenitez6865]

Excelente video! Muchas gracias

[@edgarrosas5019]

Excelente, muchas gracias por el video

[@pablocarranza2506]

Impresionante.. lo mejor que eh visto de flexbox

[@elcanaldeisa]

¡Increíble video! Me ha ayudado muchísimo. Gracias!!

[@quatrosuyos9925]

Gracias el resumen que buscaba , directo al código y sin mucho rodeo .Gracias también por el de CSS Grid.Saludos desde Lima Perú

[@AREG1971]

Muy didáctico, con una explicación muy clara y concisa. Muchas gracias!

[@rogelioreyes7888]

Gracias por tu video, muy entendible y muy buena explicación, me ha quedado claro las funciones de estas propiedades y valores con tu video. Excelente video.

[@Andrea-bq5gr]

Este es un excelente video, mil gracias!

[@SonGoku-pc7jl]

Magnifica explicacion! :D Buah, me sirvió mucho, gracias :)

[@facundomarquez5673]

Justo lo que estaba buscando... muy buena explicación :D

[@joshuabolanoshernandez4911]

Increíble la forma de explicar que tenés! Muy didáctico el video, felicidades c:

[@thekira999]

Muchas gracias, por la Gran aportacion. 😊

[@royalknight6505]

Excelente curso explicación rápida y fácil muchas gracias

[@Deft-eros]

Espectacular esta guía, felicidades.

[@ddmosuriel]

Lo has hecho tan bien que parece fácil, hasta yo me he enterado, aprendiendo mucho. Eres buen pedagogo.

[@italoheberlobotorres8573]

Vi varios tutoriales de Flexbox y la verdad que este se destaca del resto. ¡Excelente!!! Muchas gracias por el aporte! ahora la de grid porfa

[@brunofernandez6389]

Muy buena explicacion Muchas gracias!

[@miguelnavarrobellido9836]

Muy bien explicado....gracias.

[@armandogutierrez2880]

Maximo de explicación, muy buena guía excelente ritmo con apoyo visual con ejemplos. Muchas gracias por compartir.

[@jairrivera8576]

Excelente, muchas gracias.

[@ayrtonbolanos6153]

Me encantó! Múchísimas gracias!

[@federicoprat9093]

el mejor video que vi de flex. Muy bueno

[@apuestastc8948]

Espectacular 👏👏👏👏👏

[@ussas9609]

Gran explicación! Justo en este tema es necesario tener una representación visual agradable de cada propiedad para entender bien el funcionamiento, y asi lo hiciste! No solo animaciones sino también código, me ayudó muchisimo

[@leanvillalba]

Muy claro. Me sacaste varias dudas con los ejemplos. Gracias!!

[@ronyvargas6947]

excelente contenido al igual que una documentacion

[@ingerstephanniesanchezleon9011]

Excelente video, explicado fácil y desde las bases :)

[@estebanp9749]

Exelente explicacion muy claro.

[@fernandgria6386]

It really worked for me after I look and try some tutorials, yours is the one that worked. Owe you a lot.

[@carlospizarro9521]

tremenda explicacion. fue el primero de flexbox que vi y no necesite buscar mas. muchas gracias.

[@miguelazo1977]

Muy buen video. Gracias.

[@samuelmorales8257]

Excelente, muy buen video Me aclaró muchas dudas.

[@matias47100]

Por fin entendí flexbox!! parecía tan complicado y vos lo hiciste súper sencillo! muchas gracias!!

[@CHEDAVID]

muy bien explicado! me ayudaste a entenderlo! muchas gracias!

[@pabmdp]

Excelente tutorial "visual", más claro imposible!!!!... Felicitaciones por el trabajo al autor!.

[@marianofeld2031]

Sos un fenomeno estuve luchando hace unos dias porque no me quedaba y gracias a este video y un poco de practica lo pude sacar!!.

[@ldgamboa1]

Excelente vídeo, por fin logré entenderlo. Yupitiiiiiii.

[@davidramirez9727]

Muchas gracias por compartir 😀

[@pacobrian7547]

Completisimo y de forma rapida, gracias!

[@maleeme836]

Amé tu resumen, me hizo terminar de entender todo el contenido dentro de Flex. Grattzie!

[@boyelf88]

Este video vale oro. A parte de hacerte afianzar los conocimientos sobre flexbox, tambien te saca de muchos apuros.

[@nataliamorales4097]

Gracias por tus videos, voy empezando y me ayudan bastante 🙏😅✌

[@alexanderpolanco2147]

Gracias por compartir el video muy bien. Ahora a practice...

[@carlosrios7823]

Parcero gran video, me ayudó mucho comprendiendo Flebox. Muchas gracias.

[@leandropescara6020]

voy 9 minutos y me encanta como explica, preciso y conciso

[@rodrimarlon]

Me quito el sombrero, de verdad que esta es un excelente explicación de flex-box, felicidades.

[@Souloether373]

Bro, muchas gracia spor tu epxlicación, muy precisa!

[@GC-mq8gj]

genial explicación, gracias.

[@kirkgonzalez9817]

Buenísima, venía de otros video pero contigo aclaré dudas. bueno video

[@mordorr1958]

Esperamos con ansias el de Grid ! xD

[@gigachad8192]

Muy buen curso brother, excelente explicación

[@rodrigoDVillar]

Esta súper padre el video. Graciaas

[@zenekser]

Excelente explicación. ⭐⭐⭐⭐⭐

[@ErrorNotFound-vo3sg]

Gracias por tu tiempo!

[@joseraulescalonaaguilera5478]

Si, excelente video Vida MMR

[@oscaralvarez1519]

Gran Guia! Ojala pronto venga la de GRIDCSS :D

[@thino4306]

Muy buen video, gracias !!

[@Anonymous-Defense]

muy bueno y muy bien explicado!

[@josemontoyaguzman239]

Excelente contenido! 👏

[@LucasFernandezkleizardx]

Genial, muchas gracias!

[@npm_lucho]

CSS Grid, por fiss! Estuvo genial este video.

[@felipebarrera5207]

si vas a comenzar a aprender Flexbox, este es el mejor video que vas a ver, 100% recomendado.

[@alvarovidal7167]

Muy buena clase, muy detallada, un tiempo correcto, si tuviese dinero te donaría la verdad. Vales mucho

[@damiangk77]

Al minuto me aclaro todo ,Genio total

[@jhonatanrodriguez6341]

Super bien explicado... esperando el de GRIP ❤

[@yovita369]

Excelente explicacion!

[@tomasponce9409]

Uff que buen video te mandaste man, muchas gracias :)

[@hanabi5368]

Gracias, buenisima la clase

[@gerardoenriquez3068]

Excelente tutorial muy bien explicado mucho mejor que varios tutoriales pagados, se ve el empeño que le pones para enseñar, felicidades y muchas gracias.

[@LAMJO290]

Exelente, Me aclaraste dudas y entendi mucho mejor

[@gerardoef]

Me encantó! Uno asi de grid! :)

[@dondotcom9901]

Excelente video amigo!👏👏👏

[@reivajibaf]

Excelente trabajo y técnica pedagógica, muchas gracias me ayudó mucho, lo guardo como guía para repasar, like y suscriptor esperando ayuden!

[@alvarohrv]

Bonita clase! Comprendí mucho mejor el tema! gracias!.

[@aleXLopez_413]

Espectacular

[@carlosalva1581]

Algo así pero de grid plisss

[@mysteriousbeat8295]

CODERS FREE tiene un curso de Grids buenísimo, te lo recomiendo muchímo, yo aprendí Grids con el

[@joseleonrs9817]

Amigo ya hay uno en este canal kzbin.info/www/bejne/fJuZc3qqg9uLf8U

[@tomasab5978]

Gracias por la explicación, estaba con el curso de Dalto, pero cuando hablaba de este tema en su curso, iba demasiado rápido y no le entendí jajaja. Una vez mas, gracias por subir esta explicación!

[@yoroih]

gracias buen hombre!

[@ingenia-tec5194]

De verdad Muchas Muchas MUCHISIMAS GRACIAS !!! Justo este tipo de explicaciones son las que se necesitan :D Ya me suscribi, ya le di like y de verdad ahorita voy a ver todos tus videos xD Esque se necesita justamente este tipo de explicaciones graficas que Condensen la información de manera grafica Esta perfecto, de verdad muchas gracias y muchas felicitaciones por esta excelente calidad de video :D Aprendí mucho y muy bien con la explicación grafica del codigo + la forma que adopta. Es el mejor video que he visto (Ya vi varios :,v) pero me quedo en tu canal si o si xD Con estas explicaciones si quiero aprender UuU Saludos y muchas gracias :D !!!

[@realshetmessenger8830]

Gracias crack eres el mejor

[@arielgustavoesquivel]

Me estaba volviendo loco el flex. Mil gracias bro que Dios te bendiga

[@SkorpioWiser]

Explicarlo de alguna forma mas clara seria imposible. Genio!!!

[@user-ur8sh7eo6v]

Muy bien explicado

[@josealbertopadillachavez6355]

it really work. thanks for fast tutorial

[@antoniorandisi3009]

Saludos... Excelente aporte...

[@kevincs9582]

El mejor video de flexbox

[@raulbolanos4920]

Claro que es de mucha utilidad