FLEXBOX (CSS3) | Aprende FLEXBOX DESDE CERO
por Jordan Alexander
Enseña Flexbox desde cero: flujo, alineamiento, propiedades de los flex-items como flex-grow y flex-shrink, y una práctica final creando una landing page.
Recomendado, valoración editorial 4 de 5
verificado 2026-10-01 — sigue siendo gratis en Udemy
Empezar en UdemyRespuesta rápida
Curso gratis de Programación de nivel principiante en Udemy impartido por Jordan Alexander (57 min). Nuestra valoración: 4/5, recomendado. Comprobamos que sigue siendo gratis el 1 de octubre de 2026.
- Veredicto
- 4/5 · Recomendado
- Para quién
- Personas que ya conocen lo básico de HTML y CSS y quieren aprender a maquetar con Flexbox.
- Nivel
- Principiante
- Duración
- 57 min · 11 lecciones
- Precio
- Gratis en Udemy
- Autor
- Jordan Alexander
- Plan sugerido
- 1 sem. · 2 h/sem.
- Verificado
- el 1 de octubre de 2026
Nuestro veredicto
Recomendado, valoración editorial 4 de 5Curso breve y bien enfocado para aprender Flexbox desde cero, con un temario ordenado y una práctica final. Es ideal para quien ya sabe algo de CSS y quiere una introducción rápida; no profundiza más allá del módulo.
Puntos fuertes
- Temario muy enfocado en un único tema, con progresión clara de contenedor a elementos.
- Incluye una práctica final con una landing page.
- Duración corta (57 minutos), fácil de completar.
A tener en cuenta
- Solo cubre Flexbox; no aborda CSS Grid ni otros sistemas de layout.
- No se indica el año de publicación, así que no se puede valorar su actualidad.
- La descripción no detalla ejercicios adicionales más allá de la práctica final.
De qué trata
Curso de Udemy de 57 minutos y 11 lecciones, impartido por Jordan Alexander, dedicado por completo a Flexbox, el módulo de caja flexible de CSS. Se organiza en tres bloques: una parte inicial con introducción, flujo, desbordamiento y alineamiento en los ejes; otra sobre las propiedades de los flex-items; y una práctica final.
Entre los contenidos están flex-basis, flex-grow, flex-shrink, márgenes automáticos y align-self. El curso termina con la creación de una landing page para aplicar lo aprendido.
- Flujo y desbordamiento de elementos en Flexbox
- Alineamiento en el eje principal y vertical
- flex-basis, flex-grow y flex-shrink
- Márgenes automáticos y align-self
- Práctica: crear una landing page
Para quién es este curso
- Personas que ya conocen lo básico de HTML y CSS y quieren aprender a maquetar con Flexbox.
- Quienes buscan un curso corto y centrado en un solo módulo de CSS, con una práctica final.
- Estudiantes que quieren entender cómo crear layouts adaptables a dispositivos móviles.
Mejor busca otro si…
- Quienes ya manejan flex-grow, flex-shrink y align-self y buscan casos avanzados o combinaciones con CSS Grid.
- Personas que aún no han escrito nada de HTML y CSS y necesitan una base general primero.
Antes de empezar
- Nociones básicas de HTML y CSS (selectores y propiedades), que el curso da por supuestas al trabajar directamente con Flexbox.
Qué sabrás hacer al terminar
- Entender el flujo de Flexbox y cómo se desbordan los elementos.
- Alinear elementos en el eje principal y en el eje vertical.
- Usar flex-basis, flex-grow y flex-shrink en los flex-items.
- Aplicar márgenes automáticos y align-self para posicionar elementos individuales.
- Construir una landing page aplicando lo aprendido.
Estructura del curso
- 01
Curso Flexbox: fundamentos
Introducción a Flexbox, flujo, desbordamiento de elementos y alineamiento en el eje principal y en el eje vertical.
- 02
Propiedades de los flex-items
Explicación de flex-basis, flex-grow y flex-shrink, además de márgenes automáticos y align-self.
- 03
Práctica Flexbox
Ejercicio final en el que se crea una landing page aplicando las propiedades vistas.
Capítulos del vídeo
- 01CURSO FLEXBOX
- 02Propiedades Flex-Items
- 03Practica Flexbox
Plan de estudio sugerido
1 semana · unas 2 h por semana
- 1.Sesión 1: capítulo «Curso Flexbox», con flujo, desbordamiento y alineamiento; prueba cada propiedad en un archivo propio.
- 2.Sesión 2: «Propiedades Flex-Items»; practica flex-basis, flex-grow, flex-shrink, márgenes automáticos y align-self.
- 3.Sesión 3: «Practica Flexbox»; construye la landing page y luego repítela sin mirar el vídeo.
El plan cuenta con tiempo para pausar y practicar, no solo con la duración del vídeo. Si quieres adaptarlo a tu semana, lee cómo montar tu plan de estudio semanal.
Consejos para seguirlo
- Ten un editor abierto y reproduce cada ejemplo cambiando los valores para ver el efecto.
- Con flex-grow y flex-shrink, pausa y prueba varias combinaciones de valores en los mismos elementos.
- Tras la landing page, vuelve a maquetarla con otro diseño propio para consolidar.
Antes y después de este curso
- AlternativaCurso de FlexBox desde 0Otro curso de Flexbox desde cero que cubre el mismo tema.
- Después de este cursoCURSO DE CSS COMPLETO: De Principiante a Front-EndAmplía CSS más allá de Flexbox para completar la base de maquetación.
- Antes de este cursoDesarrollo Web con HMTL, CSS y Bootstrap 4! Curso desde ceroOfrece la base de HTML y CSS recomendable antes de entrar en Flexbox.
Cómo lo presenta Jordan Alexander
Aprende y Entiende Flexbox, El módulo flexible más popular de CSS
Holaaaa, ¿Quieres aprender Flexbox? Primero veamos que es... El Módulo de Caja Flexible, comúnmente llamado flexbox. Aprenderlo nos tare muchos beneficios como el hecho de poder diseñar layouts flexibles que nos ayude a adaptar a dispositivos móviles y a diseñar interfaces mucho más rápidas. ¿Qué veremos en este curso? -…
Extracto de la descripción original en Udemy.
Preguntas frecuentes
+¿Cuánto dura el curso?
Dura 57 minutos repartidos en 11 lecciones; con pausas y práctica, puede completarse en unas 2 horas o algo más.
+¿Qué se construye al final?
El último capítulo es una práctica en la que se crea una landing page con Flexbox.
+¿Qué propiedades se explican?
Flujo, desbordamiento, alineamiento en ambos ejes, flex-basis, flex-grow, flex-shrink, márgenes automáticos y align-self.
Análisis editorial elaborado con ayuda de IA a partir de la descripción, los capítulos y la duración publicados en Udemy, y revisado según nuestro método. El contenido del curso es obra de Jordan Alexander; si ves algún error, avísanos.
Guías para sacarle partido
Más cursos de Programación
Agentic AI – Complete Course for Beginners
Curso de unas 24 horas para construir sistemas de agentes de IA con LangChain y LangGraph: Pydantic, flujos de trabajo, memoria, RAG y despliegue en AWS y Render.
Aprende Accesibilidad Web paso a paso
Introducción práctica a la accesibilidad web: pautas y leyes, contenido, navegación, diseño e interacción accesibles, relación con el SEO y evaluación de sitios.
Aprende Godot - Curso completo desde cero
Crea tu primer videojuego 3D en Godot 4 desde cero: escenas, nodos, GDScript, físicas, animaciones, sonido y exportación a .exe.
Aprende JavaScript Ahora! curso completo desde cero para principiantes
Curso de JavaScript desde cero: entorno, variables, tipos, operadores, control de flujo, diez ejercicios y objetos con funciones constructoras.