Curso Flexbox CSS: (3/13) El flujo de Flexbox ( flex-direction + flex-wrap ) - #jonmircha

En este video te explico como funciona el flujo de #Flexbox #CSS a través de las propiedades flex-direction y flex-wrap, que en conjunto generan el flex-flow.
🔔 Suscríbete al canal kzbin.info 🤓
👉 Visita mi sitio web jonmircha.com/ 💻
🌮 ¿Me invítas un taco? www.paypal.me/jonmircha
📫 Suscríbete a mi lista de correo tinyletter.com/jonmircha/
📦 Códigos: github.com/jonmircha/youtube-flexbox
📖 Mis notas sobre Flexbox jonmircha.com/flexbox

[@jonmircha]

🔔 Suscríbete al canal kzbin.info 🤓 👉 Visita mi sitio web jonmircha.com/ 💻 🌮 ¿Me invítas un taco? www.paypal.me/jonmircha 📫 Suscríbete a mi lista de correo tinyletter.com/jonmircha/ 📦 Códigos: github.com/jonmircha/youtube-flexbox 📖 Mis notas sobre Flexbox jonmircha.com/flexbox

[@nurietialvarez119]

Jon eres un MAESTRO en toda regla, da gusto escuchar tus explicaciones, he visto varios tutoriales tuyos y no me canso ya que te explicas de una forma clarisima, mejor imposible. Mil gracias.

[@jonmircha]

😀👌🏻

[@eduardofernandez4442]

Coincido

[@MarielHaarth]

Por fin lo entendí, me hubiera gusto haber visto mucho antes este video, muy buena explicación profe!

[@jonmircha]

😉👍🏻

[@josesaitog.5350]

Que excelente profesor, muchas gracias por tu contenido

[@jonmircha]

Con mucho gusto👋🏻😉

[@josecamilorodriguezvera8029]

soy nuevo en flexbox... y me acaba de explotar la cabeza con tanta información en un video... tengo que volver a verlo más de una vez definitivamente

[@jonmircha]

Gracias a ti!

[@martingonzales2665]

Increible , Maestrazoooo!!! Gracias por la clase maestra :)

[@jonmircha]

Con mucho gusto😉👍🏻

[@cumpaMira]

Excelente! Gracias!

[@carlosoviedo9328]

Definitivamente usted es el mejor...

[@jonmircha]

😉👋🏻

[@emersonpalaciootalvaro2632]

Gracias excelente

[@tryclopechile2056]

Muchas gracias por compartir tus conocimientos, muy buen video amigo =)

[@jonmircha]

De nada, comparte para llegar a más gente :)

[@mariocalcetin7602]

Muchas gracias Jon , eres grande !! .

[@jonmircha]

Un saludo!

[@verionnabarona4482]

Muchas gracias por tus videos!

[@jonmircha]

Con mucho gusto🧔✌🏻

[@ivantg4572]

Mi hermano muchas gracias vos explicas genial parcero que berraquera seria genial que hicieras un curso donde enseñaras a hacer una pagina web combinando HTML, CSS.JS REACT Y PHP o NODE para tomar datos y aprender a subirlo a un dominio para crear con nuestra pagina web

[@jonmircha]

😉👍🏻

[@daveku]

excelente explicación!!! sencillo y practico. gracias.

[@jonmircha]

🤓👍🏻

[@rv9518]

Excelente trabajo, Muchas gracias por su aporte.

[@jonmircha]

😉✌🏻

[@GabrielaMartinez-oy7em]

Gracias!! tus videos además de ser muy nutritivos son bastante divertidos. Me encanta el nivel de detalle que le pones a cada cosa :')

[@jonmircha]

😉👋🏻

[@dcloki789]

excelente contenido, muchas gracias por el curso

[@jonmircha]

Con mucho gusto

[@josemanuelherrero6495]

¡Qué bien que explicás todo, Jon!

[@jonmircha]

;)

[@bernardolopez4762]

Gracias , que gran información =)

[@jonmircha]

🤓👍🏻

[@helipalacio8772]

Muchas gracias JON. 🙏🙏🙏

[@jonmircha]

👋🏻😉

[@AnaLuciAller]

Muchas Gracias!!!!!!!

[@jonmircha]

😉🙌🏻

[@rick_from_yr]

Aunque ya he tomado varios tutoriales del tema, este sigue aportando valor 👍muy buen contenido

[@jonmircha]

Muchas gracias!

[@elweonweandolaweafome]

Me emociona tanto aprender, me produce felicidad y ganas de seguir y seguir. Estaba en tu curso de Grid, al cual llegué porque quería hacer responsivo un ejercicio sin usar media querys, del cual llegué porque estaba a punto de empezar react, despues de terminar js

[@jonmircha]

👋🏻😉

[@mythoscl51]

No tengo idea de programación, pero sé de ingles, mas tu explicación se me ha hecho súper fácil, tus conclusiones al terminar me encantan para confirmar que estoy haciéndolo bien, muchas gracias por compartir tu trabajo!

