Aprende CSS Flexbox en 15 Minutos 📘

Подписаться 362 тыс.

Просмотров 159 тыс.

50% 1

⭐ Aprende todo de Flexbox y CSS aquí 👉 victorroblesweb.es/master-css
⭐ Aprende CSS3 Avanzado aquí 👉 victorroblesweb.es/master-css...
🔥 Suscríbete: ru-vid.com...
🎓 Cursos online de desarrollo web: victorroblesweb.es/academy
📰 Blog: victorroblesweb.es
📧 Newsletter: victorroblesweb.es/lista-correo
📷 Instagram: victorroblesweb.es/instagram
📑 Facebook: / víctor-robles-web-1460...
🐦 Twitter: / victorobs
👨‍💼 LinkedIn: / victorroblesweb
🎵 TikTok: / victorroblesweb
🧢 Mi gorra: amzn.to/2lDH1wv
💻 Mi PC: amzn.to/2EloEpT
⚒️ Mi setup: bit.ly/2LsY1oj
🌐 Hosting que recomiendo 👉 victorroblesweb.es/hosting
🖥️ Servidor VPS recomendado 👉 victorroblesweb.es/vps
(Cupón de descuento extra para ambos: VICTORROBLESWEB)
👕 Mi ropa con diseños geek originales 👉 bit.ly/2xObr5f 👕
Aprende lo fundamental de la maquetación web con CSS Flexbox 💙 La nueva forma de maquetación basada en elementos flexibles con CSS3, es el lenguaje de hojas de estilo más usado, más estándar y más demandado actualmente que nos permite dar estilos y forma a una web. Te enseñaré como empezar en CSS Flex y como trabajar con flex containers, flex-wrap, flex-direction, justify-content, aling-items, align-content, order y mucho más. Todo en 15 minutos, desde cero y paso a paso.
Espero que te guste mucho el vídeo 😄
Aprende más en mi blog: victorroblesweb.es
#victorroblesweb

Опубликовано:

22 июл 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 121

@VictorRoblesWEB 9 месяцев назад

⭐ Aprende todo de Flexbox y CSS aquí 👉 victorroblesweb.es/master-css ⭐ Aprende CSS3 Avanzado aquí 👉 victorroblesweb.es/master-css-avanzado

@andonyrodriguezmora9921 Год назад

Algo importante que no dijiste y por si alguien lo lee, es que el justify content es con base al eje horizontal y el align-items es con base al eje vertical :)

@raulvanegas1415 Год назад

Más bien que justify content es para el eje principal en el que fluye la direccion del FlexBox. (puede ser tanto horizontal como vertical, segun se defina row o column). Align-items sería con base al eje cruzado.

@andonyrodriguezmora9921 Год назад

@@raulvanegas1415 tienes razon

@jeankha Год назад

@@raulvanegas1415 y cual es la diferencia entre align items y align content?

@yurguizdavidvaldiviahuaman4305 2 месяца назад

Eso funciona más en grid

@mpassionnote День назад

@@jeankha la diferencia es que align items es con respecto al eje transversal que pongas en flex direction y align content es siempre en el eje vertical

@webyipei2621 2 года назад

Otro tutorial que explica mejor en un video de 15 minutos que el profe en la clase leyendo PDF 1h.

@hrivera4201 2 года назад

Si sumas los distintos flex-grow, por ejmplo1+2+3 = 6, el primero tendrá 1/6 del espacio total disponible, el segundo 2/6 o 1/3 del espacio disponible y el tercero tendrá 3/6 o 1/2 del espacio disponible.

@elpecas7587 Год назад

madre mía, estoy en un ciclo superior y nos enseñan con el float y con el clear, y esto muchacho es una maravilla!! yo entiendo que tengamos que ver como se hacía hace años por si nos toca editar algo construido con float, pero yo creo que tardaría menos creándolo de nuevo con flexbox que con float...Muchas gracias y un gran saludo, tengo pendiente hacer un curso contigo en la Udemy por cierto, cuando tenga un poquito más de tiempo...Un abrazo hombre nos vemos

@edwinalexandervegamoreno3995 Год назад

Este video lo he visto mas o menos 15 veces, y ya casi me he vuelo experto en flex-box, gracias a estos 15 minutos.

@jeanpierebellotamendoza3683 5 месяцев назад

ya voy 2 😁

@danielarapaseje6412 15 дней назад

tiene buena metodologia de enseñanza, no es fácil lograr que los demás te entiendan y transmitir la idea

@sustanciaadictivasounds Год назад

