Це відео не доступне.
Перепрошуємо.

CSS Grid vs Flexbox - Cuando usar uno u otro.

Поділитися
Вставка
  • Опубліковано 29 вер 2021
  • En este video vamos a ver las diferencias entre CSS Grid y Flexbox para construir sitios web y layouts.
    🚀 Blog de Diseño Web:
    www.falconmasters.com
    ⭐ Curso de Diseño Web desde Cero:
    www.desarrolloweb.io/cursos/d...
    ⭐ Curso de PHP y MYSQL desde Cero:
    www.desarrolloweb.io/cursos/p...
    ⭐ Curso de React y Firebase desde Cero:
    www.desarrolloweb.io/cursos/r...
    ⭐ Curso de Bootstrap 5:
    www.desarrolloweb.io/cursos/b...
    ⭐ Curso de Woocommerce:
    www.desarrolloweb.io/cursos/t...
    ---
    📄 Código del Proyecto:
    github.com/falconmasters/grid...
    ▶ Curso de CSS Grid: • Curso de CSS GRID: | I...
    ▶ Curso de Flexbox: • Guía Completa de Flexb...
    ---
    Redes Sociales:
    📌 Twitter: / falconmasters
    📌 Página de Facebook: / falconmasters

КОМЕНТАРІ • 512

  • @FalconMasters
    @FalconMasters  2 роки тому +139

    Si te gusto el video dale manita arriba 👍
    Y no olvides suscribirte para mas tutoriales de desarrollo web.

  • @martinstevenhernandezortiz6577
    @martinstevenhernandezortiz6577 2 роки тому +617

    Flexbox => Elementos dentro de Cajas
    Grid => Cajas dentro de Estructuras

    • @PterPmntaM
      @PterPmntaM 2 роки тому +80

      Mejor dicho, utiliza grid para que la estructura sea como tú quieres, y usa flexbox para que los elementos estén como tú quieras?

    • @pabloparra3490
      @pabloparra3490 2 роки тому +7

      Me ayudo mucho tu comentario mi pana, gracias!

    • @moisesanthonyespinoza2910
      @moisesanthonyespinoza2910 2 роки тому +3

      a penas vi el video tbm opine lo mismo jejejej ... es asi mejor ... ya que anteriormente me rompia la cabeza cuadrando pero con flex y grib es mas facil ...

    • @davidag90
      @davidag90 2 роки тому

      Muy buen resumen

    • @vanhellsing3029
      @vanhellsing3029 2 роки тому +3

      ​@@moisesanthonyespinoza2910 a........porque...... tantos.......puntos ........?........

  • @blackjack4482
    @blackjack4482 2 роки тому +221

    Vrg wey, acabas de hacer el video que no sabia qué necesitaba, pero que necesitaba

  • @andrezarias3542
    @andrezarias3542 2 роки тому +147

    -Flexbox = para diseños unidimensionales, controla solo filas o columnas.
    (Encabezados, Cards, menús de navegación.)
    -Css Grid = para diseños bidimensionales, controla filas y columnas a la vez.
    (Diseños de Pg completas, sistemas de columnas, Galerías de imágenes.)
    Grid no reemplaza a Flexbox, ni Flexbox no reemplaza a Grid
    Que buen ejemplo amigo Falcon 👍🏻

    • @omarrosas5524
      @omarrosas5524 Рік тому

      hola, todo esto que comentas, reemplaza el uso de Bootstrap?

    • @joseenriquecrialesmontilla4084
      @joseenriquecrialesmontilla4084 Рік тому

      pero se puede trabajar con los dos simultaneamente? gracias

    • @pame4771
      @pame4771 Рік тому +1

      @@joseenriquecrialesmontilla4084 si, claro que se puede, no veo porque no.

  • @alejandromonzon1622
    @alejandromonzon1622 2 роки тому +42

    Me acabas de aclarar muchas dudas que tengo referente a ambos módulos de CSS, y me has dado la confianza de probar Grid, siempre he diseñado mis maquetas con flexbox pero si hay que hacer muchos ajustes, acabo de aprender la propiedad Gap gracias a ti, será que mejor me vea tus cursos completos!

  • @marciorossi5075
    @marciorossi5075 2 роки тому +32

    Me parecen fantásticos tus videos pero la dinámica de dejar un código "crudo " para ir aplicando lo que se ve en el video y después dejar un ejercicio de práctica es fabulosa!! Muchas gracias

    • @FalconMasters
      @FalconMasters  2 роки тому +5

      Muchas gracias Marcio, esa es la idea, aprender preacticando.
      Saludos

    • @marciorossi5075
      @marciorossi5075 2 роки тому

      @@FalconMasters ese es el verdadero camino

  • @mitubo1970
    @mitubo1970 2 роки тому +1

    Preciso claro y al grano, como siempre. ¡Gracias maestro!

  • @firelordozai5719
    @firelordozai5719 2 роки тому

    Muchísimas gracias por compartir este contenido. En mis proyectos batallo mucho por acomodar cosas con el flexbox y ni siquiera imaginaba que flexbox y grid podían coexistir.

  • @jordanocuadros9425
    @jordanocuadros9425 2 роки тому

    Excelente video, estoy siguiendo varios cursos de Front End y ya se viene el curso de Grid y Flexbox, quería adelantarme para ver de que trataba y me quedó bastante claro.

  • @ricardoconti4158
    @ricardoconti4158 Рік тому +5

    Muy grosa tu explicación, te agradezco que lo hayas realizado tan simple y útil para todo el que vea el video, obviamente lo voy a recomendar a mis compañeros y amigos, en 20 minutos entendi lo que no entendi en 6 hs de clase.
    Gracias totales!!!

  • @EduartSantamaria
    @EduartSantamaria 2 роки тому +3

    Tenía mis dudas con respecto a esto y dudaba sobre si aprender Grid, ahora noto la diferencia de manera lógica ¡Buen vídeo!
    ¡Saludos!

  • @cristianagudelo2972
    @cristianagudelo2972 2 роки тому

    De verdad aprendo mucho con usted Carlos. Aún no he entrado a la Universidad (ya el siguiente año empiezo) y he aprendido demasiado gracias a tu ayuda! 👌

  • @hernangodoy8239
    @hernangodoy8239 2 роки тому

    Muy bueno che, despues de tanto tiempo usando los dos, me di cuenta que con grid no podia acomodar tales componentes. Pero ahora este video me sacó la duda, vos a usar los dos. Capo!

  • @wokeevoke
    @wokeevoke Рік тому +2

    Explicación impecable. Al estar aprendiendo diseño web por mi cuenta hay cosas que se pasan por alto y, gracias al video, ahora se cuando usar una opción u otra.

  • @GerardoMartinez-om4et
    @GerardoMartinez-om4et 2 роки тому

    Gracias por aparecer ahorita en mi lista recomendada 😅 siempre había aprendido en inglés pero aprender en español siento que explicas muchísimo. Muchas gracias !! Sigue con los videos. Miraré tus tutoriales de flex y css para saber más ya que ahorita solo ocupo flex para react native 😀

  • @victorramirez784
    @victorramirez784 2 роки тому

    Oh Dios!!
    Se nota que eres un profesional, entendí ambas propiedades a la primera. De una vez me voy suscribiendo, gracias.

  • @galoborelli725
    @galoborelli725 Рік тому +2

    Hola amigo, de todo lo que he buscado en internet (y creeme que llevo 2 años revolviendo la web) sos el que MEJOR EXPLICA, sos claro y vas derecho al grano, me encantan tus tutoriales y espero que sigas haciendo mucho mas, abrazo y un sub nuevo !

    • @FalconMasters
      @FalconMasters  Рік тому +1

      Muchas gracias por estas bonitas palabras, las aprecio mucho. Muchas gracias a ti por apoyar mis videos, te mando un gran saludo.

  • @bowiemage1
    @bowiemage1 2 роки тому

    Gracias por el video, vengo de un cusro de udemy que dicto un chileno y esto lo explico como el culo super entreverado con pesimos ejemplos. Con tu video me lo dejaste super claro y encima dejastes los codigos. muchas gracias!!

  • @PneumaCore
    @PneumaCore 2 роки тому +23

    Mi profesor ponía muchísimo tus vídeos en clase, que sepas que me has ayudado un montón! Me alegro que a día de hoy sigas haciendo vídeos. El ponía tus vídeos sobre HTML y CSS , sé que tienen unos añitos... 😊

    • @FalconMasters
      @FalconMasters  2 роки тому +13

      Eso es genial, muchas gracias por contarme esto, es un honor que mis videos fueran de ayuda en sus clases. Si algún día vez a tu profesor dile que muchas gracias de mi parte y le mando un saludo.

    • @PneumaCore
      @PneumaCore 2 роки тому +7

      @@FalconMasters Jejeje, yo soy de España, hace dos años empecé un curso de informática a nivel general y en el segundo año se daba una materia llamada "Aplicaciones Web", que se daban HTML y CSS básico. Mi profesor ponía tus vídeos casi todas las mañanas y me fueron de muchísima ayuda, estaban muy bien explicados. Actualmente estoy haciendo un curso de programación en el que también estamos dando nuevamente HTML y CSS, aunque Flexbox y Grid eran cosas nuevas para mi y me alegró un montón saber que tenías vídeos al respecto y que seguías haciéndolos. 😂 Ayer tuve un examen y seguramente lo haya aprobado gracias a ti, jejeje.

  • @davidramirez9727
    @davidramirez9727 Рік тому

    Muchas gracias Falcon, estoy aprendiendo a dominar CSS Flexbox y este video me ha ayudado a despejar dudas acerca de como y cuando usar Flex o Grid. Saludos 😎

  • @jorgetex21
    @jorgetex21 2 роки тому

    Hola carlos, muchas gracias por la guía me quedo super claro. Grid para las estructuras(layout) y flexbox para los elementos internos(componentes).

  • @ggg8932
    @ggg8932 2 роки тому

    Magnífica explicación. No lo entendía hasta que vi este video. Muchas Gracias!

  • @lucascserrate
    @lucascserrate 2 роки тому +1

    El mejor canal de programación sin duda

  • @ericjoel3826
    @ericjoel3826 2 роки тому

    Gracias por todos los videos que nos has regalado.

  • @josepascualferrer3248
    @josepascualferrer3248 10 місяців тому

    Excelente video. Muy bien explicado y acompañado de un ejemplo que deja muy claro el uso, así como las ventajas y desventajas de cada propiedad. Mi enhorabuena.

  • @richi087
    @richi087 2 роки тому +1

    La verdad que es el mejor ejemplo que encontre para diferencia entre FLEXBOX y GRID. Clarisima la explicacion y los ejemplos!

  • @RaCaTaSh
    @RaCaTaSh 2 роки тому

    Gracias a vos termine de entender para que se usa cada uno!

  • @JosueVader
    @JosueVader 2 роки тому

    Una video que aporta una increíble cantidad de información, gracias!

  • @kadexdark
    @kadexdark 2 роки тому

    Este tutorial es genial. Me encanta tu forma de explicar, muchas gracias!!! Acabas de ganar un suscriptor

  • @jhonphileppereyesflores6968
    @jhonphileppereyesflores6968 2 роки тому

    Muy buen video! Me recordaste el uso de ambos. Lo máximo.

  • @RaulBenjaminEscobar
    @RaulBenjaminEscobar Рік тому

    Genial el video. Saludos desde Córdoba, Argentina.

  • @didierlugo7892
    @didierlugo7892 Рік тому

    excelente tutorial muy bien detallado y explicado me da pena pero confieso que me estaba dando mucho problema el CSS mas que todo lo de acomodar los elementos pero con ese video resolví casi que todas las dudas y me quedaron claras un motos de cosas que aun no entendia del todo ahora si a practicar y empezar unos proyectos personales que tengo
    .

  • @kikabyatpaau836
    @kikabyatpaau836 Рік тому

    Excelente explicación, ahora me queda mas claro cuando usar Grid y Flexbox. Gracias.

  • @FateeOG
    @FateeOG 2 роки тому +1

    Gracias falcon como siempre dándonos tu sabiduría del front

  • @samuelsaravia7621
    @samuelsaravia7621 2 роки тому

    Excelente video , bastante claro y mas entendible en practica, muy muy buen tutorial

  • @jorgeraultzablopez3828
    @jorgeraultzablopez3828 2 роки тому

    Es emocionante aprender contigo

  • @ulisesmartinez410
    @ulisesmartinez410 2 роки тому +1

    Muy interesante la forma cómo lo explicas, felicidades.
    Te has ganado un suscriptor más.

  • @erykzong
    @erykzong 3 місяці тому

    Me resolviste todas las dudas de 4 meses gracias

  • @msasoftware
    @msasoftware 2 роки тому

    Excelente tutorial. Muchas gracias por compartir tus conocimientos.

  • @materia_gris
    @materia_gris Рік тому

    Me acuerdo que este canal fue de los primeros que ví cuando empecé a aprender sobre programación y desarrollo web. Gracias 🙂

  • @hugocontreras2848
    @hugocontreras2848 2 роки тому

    no sabes cuánto me ayudaste con este video

  • @leamkot
    @leamkot 2 роки тому

    Excelente!!! Muchas gracias Falcon!

  • @jesuszunigaamador3226
    @jesuszunigaamador3226 2 роки тому

    Que bien explicas bro, muchas gracias por compartir tus conocimientos!!

  • @davidflorido2743
    @davidflorido2743 Рік тому

    Muchas gracias Carlos Arturo!!!

  • @emanuelgonzalez9480
    @emanuelgonzalez9480 Рік тому +1

    Muchas gracias, gran video amigo! muy claro me queda la diferencia entre ambas y como saber en que momento puedo utilizarla.
    siento más afinidad con las grid por el tema responsivo, aunque es algo que apenas lo estoy viendo. De ante mano gracias por el video.

  • @yangenmanuel2659
    @yangenmanuel2659 2 роки тому +14

    Eres Increible, estaba indeciso y tu sacas este videazo gratis!

  • @emmanaorg8836
    @emmanaorg8836 5 місяців тому

    Excelente como siempre!

  • @anthonygayoso9113
    @anthonygayoso9113 2 роки тому

    Joder tio , ojala vivas para siempre . Todos tus videos siempre me han salvado en este camino del desarrollo web responsive

  • @elmereugeniogonzales4151
    @elmereugeniogonzales4151 2 роки тому +1

    Excelente video mi estimado amigo Falcon la verdad aprendí mucho gracias amigazo.

  • @xlCOPYlx
    @xlCOPYlx 2 роки тому

    Me ha gustado mucho tu tutorial, me haz dejado claro cuando debo usar ambas etiqueta. Te has ganado un nuevo sub

  • @xavierospina5883
    @xavierospina5883 2 роки тому

    Gracias Carlos, todo muy claro como siempre

  • @nicostjohn
    @nicostjohn 5 місяців тому

    Super claro! Muchas gracias!

  • @danielvicens9931
    @danielvicens9931 2 роки тому

    Excelente explicación...Algo complicado lo haces fácil de entender... Un gran abrazo y gracias...

  • @kazz94
    @kazz94 Рік тому

    Este video está tremendo, ¡¡muchas gracias!!

  • @andreyjimenez416
    @andreyjimenez416 2 роки тому

    Hey, yo compre este curso es Udemy, ahora es free para todos los que quieran aprender, que grande eres!!!

  • @jaderpolo3156
    @jaderpolo3156 2 роки тому

    Genial FalconMaster, mas claro no puede ser!

  • @Facu_Sp
    @Facu_Sp Рік тому

    Me encantó , me costaba mucho distinguir en que situación utilizar cada uno !

  • @gabrielmejiag
    @gabrielmejiag 2 роки тому +2

    Fantástico !! Muchas gracias por la clase. Te felicito, eres muy bueno enseñando. Saludos desde CDMX

  • @alejandrocaballero2414
    @alejandrocaballero2414 2 роки тому

    Muy bueno. ejemplos y explicación sencilla que lo vuelve fácil de aprender. Muchas gracias.

  • @tonybp
    @tonybp 2 роки тому +3

    La verdad yo ya tiré la toalla en esto del desarrollo web, es abrumador todo lo que hay que aprender para llegar a un nivel profesional, pero aun así me gusta ver tus videos.

    • @ignaciogahe5763
      @ignaciogahe5763 2 роки тому +1

      Su te sirve creo que tenes que dejar que madure las ideas y conceptos que aprendes y si intentaste de forma autodidacta tenes que organizar los conceptos eb el desarrollo está frontend y backend con eso ya podés investigar que significa y podés comenzar por frontend y en un futuro podés llegar aprender backend siempre aprendiendo lo que nesecitas

    • @FalconMasters
      @FalconMasters  2 роки тому +3

      No te desanimes, el camino del desarrollo web es muy grande, pero nadie, absolutamente nadie sabe todo. Todos hacemos nuestro mejor esfuerzo aprendiendo poco a poco, un tema a la vez.
      Y ya veras que no es tan difícil una vez que comienzas. Animo y saludos!

    • @tonybp
      @tonybp 2 роки тому

      @@ignaciogahe5763 No pude pasar de CSS, hay muchos detallitos y "mañas" que hicieron que me desesperara y me dije "si apenas con CSS me está doliendo la cabeza, ya me imagino con JS, los frameworks, etc." Ya no soy un jovenazo y cuando veo que sólo contratan de cierta edad para abajo pues fue cuando dije "tengo que aprender demasiado y de cualquier forma no me van a contratar". Pero aun así me sigue gustando y llamando la atención esto del desarrollo web. Gracias por tu respuesta.

    • @tonybp
      @tonybp 2 роки тому

      @@FalconMasters Gracias por la respuesta. La verdad que sí soy algo desesperado. Perdí mi trabajo por la pandemia y consideré el desarrollo web como una alternativa, empecé bien pero al ir aprendiendo me desesperaba con muchos detallitos y como le comenté a ignacio, no soy un jovenazo y en el web development veo que hay mucha discriminación por edad a la hora de contratar y eso me desmotivó más. Tal vez lo vuelva a retomar con más calma, pero me conozco jajaja, de cualquier forma me gusta seguir viendo videos de esto, aunque muchas veces no los entienda. ¡Saludos!

    • @FalconMasters
      @FalconMasters  2 роки тому +1

      @@tonybp No se que edad tendras, pero me han escrito muchas personas por mensajes en Udemy diciendo que tienen desde 70 hasta 85 años y estan muy animados por aprender.
      No dejes que la edad sea un impedimento, lo importante es lo que tu decidas hacer con los conocimientos que tomes.
      Mucha suerte!

  • @jorgedavidalarcon
    @jorgedavidalarcon 9 місяців тому

    Excelente video... El mejor que he visto. 🎉

  • @yusbelydelgado681
    @yusbelydelgado681 2 роки тому

    Entendí todo super claro! Muchas gracias 👍🏽

  • @jcorderob
    @jcorderob Місяць тому

    Excelente explicación. Mil gracias

  • @lautaromdelgado
    @lautaromdelgado 3 місяці тому

    ¡Que locura de video!

  • @Moyano__
    @Moyano__ 2 роки тому

    Que bueno para el laburo que me viene esto. Gracias.

  • @JanArroyo-zw1tp
    @JanArroyo-zw1tp Рік тому

    Excelente, y gracias por todo
    claro y conciso..!

  • @pitagorastrike5457
    @pitagorastrike5457 2 роки тому +1

    Desde hace muchísimo tiempo te he seguido es decir cuando apenas aprendía CSS y HTML, tu forma de enseñar es muy buena. Muchas gracias 👌

  • @cristoferricardo1984
    @cristoferricardo1984 Рік тому +1

    Excelente video! Muchas gracias.

  •  Рік тому

    Tu video lo encontré en el momento perfecto, estaba luchando con flex en una tarea jajja y con grid me resultó muy fácil, muchas gracias. Excelente aporte.

  • @theranger7586
    @theranger7586 2 місяці тому

    ¡Eres el mejor! 👏🏽👏🏽👏🏽👏🏽 👊🏽🥸👍🏽
    Gracias por compartir tus conocimientos, de tan excelente manera, pero sobre todo, por obsequiarnos tu tiempo... 🙌🏽
    ¡Dios te bendiga, Carlos Arturo! 🙏🏽

  • @softlamediaagency
    @softlamediaagency 2 роки тому

    Excelente video! contenido de gran calidad, muchas gracias!

  • @marytellez7504
    @marytellez7504 Місяць тому

    Me ha encantado este video, muchas gracias!

  • @L_6.
    @L_6. Рік тому

    Agregaré tu video a mis favoritos de css

  • @FrankGP.com.
    @FrankGP.com. 2 роки тому

    Gracias por este tutorial Carlos Arturo

  • @JohanLeon2392
    @JohanLeon2392 Рік тому

    Una explicación clara y concisa, muchas gracias!

  • @ivanorlandomezatorrecilla232
    @ivanorlandomezatorrecilla232 2 роки тому

    Excelente explicación. Bendiciones.

  • @victor2600
    @victor2600 2 роки тому

    Tremendo tutorial hermano , me sirvió de mucho , graciaaaas

  • @davidfaure1
    @davidfaure1 2 роки тому

    Sos muy capo chabon me ayudas todos los días un montón! Gracias por existir.

  • @vicentpaveltortosalorenzo9578
    @vicentpaveltortosalorenzo9578 Рік тому +1

    Hola, Primero enhorabuena por el video. Por otra parte, te recomiendo que para los anchos de los flex items, utilices la propiedad flex-basis o su shorthand flex. Esto facilita la lectura, y se sabe en todo momento que ese elemento es un flex item. Será más fácil de mantener por ti en el futuro o si otra persona coge tu proyecto para modificarlo.

  • @josecarlosalmansaperez1227
    @josecarlosalmansaperez1227 2 роки тому

    ¡Muy bueno! ¡Muchísimas gracias!

  • @axelzabala1494
    @axelzabala1494 2 роки тому

    Una belleza el video. Muchísimas gracias por tu aporte!

  • @inmedessoft-mix5517
    @inmedessoft-mix5517 2 роки тому

    Muchas gracias, un verdadero maestro sr!!

  • @carmengrau2971
    @carmengrau2971 2 роки тому

    ¡Excelente video! ¡Muchas gracias por compartir tu conocimiento!

  • @shinigamigirl88
    @shinigamigirl88 Місяць тому

    Te felicito, que excelente explicación

  • @amauryperalta4364
    @amauryperalta4364 2 роки тому

    Demasiado bien el video, muy claro el concepto!

  • @alvarohrv
    @alvarohrv Рік тому

    Eres excelente explicando, gracias por esta tutorial tan ejemplificador

  • @avarg2001
    @avarg2001 2 роки тому

    Muy bueno y claro!
    Gracias

  • @SkullHandK22
    @SkullHandK22 2 роки тому

    Muchisimas gracias locura, me encanta como explicas.

  • @jujomoto
    @jujomoto Рік тому

    Excelente video 👏👏👏

  • @RichardGonzalez-azb
    @RichardGonzalez-azb 2 роки тому

    Excelente video amigo.

  • @sebastianlozano7707
    @sebastianlozano7707 2 роки тому

    Joder! Que videazo!

  • @miguelfasanella6042
    @miguelfasanella6042 2 роки тому

    Excelente video! Todo muy claro, gracias hermano

  • @jhonalexloboos4968
    @jhonalexloboos4968 2 роки тому

    como siempre solucionando mus dudas, mil gracias

  • @marcossadone2605
    @marcossadone2605 Рік тому

    Excelente video, aprendi mucho y me despejo todas las dudas. Muchas gracias!

  • @vickychivilcoyar
    @vickychivilcoyar Рік тому

    gracias es de mucha ayuda este video y tu canal explicas muy bien. Saludos desde Argentina

  • @manuelcastillo7623
    @manuelcastillo7623 2 місяці тому

    Video 10/10 imposible no comentar, aprendí muchísimo. Voy para los cursos de Flexbox y Grid, estoy seguro que voy a aprender mucho, gracias por tu tiempo!

    • @FalconMasters
      @FalconMasters  2 місяці тому +1

      Muchas gracias! Me alegra que te sirvan mis videos!

  • @predicadorlolp
    @predicadorlolp 2 роки тому +10

    Increíble explicación porque en un mismo proyecto muestras ambos y así se entiende mucho mejor 😎

  • @MikeS70
    @MikeS70 Рік тому

    Excelente video! No creo que haya una explicación mejor a la que diste. Muchísimas gracias!!

  •  Рік тому

    Estupenda clase de flexbox y Grid en 20 minutos

  • @sebastianguerrero9367
    @sebastianguerrero9367 10 місяців тому

    Bueno señor, Yo me suscribo de una vez.
    Usted si le sabe. Saludos.