Frontend Academy · Lección

Flexbox para layouts

Use Flexbox para alinear elementos en una fila o columna, distribuir el espacio y ajustar el contenido sin recurrir a trucos con float.

Flexbox para layouts es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué es Flexbox?

Flexbox (Flexible Box Layout) es un modelo de diseño CSS pensado para diseños unidimensionales: distribuye el espacio a lo largo de una sola fila o columna. Resuelve de forma elegante problemas que los diseños basados en float no podían gestionar.

Activar Flexbox

Aplique display: flex al contenedor. Sus elementos secundarios directos se convierten automáticamente en flex items. Los elementos secundarios de esos elementos no se ven afectados.

.container {
  display: flex;
}
/* All direct children are now flex items */

flex-direction

Establece el eje principal. row (valor predeterminado): elementos organizados de izquierda a derecha. row-reverse: de derecha a izquierda. column: de arriba abajo. column-reverse: de abajo arriba.

.stack { display: flex; flex-direction: column; }
.row   { display: flex; flex-direction: row; }

justify-content — alineación en el eje principal

Distribuye el espacio a lo largo del eje principal. flex-start (valor predeterminado), flex-end, center, space-between, space-around, space-evenly.

.nav {
  display: flex;
  justify-content: space-between; /* logo left, links right */
}
.centered {
  display: flex;
  justify-content: center; /* items in the middle */
}

align-items — alineación en el eje transversal

Alinea los elementos a lo largo del eje transversal (perpendicular al eje principal). stretch (valor predeterminado), center, flex-start, flex-end, baseline.

.card {
  display: flex;
  align-items: center; /* vertically center content */
}

Propiedad gap

gap: row-gap column-gap añade espacio entre los flex items sin utilizar margin. Es mucho más limpio que el truco de margin. Es ampliamente compatible con los navegadores modernos.

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;        /* 24px in all directions between items */
  gap: 16px 24px;  /* row-gap column-gap */
}

flex-wrap

De forma predeterminada, los flex items se comprimen para caber en una sola línea. flex-wrap: wrap permite que pasen a líneas nuevas cuando no caben. Combínelo con gap para crear una cuadrícula adaptable sencilla.

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card {
  flex: 1 1 280px; /* grow, shrink, min-width */
}

La abreviatura flex en los elementos

flex: grow shrink basis en los flex items. flex: 1 es una abreviatura de 1 1 0%: los elementos crecen por igual e ignoran su tamaño de contenido. flex: 0 0 200px crea un elemento fijo de 200px.

.sidebar { flex: 0 0 240px; }   /* fixed width */
.main    { flex: 1; }            /* takes remaining space */

align-self

align-self en un flex item anula el valor de align-items del contenedor para ese elemento. Es útil para alinear un elemento de forma diferente a sus elementos hermanos.

.container { display: flex; align-items: center; }
.tall-item  { align-self: flex-start; }

Propiedad order

order controla el orden visual de los flex items sin cambiar el orden del HTML. El valor predeterminado es 0. Los valores más bajos aparecen primero. Utilícelo con moderación: crea una discrepancia entre el orden visual y el orden del DOM o de lectura.

Centrar con Flexbox

La forma más sencilla de centrar un elemento tanto horizontal como verticalmente es establecer en el elemento padre display: flex; justify-content: center; align-items: center.

.overlay {
  position: fixed;
  inset: 0;  /* shorthand for top/right/bottom/left: 0 */
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.5);
}

Comprobación rápida

¿Qué propiedad de Flexbox distribuye el espacio entre los elementos a lo largo del eje principal?

Repaso: fundamentos de Flexbox

display: flex en el contenedor. flex-direction: row o column para definir el eje. justify-content para el espaciado del eje principal. align-items para el eje transversal. gap para los espacios entre elementos. flex-wrap para varias líneas. La abreviatura flex en los elementos para controlar su crecimiento. Un sistema de diseño unidimensional y versátil.

Preguntas frecuentes

¿La lección «Flexbox para layouts» es gratis?

Sí — el texto completo de «Flexbox para layouts» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Flexbox para layouts»?

Use Flexbox para alinear elementos en una fila o columna, distribuir el espacio y ajustar el contenido sin recurrir a trucos con float. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Flexbox para layouts»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Frontend Academy