Guía de Flexbox

En este primer video les traemos una guía de flexbox, una propiedad CSS que nos permite maquetar páginas web.
Nuestro sitio oficial:
Síguenos en facebook:
/ jygproyectosweb
Únete a nuestro grupo: / 1639298496227219

[@geronelo1435]

Espectacular bro, gracias por el gran aporte, saludos

[@peipt]

Magnifica explicación.Me suscribo.Desde España

[@alejandroavilaquiroga]

Este fue tu primer video, para ser el primero creo que estuvo muy bueno.

[@MrRampengu]

El mejor video que he visto explicando flexbox, como se nota la diferencia cuando lo explica alguien que realmente sabe enseñar a con diferencia de otros youtubers ñiñatos que no tienen ni idea de como exponer algo, me gusto mucho este video

[@eliseoac966]

Ver esa antigua versión de Chrome me dio nostalgia. Y pensar que han pasado 7 años desde que se subió este tremendo video.

[@maxwer80]

amigo déjame decirte que explicas muy bien de lo mas bien explicado que he visto muchas gracias por compartir tus conocimientos

[@TANOSProductora]

felicidades y muchas gracias por explicarlo de manera tan facil, asi se deberia enseñar desde la primaria, gracias de nuevo.

[@ddiego2969]

Gracias maestro, la verdad un genio ud!

[@quimeinc]

De nuevo pasa a agradecer a este caballero por sus excelentes tutoriales, y eso que este video tiene más de 3 años y medio. Explica estupendamente, claro, pausado, ameno; con complejidad ascendente y desde cero. Hay cursos pagos de Flexbox que son un desastre, explican ya sobre código escrito y plantillas hechas, pura teoría llana, repetitiva y asumiendo que uno ya sabe todo. En verdad felicitaciones y mis respetos por la manera como imparte el conocimiento.

[@carlosasuajesequera938]

Muy clara y ordenada explicación. Felicitaciones.

[@davidcardenas4325]

Excelente contenido muy buena la forma de explicar

[@German-Murcia]

Que bueno encontrar gente dedicada a hacer vídeos para apoyar a otros que estamos entrando al mundo del diseño web. Señor Moliina mi Dios le de mucha mas sabiduría y Bendiciones por esa paciencia y dedicación como enseña. Un abrazo mi Hermano desde Bogotá.

[@felipep9526]

excelente primer video! saludos

[@paulvg92]

Uno de los tutoriales mas completos y productivos que he visto de diseno web, felicitaciones crack gracias por compartir tus conocimientos

[@mfatela]

Muchas gracias, explica muy bien. Saludos.

[@andresbcrr]

Amigo me salvaste de una , explicas muy bien saludos cordiales

[@hurling83]

Jean Carlos tu canal es excelente, se agradece todo el contenido llevo horas y horas aprendiendo y aplicando. Ademas de saber tenes una capacidad didáctica increíble! disfruto cada post realmente espero sigas publicando. Muy bueno lo que hiciste acá, no mucho se autocorrigen en publico una vez publicado. Gracias por compartir tu conocimiento !

[@PaulaSegura2015]

Excelente explicación Usted es un Baldor de la tecnología..grxs

[@victorh.patinoflores2012]

Estimado, encontre tu canal y no pare de ver todos tus videos el fin de semana. Muy claros tus ejemplos. Se te agradece el poder compartir tus conocimientos. Saludos, sigue adelante.

[@amongrandom5231]

00:00 nace una leyenda

[@JULIANDRESGM]

Muchas gracias por todos sus tutoriales, sin duda son los mejores de toda la web.

[@arturocoronel]

Felicitaciones, video bien explicado

[@MultiHikury]

insisto eres un genio!! Gracias por todo lo que compartes master!

[@Mr_Mayck]

genial, el flex boxeo es realmente excelente, gracias jean Carlos tu enseñanza nos ayuda muchísimo.

[@Mr_appo]

Muy buen video. Muchas gracias por compartir tu tiempo y tus conocimientos.

[@Diegoherreruelaquintana]

Geniales los videos. aprendo mucho gracias a ellos. un saludo desde Fuerteventura, Islas Canarias

[@portable_Sg]

Buen video amigo, Explica muy bien y lo ejemplifica muy bien. - Me gustaría que subiera mas video explicado mas sobre maquetación de contenido en html. ….

[@Jygproyectosweb]

