DESARROLLO FRONTEND

CSS Flexbox: Arquitectura del Layout Flexible

Cómo distribuir espacio, alinear elementos y crear interfaces responsive sin hacks

Flexbox es clave para layouts modernos. Aprende a usar su sistema de ejes, distribuye el espacio y alinea elementos para crear interfaces responsive, limpias y profesionales con total control.

1

Flexbox: qué es y para qué se usa

Flexbox es un sistema de layout unidimensional diseñado para organizar elementos en fila o columna de forma flexible. Permite alinear, distribuir espacio y adaptar el contenido dinámicamente sin cálculos manuales, siendo ideal para interfaces modernas y diseño responsive.

<!-- Contenedor que luego se convertirá en flex -->
<div class="contenedor">
  <!-- Cada elemento interno será un flex item -->
  <div class="item">Elemento 1</div>
  <div class="item">Elemento 2</div>
  <div class="item">Elemento 3</div>
</div>
2

Contenedor flex y elementos hijos

Flexbox funciona a partir de una relación clara entre un contenedor y sus hijos directos. El contenedor define el contexto flex y solo los elementos hijos inmediatos responden a las propiedades de Flexbox.

/* Contenedor padre que define el contexto Flexbox */
.contenedor {
  /* Activa el sistema Flexbox */
  display: flex;
}

/* Solo los hijos directos de .contenedor se convierten en flex items */
/* Los elementos anidados más profundo no heredan el comportamiento flex */
Relación entre contenedor flex y elementos hijos
Las propiedades flex no se heredan a nietos o elementos anidados.
3

Estructura HTML base para Flexbox

Flexbox no modifica el HTML, pero su estructura es clave. Cualquier etiqueta puede convertirse en contenedor flex, manteniendo una semántica clara y accesible.

<!-- Navegación que será distribuida con Flexbox -->
<nav class="menu">
  <a href="#">Inicio</a>
  <a href="#">Servicios</a>
  <a href="#">Contacto</a>
</nav>
4

display: flex: el disparador del sistema

La propiedad display: flex activa Flexbox. Desde ese momento, los hijos se alinean automáticamente en una fila y pasan a comportarse como elementos flexibles.

/* Contenedor que iniciará el contexto Flexbox */
.menu {
  /* Activa el sistema Flexbox */
  display: flex;
}

/* A partir de este momento, los hijos directos se convierten en flex items */
/* Sin display: flex, ninguna propiedad flex tiene efecto */
Activación del sistema Flexbox con display flex
Sin display flex, ninguna propiedad flex tiene efecto.
5

Los dos ejes de Flexbox

Flexbox trabaja con dos ejes: el eje principal, que define la dirección del flujo, y el eje secundario, que es perpendicular. Todas las alineaciones se calculan en función de estos ejes.

<!-- Los elementos se distribuyen según el eje principal -->
<div class="contenedor">
  <div class="item">A</div>
  <div class="item">B</div>
</div>
6

flex-direction: control del flujo

La propiedad flex-direction define si los elementos se distribuyen en fila o columna, y también permite invertir el orden visual sin modificar el HTML.

/* Contenedor que organiza el flujo de los elementos */
.contenedor {
  /* Activa el sistema Flexbox */
  display: flex;

  /* Define la dirección del eje principal */
  /* row: fila (por defecto) */
  /* column: columna */
  /* row-reverse / column-reverse: invierten el orden visual */
  flex-direction: row;
}
Comparación visual de las direcciones posibles en Flexbox
Flex-direction redefine completamente el comportamiento del layout.
7

flex-wrap: permitir múltiples líneas

Por defecto, Flexbox intenta mantener todos los elementos en una sola línea. Con flex-wrap podemos permitir que los ítems salten a nuevas filas o columnas cuando el espacio disponible no alcanza, logrando layouts adaptables y responsive.

<!-- Galería flexible que puede romper en varias filas -->
<div class="galeria">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
8

flex-wrap: control del desbordamiento

La propiedad flex-wrap define si los elementos permanecen en una sola línea o pueden distribuirse en múltiples líneas dentro del contenedor.

/* Contenedor tipo galería */
.galeria {
  /* Activa el sistema Flexbox */
  display: flex;

  /* Controla si los ítems pueden pasar a otra línea */
  /* nowrap: fuerza una sola línea (valor por defecto) */
  /* wrap: permite múltiples líneas */
  /* wrap-reverse: invierte el orden de las líneas */
  flex-wrap: wrap;
}
Uso de flex-wrap para permitir múltiples líneas
Sin flex-wrap, los ítems intentan encogerse para no romper la línea.
9

flex-flow: dirección y envoltura juntas

flex-flow es una propiedad abreviada que combina flex-direction y flex-wrap. Permite definir el comportamiento del layout en una sola línea, haciendo el código más claro y mantenible.

<!-- Contenedor con dirección y wrap definidos -->
<section class="listado">
  <article class="card">A</article>
  <article class="card">B</article>
  <article class="card">C</article>