Una pasada lo bien que explicas tus videos Víctor, 15 minutos de un video y me dejas mas que claro todo, saludos desde México! 🔥🔥

@reh.m3607 Год назад

Gracias es muy util saber esto yo siempre me complicaba la vida con la propiedad float y ahora que ya voy entendiendo el flexbox veo de lo que me estaba perdiendo!!

@facundotovagliare1080 2 года назад

gracias Victor Robles, ni te imaginas como me has ayudado con tus videos!! gracias por todo!!

@chazegail Год назад

Gracias por tremendo aporte, en un momento maneje muy bien pero sin practica hay cosas que se te olvidan

@g4rdo984 Год назад

Lo que me tomò 2 dias de full reading y practice lo resumiste en 15 min, todo fue entendible :) . Super video !!

@chupitolepame5357 Год назад

Super claro, tenia algunos problemas con mis pantallas de react-native y con este tuto he podido resolver todo. Muchas gracias por el contenido preciso y al punto.

@ciroponzi8253 Год назад

Excelente, sin rodeos y bien practico. 10 puntos

@aarondiazgandoy9743 Год назад

gracias victor, tenía hoy examen de diseño web y me has ayudado bastante, un saludo!

@Hopefulnezz Год назад

Gran video amigo. Me queda mucho mas claro el tema. Mil gracias!

@reh.m3607 Год назад

Este tutorial es tan util y al grano 😍😍 vale oro

@heineken-jv1nc Год назад

Gracias maquina. Muy rápido y al grano.

@VeroCampero Год назад

Estaba abrumada porque no le entendía, en 15min me hiciste entender, lo que con el curso de 9hr me genero mas dudas . Exelente explicación, directo al grano

@jonatancruzmusic 2 года назад

Tengo el master en CSS, es muy bueno!!

@TheMetaliist Год назад

gracias por explicarlo tan facil. espero que sigas subiendo este tipo de contenido

@rafaeldavidgarcia7397 4 месяца назад

Victor muy buen video y muy explicado ,ole por ti! Gracias he aprendido!

@Abel2500pp Год назад

Muchas gracias, ahora puedo aprobar la materia

@maurowasil3744 Год назад

Excelente video! Muchas gracias !

@rafaelibarra280 5 месяцев назад

Muy bien explicado. Gracias

@j3h7brveevrsb4 11 месяцев назад

ya me tenia loco el flexbox, pero cuando mencionaste de el flex-wrap: wrap; me salvaste el dia pude saber lo que buscaba insistentemente.

@edersoncarrera2457 Год назад

Muchas gracias aprendo más con ustedes, en la universidad no enseña ni mrd el profesor, ni siquiera menciona funcionalidades del Flexbox.

@regivanderhorst4023 9 месяцев назад

Rapido y conciso, muy bueno!

@Jonathandda 2 года назад

Excelente video me lo disfrute mucho

@faberordonez9759 2 года назад

Excelente Video me recordó algunas propiedades que ya había olvidado, Victor has probado Code Sandbox?

@devjesusc Год назад

Gracias! super práctico!

@patopixel555 6 месяцев назад

No suelo poner comentarios, pero este video es una maravilla, explicado rápido pero es maravilloso, lo he entendido a la perfección

@puzzled1988 8 месяцев назад

Victor te amo, display flex es lo mejor que existe

@TxusGamer027 Месяц назад

Gracias por el video.

@sergioarroyo-ux3699 Год назад

Excelente video!!! pero para mejorar la ultima parte, no deberías usar margin en las cajas sino padding para que el flex-basis trabaje correcto en porcentajes y así utilizar una clase universal *{box-sizing: border-box;} para que no se sumen al porcentaje ni el padding ni el border de las cajas ni de cualquier elemento y con eso ya estaría.

@Luispaulino-tp7tv 5 месяцев назад

tremendo video muchas gracias por tal ayuda!

@manuelrivasvazquez5308 2 года назад

Buenísimo, gracias.

@arismarparedes4558 11 месяцев назад

Eres lo máximo!!! muchas gracias

@alejandraarango133 11 месяцев назад

que explicacion tan clara y buena

@secheco34 2 года назад

Esto para repaso en verdad fue súper útil. En verdad muchas gracias 😁

@VictorRoblesWEB 2 года назад

De nada 😊

@carrildan Год назад

Video genial! Gracias

@fullmusic4576 2 года назад

Víctor, por favor puedes hacer el mismo vídeo para Grid 🖐️🤔😁