+rubén.darío p. rdp Este video te puede ayudar kzbin.info/www/bejne/pIDNqYmjg5KimLc

[@jesusfigueroa2355]

Hermano muy buen vídeo, excelente canal he aprendido mucho Gracias muchas gracias

[@photoafpimagen]

Muy buen video, gracias y seguimos aprendiendo.

[@jennymarquez9194]

Muchas gracias , un super video!

[@amadeuskv]

Muy bien explicado maestro.

[@anthoyweb7377]

Felicitaciones, muy bien explicado. Gracias

[@jesusgarayar6779]

Muchas Gracias mi estimado.. por compartir el video con nosotros :D .. Explicas muy bien

[@whosdavidce]

Gracias por el video, esta perfectamente explicado!

[@manuelqueroporras4186]

Muy bien explicado. Muchas gracias por el vídeo.

[@Jygproyectosweb]

A ti gracias

[@joislanza2535]

Buen dia Jeancarlos como siempre gracias. Oye crees que podrías hace un tutorial acerca del Document Object Model, DOM? Te lo agradecería mucho. Eres una gran persona hermano sigue así!

[@luisfernandoescobar2131]

Excelente como siempre, gracias!

[@dcabanillas]

como siempre, de gran ayuda maestro

[@arivincenti]

Te felicito por el video, muy bien explicado, ojala q tengas exito con el canal, y subas mas videos! Saludos!

[@Jygproyectosweb]

Ari Vincenti muchas gracias, mañana subimos nuevo video :)

[@makeitfun6518]

Excelente vídeo, explicas muy bien! Te agradecería nuevamente si hicieras un vídeo explicativo de css grid ya que te entiendo muy bien los conceptos. Que tengas un excelente día!

[@AlexdobleU]

Saludos, y totalmente agradecido con usted

[@ClawHammer23]

Muy interesante, buen video, gracias por compartir

[@Jygproyectosweb]

Julio Vergara gracias a ti por ver este video :)

[@Jygproyectosweb]

Luis Gamez interesantes ideas... las anotaré. Suscribete para que no te pierdas ningún video.

[@yosoyelipk22]

esto es espectacular fino !!

[@lucasbraga5965]

re bueno bien explicado!

[@jhonyvillalta3366]

muchas gracias amigo , sigue así :)

[@florenciamerzario8473]

muy buenos los videos

[@pataslocas4595]

¡Muchas gracias!.

[@alan_mendez9352]

Muchas gracias amigo me servio de mucho 👍 me suscribo :D

[@Jygproyectosweb]

ALanN MeNdEzz gracias :)

[@elgatodiego]

Excelente ... muchas gracias

[@georgemancilla2484]

muy buen video amigo. lo que ando buscando y ojala lo puedas hacer es como crear la maqueta desde cero con flexbox. ejp: el nav, footer header section etc. muchas gracias.

[@HylianNBf]

buena explicación like

[@JNTN__]

MUY UTIL GRACIAS!!

[@bugen86]

idolo poor que dejaste de hacer videos. Me gusta mucho la manera de enseñar y explicar que tenes. Me interesa mucho saber como encarar un proyecto real, un pedido por un cliente, como lo encaro que debo saber, que debo preguntar y como plasmarlo

[@harrinsonA]

Interesante me gustaria que hicieras un workshop con esto que acabas de explicar como se aplica a la creacion de una pagina web! gracias.

[@Jygproyectosweb]

harrinson ariza anotado. gracias por mirar el video.

[@barratudo1]

Que crack!! buenísimo, gracias

[@lucianosantillan164]

Genio!

[@sirius450]

me gusto mucho el video, tengo una pregunta cual seria los contras de maquetar una pagina completa usando flexbox eliminaría el uso de floats y los display-inline y su variante¿?

[@polodibujanye]

Amigo, quisiera saber si tienes algun video de pagina web con EDGRID. Tu explicas muy bien y me gustaría ver un tutorial de EDGRID: Gracias.

[@JulioCanteroperfil]

hola... buen video conciso y preciso... me queda una duda que plugin de sublimetex usas para que te detecte las propiedades de flexbox y te de las sugerencia de atributos...? gracias... saludos....

[@Jygproyectosweb]

+Julio Cantero Hola Julio, en este video no uso sublime, uso brackets

[@JulioCanteroperfil]

ah.. y como haces para que brackets se vea asi... jeje.. sé que me fui del tema... solo tienes tiempo responderme...

