Imagen del curso gratis CSS flexbox

Curso en línea gratuitoCSS flexbox

Duración del curso en línea: 3 horas y 55 minutos

4.86

estrellaestrellaestrellaestrellaestrella

(7)

Domina layouts responsivos con Flexbox y mejora tu CSS en horas. Curso online gratis con ejercicios y evaluación para afianzar conceptos clave.

En este curso gratuito, aprenda sobre

  • Qué es Flexbox y su papel como módulo clave de maquetación CSS junto con Grid
  • Terminología de Flexbox: contenedor/ítems, main axis/cross axis, start/end según W3C
  • Cómo definir un contenedor flex con display:flex y entender su efecto en los hijos
  • Flujo del layout: flex-direction, flex-wrap y atajo flex-flow; valores por defecto
  • Alineación en eje principal con justify-content y su valor por defecto
  • Alineación en eje cruzado con align-items y align-content; propósito y default de align-items
  • Control de tamaño: flex-grow (crecimiento) y su valor por defecto
  • Control de encogimiento: flex-shrink y su valor por defecto
  • Tamaño base del ítem: flex-basis y qué representa en dirección row
  • Reordenación y ajuste por ítem: order (final de fila) y align-self
  • Patrones de maquetación responsive con Flexbox y casos prácticos comunes
  • Contexto histórico: maquetación previa con floats (y técnicas similares) en frameworks CSS
  • Uso de flex en Bootstrap: utilidades (Bootstrap 4) y cómo aplicarlas para layout rápido

Descripción del curso

Aprende a construir interfaces modernas, limpias y adaptables dominando Flexbox, uno de los sistemas de maquetación más usados en el desarrollo web actual. Este curso online gratuito está diseñado para que entiendas la lógica detrás del modelo flexible y puedas aplicarlo con seguridad en proyectos reales, desde páginas sencillas hasta componentes complejos de una aplicación.

A lo largo del recorrido, trabajarás con los conceptos fundamentales del contenedor y sus elementos: ejes principal y transversal, dirección del flujo, salto de línea y comportamiento del espacio disponible. Ganarás control sobre la alineación y distribución de elementos, evitando soluciones frágiles y mejorando la consistencia visual en diferentes tamaños de pantalla.

La formación pone especial énfasis en tomar decisiones de layout con criterio: cuándo conviene modificar el flujo, cómo se reparte el espacio entre componentes, cómo influyen las reglas de crecimiento, reducción y tamaño base, y qué implicaciones tiene cada ajuste en el resultado final. Con esto, podrás resolver patrones comunes como barras de navegación, tarjetas, grids simples, encabezados, secciones centradas, columnas que se reordenan y diseños que responden sin esfuerzo a móviles y escritorio.

Además, encontrarás ejercicios y preguntas de verificación que te ayudarán a fijar los conocimientos esenciales y detectar rápidamente qué propiedad necesitas en cada situación. El objetivo es que no memorices reglas sueltas, sino que construyas una comprensión práctica para maquetar más rápido y con menos errores.

Al finalizar, estarás en condiciones de crear layouts responsivos con Flexbox, ordenar y alinear elementos con precisión y llevar esas habilidades a entornos habituales de trabajo, incluyendo el uso de utilidades de frameworks populares. Ideal si estás iniciándote en CSS, si quieres consolidar bases de maquetación o si buscas una herramienta sólida para tu perfil profesional en desarrollo web.