@neburgolden3399 2 года назад

Buenísimo el video tankyu....

@jhonatanbetancur4857 2 года назад

Gracias Por el contenido Bro, eres Un grande!

@VictorRoblesWEB 2 года назад

Gracias! 😊

@RaycelGraterol Год назад

Excelente amigo muchas graciasss exitos

@camiloarellano7810 2 года назад

Gracias crack

@alessandramedeiros8225 Год назад

Muchas gracias Victor!

@unaivicianaviciana Год назад

eres un genio me has arreglado 3 paginas web

@marcocdmx7588 Год назад

Gracias por tu explicación clara. Solo tengo una duda, que pasa si quiero hacer un contenedor con dos cajas, pero en medio de estas está el cierre de una sección y el cierre de main, esto suponiendo que una caja es la sección mencionada y la otra caja es un aside, esto porque normalmente el aside queda fuera de main. Gracias.

@crais01 2 года назад

Esta muy bueno el video

@karola9045 Год назад

Gracias, por eso te amo ❤

@kroneomg Год назад

Gracias bro, me solucionaste un problema que me llevo un dia entero, y solo tenia que poner "flex-direction: column ;" xd que dios te bendiga

@carloseduardosanchezcarras4151 Год назад

gracias brother !!!

@g76860 Год назад

por fin , que alivio para aprender

@EL_LOGOS 2 года назад

Joder en 4 minutos me explicaste una de las funciones más geniales de CSS

@el_quesoni1436 4 месяца назад

Buen video pa me sirvió mucho

@albertobahia1692 8 месяцев назад

Gracias x el aporte!!!

@ulisestobon3979 Год назад

Que hermoso explicas wey, toma tu like

@pedromiguelpagan-rivera8970 7 месяцев назад

Muchas gracias.

@agustinalejandrootarola3188 Год назад

gracias genio!

@jcastillog Год назад

Gracias

@TheBlumitMex 10 месяцев назад

Gran vídeo, muy completo. Te llevas mi like :D

@VictorRoblesWEB 10 месяцев назад

Gracias! 😊

@evilcom Год назад

Gracias!!

@johnnyolmedo6691 Год назад

Hola Victor, como hago si quiero poner un nav arriba a la derecha con el h1 a la misma linea o altura? el h1 estaria arriba a la izquierda.

@richarddelacruz3242 7 месяцев назад

Quede un poco mareado con align-items y align-content, aunque no sé si lo entendí bien, si con align -items agarra esos cuadrados y hace lo posible para darle una medida exacta ,luego trata de ubicarlo en el contenedor para que ocupe cada esquina y deje lo menos libre posible. Y con align-items se encarga de mover el cuadrado o el conjunto de cuadrados al lugar que queramos pero respetando su orden. Es asi?

@nicolascaceresamoedo6509 Год назад

me simplificaste la vida jajajaja. gracias

@romansad Год назад

Te Amo Victor Robles!! un abrazo y un mate desde Argentina gracias chango sos un capo!!!

@capyprograma Год назад

Buen video!

@franderi 2 года назад

Videaso crack

@andersonresideenchincha8871 4 месяца назад

Te amo

@juan.carlosDG2022 2 года назад

Explicas súper bien!! No había visto esto de flexbox. Esto es nuevo en CSS?

@UsuarioNoDisponible2 2 года назад

Hace rato ya que sustituyo los float, muy útil. Saludos

@Alejandro-md1ek 2 года назад

Muy bueno

@VictorRoblesWEB 2 года назад

⭐ Aprende todo de Flexbox, CSS y Maquetación web aquí 👉 victorroblesweb.es/master-css

@mannyanthony9130 Год назад

Muy buena introducción para el uso de este elemento, aunque un poco muy rapido.

@manoloargento4607 Год назад

Cómo le puedo decir al flexbox que en determinada caja pegue el salto para abajo por ejemplo 3 3 3 tres filas y tres columnas

@TheDmartinezarmas 11 месяцев назад

Hola, que diferencia hay entre align-content y align-item? Slds!

@natec2883 Год назад

Saludos! Como puedo hacer que los ítem se desaparezcan solo después de 10 segundos, cuando nadie lo está cliclando y se vuelva a aparecer cuando se lo requiera? Así como un reproductor. De hecho es para un reproductor personalizado.

@mylifeismusic4122 6 месяцев назад

desde el inicio al crear nuevo txt y despues agregarle el .html y .css no se cambian, se siguen con .txt

@javiersistemas Год назад