[@Jygproyectosweb]

Hay videos sobre eso: kzbin.info/www/bejne/ipCaao1ngLV7Z5om39s

[@manuelgonzalez-yz4pf]

👍👍👍

[@bardock2s]

hola, se ve muy interesante tu canal, mi pregunta es con respecto a tu configuración del navegador y el editor, como se actualiza al instante tu navegador al realizar el cambio?

[@mauriciomontes8235]

me he suscrito a este canal..pinta bien... ojala vayas subiendo videos periodicamente en lo que te sea posible claro esta, pregunta ..cuando modificas el css automaticamente se te actaliza el navegador xD!..¿como haces eso? quisas este explicado en el video de configuracion de Brckets ..que no lo conocia para serte franco..ya que mi area es mas de programacion que de diseño...pero hay que aprender de todo....... gracias por los tutos...nunca pero nunca..estan demas...... saludos desde Chile

[@Jygproyectosweb]

Mauricio Montes en primer lugar muchas gracias, por suscribirte, y asi es lo del live preview esta explicado en el video de configurar brackets kzbin.info/www/bejne/i5_Kd4iDndtlirs En el minuto 3:50 ahi lo muestro. Aunque uso Brackets mas para diseño y sublime para programar. Y sí, estoy subiendo videos 1 o 2 veces por semana. Gracias.

[@danielmandujanocontreras3701]

Muy buenos los videos! Una pregunta, en vez de que fueran item, sirve tambien para anidadas ? No se si me explico, de igual forma dentro de un contenedor puedo integrar varias divisiones alineadas ? Saludos!

[@makeitfun6518]

Hola Daniel, pues hasta donde entiendo los items en este vídeo se pueden traducir como divs dentro de una pagina web, razón por la cual puedes por ejemplo crear un main que seria el contenedor, y dentro ubicar los divs que necesites para que se comporten como los items de este vídeo. eso puedes aclararlo un poco mejor si ya lo entiendes en el curso de pagina web desde cero de este mismo canal. Que tengas muy buen día!

[@danielmandujanocontreras3701]

@@makeitfun6518 muchísimas gracias.!

[@luisgamez9410]

Hola compa quiero decirte que me encanta los videos y espero tener ideas para que desarrolles mas videos interezantes.. bueno mi motivo de este mensaje es que no tengo la menor idea de pornerle un navegador por defecto a brackets y ponerle firefox como haria compa........................

[@Jygproyectosweb]

Luis Gamez el navegador por defecto lo haces desde el mismo sistema, y cuando abres la vista previa con brackets te aparece el navegador que has configurado por defecto en tu pc.

[@luisgamez9410]

J&G Proyectos Web compa ya lo hice y nada cuando intento el brackets busca solo al que tiene por determinado que es el chrome y no el firefox que puse como predeterminado en la pc

[@Jygproyectosweb]

Luis Gamez ahh, es que el live preview por defecto funciona con chrome, pero se puede cambiar, aunque no lo he probado, hay un plugins que se se llama open in browser. Pero nunca lo he usado, siempre he trabajado con Chrome y no he tenido ningun problema

[@luisgamez9410]

J&G Proyectos Web Ya entiendo, entonces el plugins es (( open in browser ))

[@Jygproyectosweb]

tambien esta live reload que te permite hacerlo con diversos browser, pero de nuevo no lo he usado.

[@gabrielsuarez2397]

Que tal maestro, de nuevo felicitaciones por tus vídeos, estoy muy agradecido contigo ya que he aprendido bastante por la forma tan detallada que explicas cada termino. Tengo una duda respecto al siguiente párrafo que colocas siempre en el head de las paginas y aun no he encontrado la explicación en tus vídeos, bueno los que he visto: Con que propósito esta este código y que significa dentro de la pagina? Gracias de antemano por tu explicación.

[@Jygproyectosweb]

Gabriel Suarez hola gracias, bueno eso ahora es necesario para el diseño responsive, no lo he explicado en ningún video pero lo explicaré a mas detalle en otro video. Bueno con eso le estoy diciendo al navegador... content="width=device-width: el ancho de la pagina va a ser el ancho de la pantalla del dispositivo user scalable=no: para que el usuario en movil no haga zoom con los dedos. initial-scale=1, maximun-scale=1, minimun-scale=1 la escala siempre va a ser de 1 es decir no podra reducir ni aumentar el zoom

