Flexbox | Profe. Gatica

📍 Sección 1

¿Qué es Flexbox?

Flexbox (Flexible Box Layout) es un sistema de layout CSS unidimensional: organiza elementos en una sola dirección (fila o columna).

Es ideal para: navbars, listas de cards, centrar elementos, distribuir espacio entre ítems y crear layouts flexibles sin floats.

💡

Flex = contenedor + items

Al aplicar display: flex al padre, sus hijos directos se convierten automáticamente en flex items.

CSS — Activar Flexbox

.contenedor {
  display: flex;   /* ¡Esto activa Flexbox en los hijos! */
}

📍 Sección 2

Propiedades del Contenedor Flex

flex-direction — dirección del eje principal

flex-direction: row (default)

Item 1

Item 2

Item 3

flex-direction: column

Item 1

Item 2

Item 3

CSS — Contenedor

.contenedor {
  display: flex;

  /* Dirección */
  flex-direction: row;          /* → horizontal (default) */
  flex-direction: column;       /* ↓ vertical */
  flex-direction: row-reverse;  /* ← horizontal invertido */

  /* Alineación en eje PRINCIPAL (horizontal si row) */
  justify-content: flex-start;   /* ← izquierda (default) */
  justify-content: flex-end;     /* → derecha */
  justify-content: center;       /* centrado */
  justify-content: space-between; /* espacio entre ítems */
  justify-content: space-around;  /* espacio alrededor */
  justify-content: space-evenly;  /* espacio igual */

  /* Alineación en eje CRUZADO (vertical si row) */
  align-items: stretch;    /* ocupa todo el alto (default) */
  align-items: flex-start; /* arriba */
  align-items: flex-end;   /* abajo */
  align-items: center;     /* centrado vertical */

  /* Espaciado entre ítems */
  gap: 16px;               /* gap entre todos */
  gap: 8px 16px;           /* filas | columnas */

  /* Permitir que los ítems "salten" de línea */
  flex-wrap: nowrap;       /* todo en una línea (default) */
  flex-wrap: wrap;         /* salta de línea si no cabe */
}

justify-content visual

justify-content: space-between

A

B

C

justify-content: center + align-items: center

Centrado ✓

📍 Sección 3

Propiedades de los Flex Items

CSS — Items

/* flex-grow: cuánto crece relativo a otros */
.item-a { flex-grow: 1; }  /* ocupa 1 parte del espacio libre */
.item-b { flex-grow: 2; }  /* ocupa el doble que item-a */
.item-c { flex-grow: 0; }  /* no crece (default) */

/* flex-shrink: cuánto puede achicarse */
.item { flex-shrink: 1; }   /* puede achicarse (default) */
.item { flex-shrink: 0; }   /* NO se achica nunca */

/* flex-basis: tamaño base antes de grow/shrink */
.item { flex-basis: 200px; }  /* tamaño ideal */
.item { flex-basis: auto; }   /* usa width/height */

/* Shorthand: flex: grow shrink basis */
.item { flex: 1; }          /* flex: 1 1 0 */
.item { flex: 1 0 200px; }  /* crece, no achica, base 200px */
.item { flex: 0 0 auto; }   /* tamaño fijo */

/* align-self: alineación individual */
.item-especial {
  align-self: flex-start;  /* sólo este ítem se va arriba */
}

/* order: cambiar el orden visual */
.item-primero { order: -1; } /* va al principio */
.item-ultimo  { order: 99; } /* va al final */

📍 Sección 4

Casos de Uso Reales

Centrar perfectamente un elemento

CSS

/* Centrado perfecto horizontal y vertical */
.centrar {
  display: flex;
  justify-content: center;  /* horizontal */
  align-items: center;      /* vertical */
  min-height: 100vh;        /* toda la pantalla */
}

Navbar responsive

CSS

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between; /* logo izq, links der */
  padding: 0 24px;
  height: 60px;
}

.navbar-links {
  display: flex;
  gap: 8px;
  list-style: none;
}

/* En mobile: ocultar links */
@media (max-width: 768px) {
  .navbar-links { display: none; }
}

Grid de cards con flex-wrap

CSS

.cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* Cada card: mínimo 250px, máximo crece igual */
.card {
  flex: 1 1 250px;  /* crece, se achica, base 250px */
  max-width: 350px; /* no crezca demasiado */
}

✅ Sección 5

Ejercicios Resueltos

EJERCICIO 1 Footer con Flexbox

Creá un footer con 3 columnas: logo+descripción, links rápidos, y contacto. Que sea responsive.

1El footer es un flex container con 3 hijos.
2Cada columna tiene flex: 1 para distribuirse igual.
3En mobile: flex-direction: column para apilarlas.

HTML + CSS — Solución

/* HTML */
<footer class="footer">
  <div class="footer-col">
    <h3>Profe. Gatica</h3>
    <p>Clases de programación</p>
  </div>
  <div class="footer-col">
    <h4>Links</h4>
    <ul><li><a href="#">Python</a></li></ul>
  </div>
  <div class="footer-col">
    <h4>Contacto</h4>
    <p>info@profegatica.com</p>
  </div>
</footer>

/* CSS */
.footer {
  display: flex;
  gap: 40px;
  padding: 40px;
  background: #020b18;
}

.footer-col { flex: 1; }

@media (max-width: 600px) {
  .footer {
    flex-direction: column;
    gap: 24px;
  }
}

🚀 Sección 6

Ejercicios Propuestos

PROPUESTO 1 Layout de blog con sidebar

Creá un layout de blog con artículo principal (70%) y sidebar (30%).

Usar Flexbox para el layout principal.
Las cards de artículos también usan Flexbox internamente.
En mobile: sidebar se mueve debajo del contenido.

PROPUESTO 2 Galería de fotos responsive

Creá una galería de 9 imágenes con Flexbox.

Desktop: 3 columnas, Tablet: 2 columnas, Mobile: 1 columna.
Usar flex-wrap: wrap y flex-basis.
Efecto hover: escala la imagen y muestra un overlay con el título.