</section>
10

flex-flow: shorthand recomendado

Al usar flex-flow se define primero la dirección del eje principal y luego el comportamiento de envoltura. Es la forma recomendada en proyectos reales.

/* Contenedor que combina dirección y wrap */
.listado {
  /* Activa el sistema Flexbox */
  display: flex;

  /* flex-flow = flex-direction + flex-wrap */
  /* row wrap: fila con múltiples líneas */
  /* row nowrap: fila en una sola línea */
  /* column wrap: columna con múltiples bloques */
  /* column nowrap: columna sin saltos */
  flex-flow: row wrap;
}
Ejemplo práctico de flex-flow en un contenedor
Equivale a usar flex-direction y flex-wrap por separado.
11

justify-content: alineación en el eje principal

justify-content permite distribuir los elementos a lo largo del eje principal utilizando el espacio libre del contenedor. Es ideal para centrar, separar o empujar contenido horizontal o verticalmente.

<!-- Elementos alineados en el eje principal -->
<div class="barra">
  <div>Uno</div>
  <div>Dos</div>
  <div>Tres</div>
</div>
12

justify-content: distribución del espacio

Además de centrar o alinear al inicio y al final, justify-content permite repartir el espacio entre los elementos usando distintos criterios como space-between, space-around y space-evenly.

/* Contenedor tipo barra (navbar, header, footer, etc.) */
.barra {
  /* Activa el sistema Flexbox */
  display: flex;

  /* Distribuye los ítems sobre el eje principal */
  /* flex-start: todos al inicio (valor por defecto) */
  /* flex-end: todos al final */
  /* center: centrados */
  /* space-between: extremos a los bordes */
  /* space-around: espacio alrededor de cada ítem */
  /* space-evenly: espacio idéntico entre ítems y bordes */
  justify-content: space-between;
}
Comparación visual de los valores avanzados de justify-content
Cada valor distribuye el espacio de manera diferente.
13

align-items: alineación en el eje transversal

La propiedad align-items controla cómo se alinean los elementos en el eje transversal de Flexbox. Si el flujo es en fila, alinea verticalmente; si es en columna, alinea horizontalmente.

<!-- Contenedor con elementos de distinta altura -->
<div class="contenedor">
  <div class="item alto">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>
14

align-items: valores más usados

align-items permite alinear los ítems al inicio, al final, al centro o estirarlos automáticamente para ocupar todo el tamaño del contenedor en el eje transversal.

/* Contenedor Flexbox */
.contenedor {
  /* Activa el sistema Flexbox */
  display: flex;

  /* Alineación sobre el eje transversal */
  /* stretch: estira los ítems (valor por defecto) */
  /* flex-start: alinea al inicio del eje transversal */
  /* center: centra los ítems */
  /* flex-end: alinea al final del eje transversal */
  /* baseline: alinea según la línea base del texto */
  align-items: center;
}
Comparación visual de los valores de align-items
La alineación depende siempre del eje transversal.
15

align-content: alineación de múltiples líneas

align-content se utiliza cuando hay varias líneas de elementos flex. Alinea el bloque completo de filas dentro del contenedor y solo funciona si flex-wrap está activo.

<!-- Contenedor con múltiples filas de elementos -->
<div class="muro">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
16

align-content: cuándo y cómo usarlo

align-content distribuye las filas completas dentro del contenedor. Es similar a justify-content, pero actúa sobre el eje transversal cuando hay múltiples líneas.

/* Contenedor con múltiples filas de elementos */
.muro {
  /* Activa el sistema Flexbox */
  display: flex;

  /* Permite que los ítems generen más de una línea */
  flex-wrap: wrap;

  /* Altura necesaria para que exista espacio transversal */
  height: 400px;

  /* Alinea el bloque completo de filas en el eje transversal */
  /* Solo tiene efecto si hay más de una línea */
  align-content: center;
}
Ejemplo práctico de align-content con múltiples filas
Funciona solo cuando hay más de una línea.
17

gap: espaciado moderno entre elementos

La propiedad gap crea un espacio uniforme entre los elementos flex sin necesidad de usar márgenes individuales. Aplica solo entre ítems, no en los bordes externos.

<!-- Tarjetas separadas sin usar margin -->
<div class="tarjetas">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>
18

gap: filas y columnas

gap permite definir el espacio entre filas y columnas de manera uniforme. También puede dividirse en row-gap y column-gap para un control más preciso.

/* Contenedor que organiza tarjetas con Flexbox */
.tarjetas {
  /* Activa el sistema Flexbox */
  display: flex;

  /* Permite que las tarjetas pasen a una nueva fila si no entran */
  flex-wrap: wrap;

  /* Espacio uniforme entre filas y columnas */
  /* No agrega espacio en los bordes externos */
  gap: 24px;
}
Uso de gap para separar filas y columnas en Flexbox
Gap mejora la consistencia visual del layout.
19

