CSS

Flexbox a fondo: contenedores y elementos flexibles

Domina Flexbox: ejes, alineación, distribución, wrapping y propiedades de los ítems con ejemplos y un laboratorio interactivo.

¿Cuánto sabes de CSS?

📘 Teoría

Conceptos clave

Eje principal, eje cruzado y contenedor vs ítems.

Flexbox trabaja en una dimensión: organiza elementos en una fila o columna.

El contenedor (flex container) define la dirección y el reparto del espacio, y los hijos (flex items) heredan ese comportamiento.

Dos ejes mandan todo: el principal (main axis) y el cruzado (cross axis).

main axis: dirección principal (row o column).
cross axis: perpendicular al main axis.
Las propiedades del contenedor afectan al grupo; las de los ítems afectan a cada elemento.

Propiedades del contenedor

Controla dirección, alineación y distribución.

display: flex activa el contenedor flexible.

flex-direction define el eje principal (row, row-reverse, column, column-reverse).

flex-wrap controla si los ítems saltan de línea (nowrap, wrap, wrap-reverse).

flex-flow es el atajo de direction + wrap.

justify-content alinea en el eje principal (flex-start, center, flex-end, space-between, space-around, space-evenly).

align-items alinea en el eje cruzado (stretch, flex-start, center, flex-end, baseline).

align-content distribuye las líneas cuando hay wrap (flex-start, center, space-between, space-around, stretch).

gap añade separación entre ítems sin márgenes extras.

Contenedor básico

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  align-content: stretch;
  gap: 12px;
}

Propiedades de los ítems

Define tamaño, orden y alineación individual.

order cambia el orden visual sin tocar el HTML.

flex-grow reparte el espacio sobrante.

flex-shrink decide cuánto se encoge un ítem cuando falta espacio.

flex-basis define el tamaño base antes de crecer o encoger.

flex es el atajo: flex: grow shrink basis.

align-self permite alinear un ítem distinto al resto.

Ítems flex

.item {
  flex: 1 1 200px; /* grow, shrink, basis */
}

.item.destacado {
  order: -1;
  align-self: flex-start;
}

Patrones útiles

Soluciones típicas que vas a usar a diario.

Centrado perfecto: justify-content: center + align-items: center.
Barra de navegación: space-between para separar logo y menú.
Tarjetas responsivas: flex-wrap + flex-basis.
Alineación de botones: gap para separar sin márgenes extra.
Auto-margins: margin-left: auto para empujar un ítem al final.

1 Conceptos clave 2 Propiedades del contenedor 3 Propiedades de los ítems 4 Patrones útiles

🧭 Visuales clave

Ejes de Flexbox

Aclara que propiedad alinea en cada eje para evitar confusiones frecuentes.

Diagrama de ejes principal y cruzado en flexbox para row y column.

Ejes de Flexbox y decisiones de alineación

Aclara dónde actúan justify-content y align-items según la dirección del contenedor.

Diagrama de main axis y cross axis en flex-direction row y column.

🧪 Aprende probando

Ejemplo Demo interactiva: laboratorio visual de Flexbox Explora una demo amplia para entender ejes, alineación, wrapping y reparto del espacio en un layout real.

⌄

Ejemplo Barra de tarjetas responsiva

⌄