Contenido del curso

  • Lección en vídeo: #Flexbox #CSS | Introducción (1/13) - #jonmircha 09m
  • Ejercicio: _¿Cuál es uno de los dos grandes módulos de CSS que se utilizan para hacer maquetación en la web?
  • Lección en vídeo: #Flexbox #CSS | Conceptos Básicos (2/13) - #jonmircha 08m
  • Ejercicio: _¿Cuál es la terminología básica de flexbox según el diagrama oficial de la W3C?
  • Lección en vídeo: #Flexbox #CSS | El flujo de #Flexbox * #FlexDirection + #FlexWrap = #FlexFlow * (3/13) - #jonmircha 20m
  • Ejercicio: ¿Cuál es el valor predeterminado de la propiedad 'flex-wrap' en CSS?
  • Lección en vídeo: #Flexbox #CSS | Alineación del #MainAxis * #JustifyContent * (4/13) - #jonmircha 11m
  • Ejercicio: _¿Cuál es el valor por defecto de la propiedad justify-content en flexbox?
  • Lección en vídeo: #Flexbox #CSS | Alineación del #CrossAxis * #AlignItems y #AlignContent * (5/13) - #jonmircha 33m
  • Ejercicio: _¿Cuál es el valor por defecto de la propiedad "align-items" en flexbox CSS y qué hace esta propiedad?
  • Lección en vídeo: #Flexbox #CSS | Factor de Crecimiento * #FlexGrow * (6/13) - #jonmircha 15m
  • Ejercicio: _¿Cuál es el valor por defecto de la propiedad flex grow?
  • Lección en vídeo: #Flexbox #CSS | Factor de Reducción * #FlexShrink * (7/13) - #jonmircha 11m
  • Ejercicio: _¿Cuál es el valor por defecto de la propiedad flex-shrink en CSS flexbox?
  • Lección en vídeo: #Flexbox #CSS | Tamaño de los hijos #flex * #FlexBasis * (8/13) - #jonmircha 11m
  • Ejercicio: _¿Qué representa la propiedad flex basics en una caja flexbox con dirección "row"?
  • Lección en vídeo: #Flexbox #CSS | Orden y Alineación de los hijos #flex * #Order y #AlignSelf * (9/13) - #jonmircha 10m
  • Ejercicio: _¿Qué valor de order hace que un elemento se posicione al final de la fila en una caja flexbox?
  • Lección en vídeo: #Flexbox #CSS | Maquetación y #ResponsiveDesign con #flex (10/13) - #jonmircha 24m
  • Ejercicio: _¿Qué técnica de maquetación utilizaban los frameworks de CSS antes de la aparición de flexbox y grid?
  • Lección en vídeo: #Flexbox #CSS | Casos Prácticos (11/13) - #jonmircha 24m
  • Ejercicio: _¿Qué propiedad de CSS se utiliza para trabajar con flexbox?
  • Lección en vídeo: #Flexbox #CSS | Casos Prácticos (12/13) - #jonmircha 20m
  • Ejercicio: _¿Qué propiedad de CSS Flexbox permite cambiar el orden de los elementos en la página?
  • Lección en vídeo: #Flexbox #CSS | #Bootstrap y #flex (13/13) - #jonmircha 33m
  • Ejercicio: _¿Qué son las utilidades en Bootstrap 4?

Este curso gratuito incluye:

3 horas y 55 minutos de curso de vídeo online

Certificado digital de finalización del curso (Gratis)

Ejercicios para entrenar tus conocimientos

100% gratis, desde el contenido hasta el certificado

¿Listo para empezar?Descarga la app y empieza hoy mismo.

Instale la aplicación

ahora para acceder al curso
Icono que representa cursos de tecnología y negocios

Más de 5000 cursos gratuitos

¡Programación, inglés, marketing digital y mucho más! Aprende lo que quieras, gratis

Icono de calendario con una diana que representa la planificación de estudios

Plan de estudios con IA

La Inteligencia Artificial de nuestra app puede crear un horario de estudio para el curso que elijas

Icono profesional que representa carrera y negocios

De cero al éxito profesional

Mejora tu currículum con nuestro certificado gratuito y luego usa nuestra Inteligencia Artificial para encontrar el trabajo de tus sueños

También puedes utilizar el código QR o los enlaces que aparecen a continuación.

Código QR - Descargar Cursa - Cursos Online

Más cursos gratuitos en Desarrollo web

¡Libro electrónico y audiolibros gratis! ¡Aprende escuchando o leyendo!

¡Descarga la App ahora para tener acceso a + 5000 cursos, ejercicios, certificados y mucho contenido gratis sin pagar nada!

  • Cursos online 100% gratuitos de principio a fin

    Miles de cursos online en vídeo, ebooks y audiolibros.

  • Más de 60 mil ejercicios gratuitos

    Para poner a prueba tus conocimientos durante los cursos en línea

  • Certificado Digital gratuito válido con Código QR

    Generado directamente desde la galería de fotos de tu celular y enviado a tu correo electrónico

Aplicación Cursa en la pantalla del libro electrónico, la pantalla del curso en video y la pantalla de ejercicios del curso, además del certificado de finalización del curso.