Propiedades de los ítems Flex

Además de las propiedades del contenedor, cada ítem flex puede controlarse individualmente. Esto permite modificar su orden, tamaño y alineación sin afectar al resto del layout.

<!-- Ítems flex con comportamiento individual -->
<div class="layout">
  <div class="item destacado">Principal</div>
  <div class="item">Secundario</div>
  <div class="item">Extra</div>
</div>
20

order: cambiar el orden visual

La propiedad order permite reordenar visualmente los elementos sin modificar el HTML. Todos los ítems tienen order: 0 por defecto y los valores más bajos aparecen primero.

/* Ítem destacado que se mostrará primero */
.destacado {
  /* Un valor menor aparece antes que los demás */
  order: -1;
}

/* Ítem secundario que se mostrará después */
.secundario {
  /* Valores mayores se colocan más al final */
  order: 2;
}
Reordenamiento visual de elementos con la propiedad order
Order cambia el orden visual, no el orden semántico del HTML.

Lección anterior

Capas de elementos web mostrando flujo, superposición y posicionamiento en CSS
Dominar display y position es entender cómo el navegador piensa el layout.

CSS Display y Position

Aprende cómo el navegador renderiza el layout. Domina display block vs inline, posicionamiento con relative, absolute y fixed, y controla la superposición con z-index para diseños web profesionales.

Comenzar Lección

Lección actual

Representación visual de ejes principales y transversales organizando elementos con CSS Flexbox
Flexbox permite al navegador distribuir y alinear elementos de forma inteligente según el espacio disponible.

CSS Flexbox: Arquitectura del Layout Flexible

Flexbox es clave para layouts modernos. Aprende a usar su sistema de ejes, distribuye el espacio y alinea elementos para crear interfaces responsive, limpias y profesionales con total control.

Lección actual

Lección siguiente

Esquema visual de un layout web bidimensional construido con CSS Grid
CSS Grid permite diseñar layouts completos controlando filas y columnas al mismo tiempo.

CSS Grid Maquetación

Domina CSS Grid para crear layouts bidimensionales complejos. Aprende a controlar filas, columnas y áreas para diseñar interfaces web profesionales, ordenadas y mantenibles.

Comenzar Lección
¿Qué es Flexbox?⌄Flexbox es un sistema de layout de CSS diseñado para distribuir, alinear y dimensionar elementos dentro de un contenedor en una sola dimensión (fila o columna). Permite crear interfaces flexibles y responsive incluso cuando el tamaño de los elementos es dinámico o desconocido.
¿Cuál es la diferencia principal entre Flexbox y CSS Grid?⌄Flexbox es un modelo unidimensional: organiza elementos en una fila o en una columna. CSS Grid es bidimensional: controla filas y columnas al mismo tiempo. Flexbox es ideal para componentes y alineaciones; Grid es mejor para la estructura general de una página.
¿Cómo centro un elemento vertical y horizontalmente?⌄Aplicá `display: flex` al contenedor y luego usá `justify-content: center` para el eje principal y `align-items: center` para el eje transversal. Es la forma más simple y robusta de centrar contenido en CSS moderno.
¿Para qué sirven los ejes Main y Cross?⌄Flexbox trabaja con ejes abstractos. El Main Axis sigue la dirección definida por `flex-direction`, mientras que el Cross Axis es perpendicular. Todas las propiedades de alineación dependen de estos ejes, no de arriba, abajo, izquierda o derecha.
¿Qué propiedad define si los elementos van en fila o columna?⌄La propiedad `flex-direction`. Sus valores principales son `row` (fila, por defecto), `column` (columna), y sus variantes inversas `row-reverse` y `column-reverse`.
¿Cómo hago que los elementos bajen a la siguiente línea si no caben?⌄Usá `flex-wrap: wrap` en el contenedor. Por defecto Flexbox usa `nowrap`, lo que intenta forzar todos los elementos en una sola línea, incluso encogiéndolos.
¿Qué hace `justify-content: space-between`?⌄Distribuye los elementos a lo largo del eje principal colocando el primero al inicio, el último al final y repartiendo el espacio sobrante de forma uniforme entre los elementos intermedios.
¿Por qué `align-items` no funciona en mi contenedor?⌄Generalmente porque no hay espacio disponible en el eje transversal. Si el contenedor no tiene altura definida o su tamaño es igual al de su contenido, no hay espacio extra para alinear.
¿Qué es `flex-basis`?⌄`flex-basis` define el tamaño base de un ítem antes de que Flexbox reparta el espacio disponible. Funciona como un `width` o `height` contextual, dependiendo de la dirección del layout.
¿Cuál es la diferencia entre `align-items` y `align-content`?⌄`align-items` alinea los ítems dentro de una sola línea. `align-content` alinea el conjunto de líneas dentro del contenedor y solo tiene efecto cuando hay múltiples líneas con `flex-wrap` activo.