[@jonmircha]

;)

[@user-ue4yv5tl5x]

🤓 Lo mejor

[@jonmircha]

👋🏻😉

[@michelperales8419]

Gracias

[@jonmircha]

De nada

[@miformadepensar]

11:32 me gusto mucho por que no sabia y me daba golpes de cabeza porque no entraba las cajas dentro del div y estaba usando vuetify, y es algo que es mi culpa no haberme documentado completamente porque ahora busque en la documentación y aparece la palabra para setear los elementos gracias.. ⭐⭐⭐⭐⭐

[@jonmircha]

😉

[@CarlosEscobar-ei6ck]

¿Se usan prefijos para Opera? El row-reverse si lo mueve pero los ITEMS no se ordenan a la inversa y el column-reverse no funciona. Revisando los otros navegadores tampoco funciona.

[@richardarturobautistacarri8333]

10 estrellas

[@jonmircha]

:)

[@abrahan844]

En clases, gracias

[@jonmircha]

Con mucho gusto

[@davidcardenas7737]

no aparecio el link del vieport , me lo podrias pasar

[@simonherrera9390]

Hola, porque 20x5 de donde seria ese 5?

[@alejandroc.1082]

El sistema de Grid 12 columnas de Bootstrap está basado en flexbox, sería bueno que intentarás hacer el sistema Grid o ejemplificar los fundamentos de como funciona internamente. 👍

[@jonmircha]

Si miras toda la serie, de eso hablaré a partir del video número 10 :) estáte atento a los estrenos de la serie kzbin.info/aero/PLvq-jIkSeTUbQc3dGsssp8lxAi5npMrys

[@alejandroc.1082]

@@jonmircha OK gracias crack 👍

[@jonmircha]

@@alejandroc.1082 de nada, compárte mi contenido para que llegue a más gente :)

[@codingjhames]

@jonmircha, ¿cual es el video donde hablas del view port?, no aparece la etiqueta que haces mención

[@jebusxuy]

No, no aparece, y no di con algún video que hiciera mención a eso, en su canal.

[@jebusxuy]

kzbin.info/www/bejne/rpLMoIJteNCrhac Lo encontré.

[@Franco123787]

Tengo una duda, si yo utilizo flexbox. Y por ejemplo en una nav bar uso flex-direction: row, tengo que seguir usando esa misma flex-direction para toda la pagina o si yo debajo en otra parte de la pagina quisiese usar flex-direction:column podria hacerlo?.

[@jonmircha]

Pues eso lo define el responsive que quieras aplicar, trabaja con mediaqueries en base a tus necesidades de interfaz visual

[@educlon42]

Hola Jon, excelente video! Una consulta: Como realizaste el autocompletado de estilo en la parte del * after before box-sizing ?

[@jonmircha]

en que parte del video ?

[@educlon42]

​@@jonmircha En el minuto 11:25 parece que utilizas alguna combinación de teclas para insertar box-sizing: inherit;

[@jonmircha]

@@educlon42no, lo copie de mi portapapeles, no es ningun atajo

[@luisfernandoj8332]

Una pregunta, si tengo con el css los div en orden de fila, y quiero poner en @media de 800px el flex-direction: column-reverse por que no me funciona, o flex solo sirve cuando hay columnas.. no hay una manera de hacerlo ya con las flas echas ? solo quiero que la fila la ilustracion de abajo quede arriba..

[@jonmircha]

Sube tu código a un codepen por que asi platicado ni como ayudarte

[@luisfernandoj8332]

@@jonmircha bro, lo he cambiado ahora tengo la img en la derecha cuando el flex-direction: column-reverse se pierde la img no se que hacer

[@johanposadaagudelo6103]

[@jonmircha]

🤓👍🏻

[@sandracanseco4805]

} Hola hice todo hasta que pusiste * *::after *::before{ box-sizing:border-box; No se que paso ??? el item 5 no ocupo todo el espacio de la fila :( y tengo .item{ background:aquamarine; width: 20%; border: #999 solid medium ;

[@jonmircha]

súbelo a un codepen para revisarlo :)

[@edjaen-ve]

:-)

[@raanmeov]

con *{box-sizing: border-box;} si funciona

[@user87546]

@@raanmeov no entiendo para qué puso el before y el after

[@sergiollanos8042]

minuto 16:47 mentadota de madre😁xd

[@jonmircha]

😂

[@Skilseck]

Por que usas After y before?

[@jonmircha]

donde?

[@Skilseck]

@@jonmircha 11:31 es que yo use *{ } y obtuve el resultado tuyo, pero no entendí para que servía en si 😔 o porque lo hiciste de esa forma

[@jonmircha]

Es por si después genero contenido con los pseudoelementos after y before, mirate esta parte d emi curso de Fundamentos de CSS kzbin.info/www/bejne/gWTbnoV8bcaVZ9E

[@francovedia5584]

Gracias

[@jonmircha]

👋🏻😉