[@expresstutorial3255]

Like numero 500

[@darioherrera9328]

una pregunta .contenedor { se lo puede ubicar en cualquier sitio de CSS

[@ElMonoSka]

Se me dificulta mucho usar eso de display block inline etc crees que sea mejor usar flebox si no me entra display?

[@Mauokk]

Buena tarde amigo. También lo puedo utilizar para imagenes? es decir usar flexbox para hacer una tipo galería de imagenes y acomodarlas? cuales serían los inconvenientes? Ggracias y muy buenos tutos.

[@Jygproyectosweb]

+Aldo Ruiz si se puede, aquí tenemos un video: kzbin.info/www/bejne/o4iunneMbpmohqs

[@Mauokk]

Gracias. Aunque en la parte de arriba de mi web tengo un carrucel, crees que pierda enfoque? mi idea es en la aprte de abajo poner las imagenes son como 10 y que cuando den click se abra.

[@madrid29madrid]

Excelente!!!! Solo una pregunta al respecto: FLexBox sustituye a frameworks como bootstrap o son cosas diferentes? Muchas gracias maestro.

[@Jygproyectosweb]

+Manu CidLanzarote no sustituye a ningún framework, son cosas diferentes.

[@madrid29madrid]

Muchas gracias¡

[@jancesbraiva7729]

Hola, buen día. Estos efectos se pueden aplicar a cualquier elemento, o solo funciona con los article? Ejemplo, si es texto o imágenes. Gracias!!!

[@Jygproyectosweb]

Hola. A cualquier elemento.

[@jancesbraiva7729]

@@Jygproyectosweb muchas gracias por tu respuesta. Saludos desde México!!!

[@TheJulio1212]

Hola amigo Molina, he estado probando la propiedad flexbox de css para maquetar una galeria tipo mosaico, al usar las funciones en html y agregando imágenes una por una mi galería se ve perfecta, pero cuando llame a las imagenes via php desde la bases de datos las imagenes de la galeria se colocaron en forma vertical una debajo de otra, probé utilizando flex-direccion: row y tampoco, alguna solución distinta, gracias son buenos tus tutos :D

[@amadeusvaldiviaperea1441]

con que es mejor hacer un menu? con divs..tablas o botones?

[@davidlinares9972]

listas

¿Cómo hace para que los cambios se previsualicen "en vivo"? D:

[@makeitfun6518]

Mira el curso básico de html y css de este mismo canal, y te darás cuenta que es una propiedad nativa a brackets que es el editor que él usa. Dependiendo de si usas atom o sublime puedes bajar plug ins para esos editores que hacen lo mismo y te muestran los cambios en tiempo real.

[@cristianmartin254]

donde puedo descargar brackets..?

[@pipers0123]

un detalle muy grande: cuando pones Display: flex; al contenedor afecta directamente al hijo osea a los items , por lo tanto decir que el contedor se vuelve flexible cuando pones tal propiedad estamos en un grave error.............

[@farrithfarrith456]

que significa el segundo meta ?¿?¿ por favor

[@LuisMoreno-dk7bk]

como hace para que se recargue sola la pagina?

[@Jygproyectosweb]

Luis Moreno Utilizo el editor de texto Brackets. kzbin.info/www/bejne/i5_Kd4iDndtlirs

[@LuisMoreno-dk7bk]

Muchas Gracias, actualmente uso sublime pero hay que probar de todo

[@Jygproyectosweb]

asi es sublime es bueno, si deseas ahi una vista previa puedes utilizar prepros, la diferencia es que tienes que darle Ctrl + s para que la pagina se actualize automaticamente

[@LuisMoreno-dk7bk]

pero el brackets esta genial, ya soy un suscriptor mas :)

[@Jygproyectosweb]

gracias :)

[@diegopichaco9384]

el flex-wrap no me funciona

[@luzpensante6336]

pongo todo exactamente como en el vídeo y no funciona.

[@BackupPlus]

Pues a Mi No me Funciona El Flex no se porque!

[@arcchay]

A mi tampoco, ¿pudiste solucionarlo? ¿cómo?

[@saulalania5460]

Hay definiciones que no corresponden. Por otro lado, no mencionas lo mas esencial de flexbox que son los ejes. Por lo demas me parece buen tutorial.

[@diegopichaco9384]

a alguien más le pasa?

[@raul951603]

soy puto