Curso definitivo de flexbox (1) - Main Axis y Cross Axis
ฝัง
- เผยแพร่เมื่อ 19 ก.ย. 2024
- En este video veremos el nuevo modelo de layout de CSS3: Flexbox. Nos centraremos en como se comportan los ejes principal y secundario y como se alinean los elementos respecto a ellos.
Post sobre este video en el blog de Escuela Digital: escueladigital....
Post original sobre el dado con flexbox: davidwalsh.name...
Inscribete al curso: escuela.digita...
Visítanos en nuestra página web escuela.digital
Síguenos en Facebook: escuela.digital...
Síguenos en Twitter: escuela.digital...
Únete a la comunidad Escuela Digital en Facebook:
escuela.digital...
![HIWWHEE | OHM [Official MV]](http://i.ytimg.com/vi/OJJLtTLqLag/mqdefault.jpg)
he visto tantos tutoriales de flexbox.. llegue al tuyo y ninguno de toooodos los que vi explican tan a detalle.. en definitiva el mejor que he visto, vale la pena muchisimo la hora invertida!!
Muchas gracias!
2020 de todos los videos que me e encontrado este es el que mejor me a explicado el uso de flex, muchas gracias.
2019 y todavía es útil este tutorial. Muchísimas gracias por compartir tu conocimiento.
2021 y aun sigue siendo útil y la mejor explicación que he encontrado
2022 y de lo mejor que he encontrado sobre Flexbox
2023 y es recontra mega útil
Me encantó el detalle con el que explica cada propiedad además del orden en que se debe enseñar cada una, muchas gracias!
Eres un genio explicando. Además eres tan detallista que da gusto ver hasta 10 horas de algún tema explicado por ti
QUE GRANDE ALVARO CREO QUE ESTE ES UNO DE TUS MEJORES TUTORIALES NUNCA MEJOR EXPLICADO ......!!!!
crack! después de 5 años, aún sigue siendo un súper video sobre cómo abordar la propiedad de flexbox. Me ha ayudado muchísimo!
Nuevamente felicidades Alvaro, eres el maestro que todos quisimos tener en la universidad, excelente explicacion, sigue asi y muchas gracias por todo el material que nos compartes y enseñas.
Arturo Herrera gracias!
WoW!! Que gran Tutorial!
Que lástima que me tardó tantos años en encontrar este canal!!!
[June/2021]... Por supuesto que ya me subscribí. Espero aprender mucho mas con estos videos. Gracias por sus enseñanzas maestro!
Saludos desde Miami, Florida
Che loco, que buen profesor... Me suscribí a Platzi por un año, y me siento estafado jajaja. Tengo que pausear en los cursos a cada rato, y complementarlo con contenido de youtube. Y por el momento EDTEAM es quien esta haciendo el trabajo que debería estar haciendo platzi!!!! (Y ENCIMA DE FORMA GRATUITA!!!!!) A veces siento que les habla a ellos cuando "bardea" a otra/s empresas por su forma tan básica de enseñar.
Acá lo que definitivamente esta sucediendo es que platzi tiene un mejor branding/marketing. Por eso lo triplica en suscriptores de su canal (por ejemplo) Señor, como humilde consejo de alguien que esta metido como (project manager) en esta industria de desarrollo digital... Le aconsejo que haga hincapié en la imagen de EDteam. Le aseguro que muchos estudiantes se lo agradecerán.
Por cierto, muchas gracias por todo el aporte que brinda de forma gratuita!!!! Saludos.
De verdad, ojala este comentario le sirva para quien este pensando que hacer con su dinero... Piensenló bien, platzi por el momento me parece un chiste con la velocidad que tocan cada tema, incluso a veces dan por sentado que tu ya sabes cosas... Malisimo realmente, ojala otros cursos me hagan reconsiderar mi vision para con la empresa, pero por el momento habiendo terminado 4 de ellos (con sus fuckings diplomas abalados por IBM), mantengo esta postura.
Iniciaré tu lista ahora mismo, en mi opinión personal eres el mejor PROFESOR en estos temas de diseño.
Y yo pensaba que los mejores tutoriales FrontEnd en español eran los de FalconMaster, sin duda me cambio a Escuela Digital, gran profesor
+PaulValencia Covers El amigo Carlos Arturo es todo un pro también. Gracias por tus palabras.
+Escuela Digital Si falcón también es un pro, de hecho mis inicios con html y css fueron con falcon.
Seria algo épico que en un algún EdTaller de escuela digital tuvieras de invitado a falconMaster, seria algo genial y no me lo perderia, jejeje alvaro por fa tenlo en cuenta
me gustaria un team alvaro felipe - carlos arturo - juan carlos arcila diaz xD
Carlos Arturo es Falcon Masters, pero no ubico al otro. Link?
jojo enserio, una alianza entre los dos grandes sin duda compraría los cuross (no es que no quiera comprarlos ahora) sino que no hay plata jaja :/
Muchas gracias Alvaro por dedicarte a la docencia en linea gracias a tus conocimientos puede entender de mejor manera el uso de flex-box eres un great master, saludos desde Mexico. !!
Hombre, me tomo ver 3 o 4 cursos suyos para darme cuenta que realmente no solo sabe lo que dice, si no que sabe transmitirlo. Le agradezco millones, aca tiene un nuevo fiel cliente tanto de sus cursos de pago como gratuitos. Saludos desde Punta del Este, Uruguay.
El mejor tutorial sobre Flexbox que existe.
¡Muchas gracias por el aporte!
Entendiendo Flexbox, gracias Alvaro , desde venezuela...
Simplemente, gracias. No saben cuanto me ha ayudado.Pleno 2021 y sigue vigente todo lo enseñado. Seguiré viendo la serie, saludos!
Excelente video, se nota su calidad como docente y el tiempo que dedicó para su elaboración, por eso mil gracias. No entiendo por que la gente hace ese tipo de críticas, que no aportan al conocimiento. Nuevamente felicitaciones, el mejor video que he visto de explicación de Flexbox, lo que motiva a darle una mirada detenida a todo su canal. Mis mejores deseos.
Alvaro eres un capo! y explicas excelente aclarando siempre las cosas ¡Arriba Perú!
Realmente cambie todo el concepto que tenia de flex-box , eres un genio enseñando , a parte de que mantienes entretenido al espectador por tu particular forma de mostrar ejemplos y definiciones nos haces sentir que podemos llegar a ser como tú ya que veía vídeos y todos mostraban sus habilidades pero nadie decía que era traumante maquetar!! .
utilizar float , tablet , me hacia sentir inutil ya que se destruía mi página al querer realizar una mejora pero entendí que así empiezan todos y para poder aprender hay que padecer !! , pensaba que todos los que hacían vídeos eran recontra inteligentes y yo era un incapaz , contigo aprendo que al comienzo todos se sienten de la misma forma... gracias por la dedicación en tus vídeos , aprendo y sigo aprendiendo mucho!! ... gracias desde Arequipa !!
Gracias por tu comentario. Y si, es verdad. Hay muchos que saben bastante (más que yo incluso) pero tienen el problema de no saber enseñar. Esa es mi principal diferencia.
Era lo que necesitaba amigo. Con SAS todo se me complica. VI y descargue muchísimos videos tuyos hasta que comenzaste a usar SAS. GRACIAS.
mil gracias alvaro, comienzo a entender esto, pero poco a poco , eres el mas explicito que he visto gracias de verdad.
Estoy empezando en esto de flexbox, he mirado algunos tutoriales, pero este a marcado la diferencia. Muchas gracias Alvaro Felipe!
Con este video aprendí al fin la teoría de Flex Box. Felicitaciones y muchas gracias!
Increíble explicación. Por fin entiendo cómo realmente funciona Flex-Box. Recomiendo a esta academia que actualice este video en una versión más corta para que tengan más alcance. O podrían dividirlo en videos más cortos para que puedan llegar a más estudiantes.
Increíble, en verdad es excelente tu forma de explicar, le he entendido a todo. ¡Mil gracias! Espero y sigas subiendo más videos como estos. ¡Saludos!
Eres un capo, he entendido de esto en 1 hora mas que en 2 malditos meses... Dios te bendiga sigue así.!!
Es estupendo ver que no soy el unico que aprende css directamente de la documentacion de w3c.org para lograr entender bien todos los contextos, layouts y valores, estoy aqui debido a flex-shrink(me esta generando un infarto cerebro vascular jaja no lo entiendo bien) pero a la final en este canal es estupendo. El unico detalle es que w3c recomienda no aprender modelos de diseños como horizontal o vertical(inline and block flow) o de izquierda a derecha (start and end), debido a que css se reinvento al flujo logico, solo con el uso de writting-mode y de direction property se puede dañar todo el flujo pensado
Si querés aprender edteam te enseña todo. Sos un verdadero maestro Álvaro. Un crack.
Sos un grande. Tenes el don de la enseñanza y espero que lo creas. La claridad y naturalidad con la que explicas es hermosa. Sobre todo al comentar cada uno de los conceptos y sus redpectivos ‘porqué ‘.
Muy agradecido, no todos comparten conocimiento de calidad, gratis.
Abrazo desde Argentina.
alvaro te cuento q no me marea tanto, pero no porque sea un experto, ja ni hablar, es porque eres un muy buen maestro, se agradece muchisimo tu educacion, si no me matriculo en sus cursos, es solo por mi trabajo, esto de la programacion es solo una pasion, q por ahora solo lo tengo como recreación muchas gracias por compartir tus conocimientos.
Amigo realmente te estoy muy agradecido, llevaba tiempos pendiente, sabía que tarde o temprano te meterías con las cajas flexibles jaja, quisas el hecho de que te tomara trabajo entenderlo al 100% fue porque no tenías un profe como tu jajaja, sabes explicar muy bien las cosas, te felicito.
Eres muy bueno explicando. Hay personas con ese don y lo tienes. Gracias
Brother saludos muy buena tu clase magistral, te felicito. En el dado con 5 puntos, mientras tú centraste el punto del medio agregándole otro nombre a la clase punto, yo sin embargo le agregué un nth-child(2) a esa clase del div central e igual me centró el punto con el align-self. Me orienté con lo con lo que tú explicaste con anterioridad y me resultó y esto lo hice practicando sin ver porque allí me tranqué pero me acorde que hicistes un paso parecido en el dado 3. No sé si alguien hizo lo mismo porque la verdad leer todos los comentario es extenuante porque son muchos pero lo dejo a manera de información por si alguien se le olvida esta última operación que hizo Alvaro, ahí está otra más que el mismo explicó con anterioridad. Una vez más te felicito hermano y gracias por todo.
Di con tu canal por casualidad y he de felicitarte por este GRAN curso, seguro que lo terminare y con lo bien que explicas repasare los temas de posición que he visto que tienes otra serie dedicada a esto, FELICIDADES!!
!Hombre hermano! ya quiero tomar el curso de diseño y desarrollo con usted alvaro felipe. Que pedagogia para explicar, aca tendras un fiel seguidor de tus contenidos. muchas gracias brother!!!!!!!!
Me ha encantado la forma en la que lo explicas!!, accesible para los que empiezan y lo suficientemente técnico como para disfrutarlo.
2020 y su curso me está ayudando a comprender de mejor manera! gracias maestro, he visto varios de tus videos y explicas muy bien!
idolo totallll mira los años que pasaron hoy lo veo y esta genial!!! gracias Alvaro!
Hola, algo que quiero aclarar cuando dije que se me cocinaba el cerebro, en realidad no me refiero a lo complicado de las explicaciones , de hecho en todo lo que he navegado hasta ahora es uno de los mejores canales que he encontrado con respecto a esto, de hecho en otros canales y tutoriales siempre dicen alinear a la izquierda, enviar abajo y otros términos ,pero si logras comprender esto del main axis y cross axis y como se puede revertir la dirección de cada uno, cambiar uno por otro y lograr entender cómo funciona todo en torno a ellos , creo que es la parte fundamental …yo lo voy entendiendo y creo que ahí está el secreto …la explicación esta genial , francamente digo la manera de explicar es muy interactiva …Gracias de verdad
Jajajaj que excelente video, yo que me duermo con ver 10 minutos de algun video y te vi todo tu video y la hora se paso volando. Grande maestro y gracias por compartir tus conocimientos profesionales explicado de una manera extravagante.
Yo no he sentido que me haya hervido el cerebro gracias a tu explicación que está muy clara. Muchas gracias, que nos has ayudado un montón con tu video. Felicidades y saludos.
Hola Alvaro, todo muy bien explicado. Yo vengo usando flexbox desde hace ya un tiempo en proyectos y es verdad lo que dices, el camino para entenderlo (en el cual sigo) es un poco complicado ya que es otro concepto de mostrar los elementos. Felicitaciones y gracias por compartir todo lo que vas aprendiendo.
Por fin alguien que enseña correctamente y bien explicado! tambien sigo otros canales y la verdad que tu Felipe lo explicas sin ningún apuro sobre todo cuando tenemos nuevas formas de codificar nuestros proyectos y no tenemos tan claro el tema! Muchas gracias por pensar en los que nos volvemos locos la primera vez! un abrazo grande y espero con ansias tu próxima clase de flexbox.
Una maravilla!!! Realmente una explicacion espectacular, si lo que quieres es aprender y entender los conceptos este es tu video. Primera vez q veo un video de este canal y ya me suscribi
Han pasado 5 años, y este es uno de los mejores tutoriales de flexbox !!!! Muchas Gracias.
La mejor explicación de Flexbox, gracias por el vídeo. Ojalá mis maestros fueran así.
Te juro que es el primer vídeo de una hora que veo sin distracción, muy bien explicado felicidades.
Excelente tutorial, explicas muy bien, algo que no he visto en otros tutoriales, lo importante es la base como tu dices, seguire tus videos y cursos. saludos desde Lima, Perú
En este pleno 2022 me encontre este curso voy empesando a prender flexbox y no lo avia entendido se me complico entender por mucho tiempo tengo cursos pagos pero no lo compreendia pero con este tutorial lo entendi de una manera muy sencillo me sirvio mucho para entender los fundamentos deberdad estoy muy feliz de entenderlo porfin y muchisimas gracias alvaro de todo corazon por este material simplemente unico 🥳🥳🥳muchas gracias alvaro por el tutorial
Sólo puedo poner una manita arriba, te mereces 100! Gracias por el curso!!!!
estoy empezando con flexbox y lo habia entendido de otra manera pero mirando tu video la cabezaya se me mario igualque tu con esto del main axis pero elvideo y la explicacion espero vuelva mi cabeza a su lugar genial
Hola Alvaro, estoy viendo tu curso y realmente me gusta la manera en la que explicas, se que el video ya es viejo, pero para aquellos que los esten viendo en este 2020 y posterior, cuando lleguen al dado 5 no es necesario crear una clase medio para centrar el punto que queda por fuera, solo deben usar:
.cara-5 > .punto {
align-self: center;
}
asi seleccionan ese hijo ya que es el unico hijo directo debido a que los otros div.punto estan dentro de los div.columna.
Gran video curso.
Cerebro explotando en 3, 2, 1...
Mi forma de ver el desarrollo web ha cambiado después de este video. Gracias Álvaro. Una maravilla.
Excelente Alvaro! Muy clara tu forma de explicar y a la velocidad justa para que los conocimientos se graben en la cabeza. Gran detalle y calidad en los ejemplos. Voy a hacer la guia completa. Segui asi! Gracias, saludos desde Buenos Aires.
Gran maestro de la verdad mejor que platzi. yo no se ni papas voy a empezar a ver sus vídeos y la verdad me gusta como lo explica. Saludos desde México
Es increíble el hecho de que es 2018 y a pesar de haber visto vídeos al respecto en otros canales, ninguno explica también como este. Los demás no son malos, pero no explican con tanto detalle y claridad lo más importante que son los fundamentos del modelo.
Muchas gracias por la dedicación que siempre ponen, me he ayudado mucho con sus vídeos más recientes. Espero tener el honor de poder pagar un curso en EDteam algún día, para poder retribuirles de alguna forma lo mucho que han hecho por mi.
Que bien explicado, gracias profe Álvaro por tomarse el tiempo para hacer este tipo de guías que nos ayudan mucho cuando se está comenzando en el diseño web. Muy didáctico por lo que se hace más fácil digerir lo que es Flexbox.
Excelente explicación.... Dominas demasiado bien el tema . Me encantas estas en mi lista de 3 profesores favorito. *;* ... Gracias
Déjame decirle que usted es un maestro. El mejor curso de youtube, que grande eres explicando
El mejor video que he visto en mi vida, me suscribo... felicidades!
WOW!!! POR FIN ALGUIEN QUE DOMINA A LA PERFECCION ESTOS CONCEPTOS!! Y ADEMAS, (LO MAS IMPORTANTE) SABE TRANSMITIRLO SIN CONFUNDIR A QUIEN QUIERE APRENDER!!! EL PROTOTIPO IDEAL DE PROFESOR!!!
2022 y aun es util el tutorial, un genio Alvaro.
Muy bueno aprendi un "monton", gracias Amigo, voy por el 2° video.Saludos desde Argentina.
La verdad al ver la duración del video me imaginé que me aburriría, pero cada segundo vale la pena, muy bien explicado en profundidad.
Buenísimo el ejemplo del dado y recalcar la importancia sobre los ejes es lo que ayuda realmente a entender cómo funciona flexbox
Le he repetido antes, que buen tutor eres, felicidades por tus vídeos.
Este fue el unico video que pudo explicarme bien el tema de flex box
te ganaste nuevo suscriptor
te juro que pase por muchoos canales y no entendia
vale la pena recomendar tu canal
sigue asi :)
29 min y he aprendido demasiado, este señor este barbaro ...
Impresionante video...Desde ya, mis màs sinceras felicitaciones, gracias....muchisimas gracias por tanto esfuerzo y dedicaciòn para con los nòveles dentro de los cuales me encuentro...Un placer ver y escuchar las explicaciones sobre cada tema...
gracias alvaro,el laburo que haces es increible.
un saludo desde argentina
Yo no conocía Flexbox, pero ahora me ha encantado, gracias por tan buenas aportaciones!
Excelente ! nos da gusto de que haya sido de provecho el vídeo. Muchas gracias!
muy bueno el video, el mejor creo que e visto en yoututbe, aprendi mas en una hora de video que en un mes de clases , te felicito ya tienes un subscriptor nuevo
gracias porque existan maestros como tu!
2022 y este tutorial me ha servido mucho más que el curso que pago, muchas gracias!!
min 1:01:05 jajajaja me gustó el final, y es muy cierto he visto muchos videos en youtube e incluso cursos en udemy que solo explican como si quieren ir al baño, todos apurados, sin explicar a detalle, y uno que va comenzado lo dejan perdido, y tu forma de explicar me ha hecho entender esto que lo veia tan dificil, solo por eso voy a comprarme una suscripcion a tus cursos.
he visto la guia definitiva de position y cuando vi la cantidad de tiempo para flexbox waoooo pero de verdad vale la pena, que pedagogia felicidades, habia visto otros tutoriales de flexbox pero no quedaba claro con este video he quedado claro con el diagrama, saludos desde Panama que buen video!!!
Que bueno que estes aprendiendo flexbox con los videos, Adelante amigo!
Muy buena explicación, sencilla, conocimiento profundo y excelentes ejemplos.
Muy buena serie de videos, estaré al pendiente de todos los demás videos de Flexbox, Gracias Álbaro Felipe
Muchas gracias por esta estupenda guía, tenía dolores de cabeza como comentabas y me has aclarado bastante.
No te conocía, venía de ver un vídeo de FalconMaster aclarando flex y te vi en los recomendados de la derecha, te vi y desde entonces voy a seguirte y puede que incluso me haga premium en tu Escuela Digital.
Muchas gracias.
Mil gracias por compartir tus conocimientos, soy un autodidacta de 53 años. Cuando me salga algo de trabajo te apoyare economicamente te lo mereces
Gracias por este curso,he aprendido mucho con una hora de contenido,espero que los que siguen sean igual
Muchas gracias Alvaro y todo el equipo de ED TEAM por estar brindando tu conocimiento
2035 y aun Albaro esta enseñando DE VERDAD las propiedades para el desarrollo web como nadie!! GENIO!
Maestrazo, tu forma de explicar me ha iluminado, me queda mucho más claro que otros tutoriales, seguire la serie
Simplemente genial!!!
Eres un crack explicando.
como bien dices hay que entender la base de las cosas para saber lo que se hace y dominar los elementos,no que los elementos te dominen a ti.
Muchas gracias por tu vídeo
.
Excelente, gracias!!! aún vigente, sobre todo porque expliqueas lo que ahora se ve como obvio, pero no lo es tanto, lo del main axis y cross axis. Por otro lado spartacus, tremenad película!!! :)
he visto muchos videos y tú lo explicas muy bien, gracias!!!
2022 y todavia es util. Excelente trabajo!
Increíble video ! Muchas gracias Alvaro! Saludos de Argentina!
Gracias!! Llevo apenas una semana viendo tus videos y realmente son excelentes y gracias por la dedicación para explicarnos!! Saludos desde Venezuela
Saludo a todos los terrícolas desde el año 2022, llego un poco tarde pero este tutorial sigue siendo una maravilla
¡Muchísimas gracias maestro! después de ver este vídeo tengo tan claro como funciona flexbox , antes no entendia como funcionaba esto de los ejes, con su explicación todo me ha quedado muy claro. Saludos
Muy buen tutorial, no me hirvió el cerebro así que me sentí superpoderoso jeje.
Saludos
He visto muchos cursos de frontend pero ninguno me ha resultado tan claro como los tuyos, eres un excelente profesor :D muchísimas gracias!
Excelente explicación, había tenido la oportunidad de indagar por otras fuentes y ninguna explica con tal claridad flexbox. Como maestro en formación que soy, aprendo mucho de este canal no solo del contenido temático sino tambien la forma en que transmites tu conocimiento..Gran trabajo, seguire con los otros videos (y)
Crack, eh visto muchos videos tutoriales, eh leído posts en varíos foros y ninguno es tan detalladamente explicativo como tú, sea una hora o más vale la pena..... Tiempo bien invertido, eres un Crack, sigue así (Y)
Sos un genio explicando. Todo explicado bien claro.
Recién me entero de que existe flexbox jaja, pero aprendí con este tuto en one. Muy buen docente.
Hola Alvaro Felipe, saludos desde Venezuela, ya vengo estudiando el tema de FlexBox, que me parece interesante, pero tu conseguiste la esencia de su filosofía, el cual agradezco mucho, ya que practique tus ejemplo y trato de ir mas allá, al ejercicio de los dados lo amplié con todas las posiciones posibles del dado el cual tiene (9) posiciones, el 2,3 y 6) se repite dos veces, porque la posiciones de los puntos cambia ... me entere tarde de tu sorteo, y acá se me hace difícil conseguir las divisas.
Sera para la proxima.