14:25 parecerá tonto, pero ese flex-grow es alucinante en mi modo de ver las cosas 😄

@martinratti2267 2 года назад

¡Gracias!

@VictorRoblesWEB 2 месяца назад

Gracias a ti Martín!!

@ellias_mb 8 месяцев назад

Me quedo dudas del align-content :(

@elcarlox7659 2 года назад

Hola!, Esta pregunta no tiene nada que ver con el tema del video, pero me gustaria saber cuanto tiempo me tomaria aprox en tener un nivel aceptable en JS?

@danielaraujo235 2 года назад

A ver, depende mucho del tiempo y práctica que le dediques. Yo te recomiendo que te pongas metas sencillas a corto plazo para empezar; como aprender lo básico y todo eso. Ya de ahí, vas viendo

@markuswater 2 года назад

RU-vid no me notificó me entere del video por tu twitter

@VictorRoblesWEB 2 года назад

Activa la campanita del canal y te llegarán (supongo xD)

@markuswater 2 года назад

@@VictorRoblesWEB Ya la tenia activa, pero no se que paso que no me cayo la notificación :(

@VictorRoblesWEB 2 года назад

creo que hay una opción en la campanita, que puedes marcar Todas, y así te llegan cada uno de los videos que publique, pero ya sabemos que youtube hace lo que quiere con esto y no termina de funcionar bien del todo!!

@santiagocarrizo786 4 месяца назад

Tengo el problema que cuando le agrego un contenido a la caja, en mi caso es un video, este se pone como al fondo y deja de comportarse como una caja....

@sergioruiz534 Год назад

A mi no me funciona el flexc cuando lo pongo. Se juntan ambos elementos.

@DeejayFlystereo Год назад

Hola Victor , no entiendo muy bien lo del flex-basis: 50% , ya que cuando reduzco la pantalla la caja 3 se me hace mas larga y se coloca abajo. ¿ esto por que es ? Gracias un saludo.

@DeejayFlystereo Год назад

a vale ya lo entiendo al darsela a la caja1 siempre ocupa el 50% la caja uno del espacio las otras se adaptan.

@pierlennoff 2 года назад

Quien miró en 1.5x? 😎 Buen video bro

@diegosape1863 Год назад

wenardo

@MarilynCunalata Год назад

me puedes ayudar con un examen ? si hay pago.

@izanalekseyev3128 2 года назад

Victor me ayudas con esta pregunta: Utilizar DIV o SECTION.... es lo mismo cierto? SECTION es mejor que div???

@2667Danny Год назад

No ambos tiene el mismo peso pero si le indicas a otro programador o diseñador no lo entendería por lo que section lo entiende que es otro contenido

@yharnam6870 Год назад

Section tiene contenido semántico en cuanto a estructura html, sirve para diferenciar partes del body de HTML, y div sirve para maquetar.

@alistairx5tech Год назад

a mi no me es tan responsivo no se porq no se ponen mas pequeñas las cajas :c cuando aplico el display: flex;

@kelvinmartinez5151 Год назад

Estoy empezando en la programación, y me e complicado un poco en mi proyecto porque tengo 3 imágenes y no me aceptan el display-Flex: justify-content : space- between; Lo que pasa es que las 3 imágenes quedan juntas no se separan sabes cuál puede ser el problema?

@kitosake8248 Год назад

Yo tambien estoy comenzando, prueba meter cada imagen en un div y le pones una class a cada uno, luego le aplicas margin, padding etc

@kelvinmartinez5151 Год назад

@@kitosake8248 jaja a qué no adivinas era un error de sintaxis , en el contenido-contenedor que tenía decís era ccontenedor jajajja tu crees que lo ví como en unas 50 veces que busque de arriba abajo😂😂

@kitosake8248 Год назад

@@kelvinmartinez5151 ahhaha suele pasar bro, buena esa que lo pudiste solucionar

@frangamer15012 2 года назад

Quise hacerlo con imágenes y me quedo cualquier cosa

@javierlenza3213 2 года назад

victor tengo una pregunta para ti, no se si la responderas pero como programador con experiencia que eres te la lanzo para saber tu opinion. Actualmente estoy trabajando en una pyme en un desarrollo con vue y node.js con express y next.js. Me han ofrecido un trabajo en una multinacional pero solo tocaria parte de front-end con vue. Obviamnete pasaria a cobrar algo mas, unos 25k ¿Tu crees que es buena opcion meterme solo con la parte de front o es mejor seguir como fullstack? Disculpa si es muy intrusivo esto y un saludo!!