Flexbox

🎯 Objetivo

Dominar Flexbox: justify-content, align-items, flex-direction, gap.

⚔️ Implementación

/* CONTENEDOR FLEX */
.container {
  display: flex;
  justify-content: center;  /* Horizontal */
  align-items: center;      /* Vertical */
  gap: 20px;                /* Espacio entre hijos */
}

/* DIRECCIÓN */
.fila     { flex-direction: row; }       /* → */
.columna  { flex-direction: column; }    /* ↓ */
.inversa  { flex-direction: row-reverse; }

/* JUSTIFY-CONTENT (eje principal) */
.center        { justify-content: center; }
.space-between { justify-content: space-between; }
.space-around  { justify-content: space-around; }
.space-evenly  { justify-content: space-evenly; }

/* ALIGN-ITEMS (eje cruzado) */
.top    { align-items: flex-start; }
.center { align-items: center; }
.bottom { align-items: flex-end; }

/* WRAP */
.envuelve {
  flex-wrap: wrap; /* Nueva línea si no cabe */
}

/* HIJOS FLEX */
.hijo {
  flex: 1;          /* Crece para ocupar espacio */
  flex-shrink: 0;   /* No se encoge */
  flex-basis: 200px; /* Tamaño base */
}

/* CENTRAR PERFECTO */
.centrado {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

🎯 Reto Ninja

MISIÓN DE ALINEACIÓN

📏 El Maestro de la Flexibilidad

1

Crea un contenedor <section> con display: flex y tres <article> (cards) en su interior.

2

Usa justify-content: space-between para separar las tarjetas y gap: 2rem para el espacio interno.

3

Alinea las tarjetas al centro verticalmente usando align-items: center.

4

Haz que el diseño sea flexible: añade flex-wrap: wrap para que las tarjetas bajen si no caben en pantalla.

Consejo del Sensei: Para centrar algo perfectamente en el medio de la pantalla, usa min-height: 100vh en el contenedor padre.

✅ Checklist de Dominio

FLEXIBILIDAD DOMINADA

Pergamino de Alineación