Tema 16 · Casos Prácticos

Flexbox en la Práctica: Navbar y Tarjetas

Aprende a maquetar los dos componentes más demandados del desarrollo web profesional: una barra de navegación completa con logo y enlaces, y una cuadrícula de tarjetas con altura igualada y botón anclado al pie.

Flexbox: Elementos Hijos (grow, shrink, basis) CSS Grid: Contenedor, Columnas y Filas

Componente 1: La Barra de Navegación Profesional (Navbar)

El patrón universal de barra de navegación sitúa el logotipo a la izquierda, los enlaces de navegación agrupados en el centro o derecha, y el botón de acción al extremo opuesto. 

.navbar {
  display: flex;
  justify-content: space-between; /* Empuja el logo a un extremo y los enlaces al otro */
  align-items: center;            /* Centra verticalmente todos los elementos */
  padding: 14px 24px;
}

.nav-links {
  display: flex;
  gap: 20px;                      /* Espaciado perfecto sin márgenes hackeados */
  list-style: none;
  margin: 0;
  padding: 0;
}

Componente 2: Tarjetas con Alturas Iguales y Botón Anclado

En una cuadrícula de precios o productos, las tarjetas frecuentemente tienen descripciones de diferente longitud. Sin Flexbox, los botones inferiores quedarían a alturas desalineadas.

El truco maestro de Flexbox consiste en convertir la propia tarjeta en un contenedor de columna y aplicar margin-top: auto sobre el pie de la tarjeta: 

.tarjeta-producto {
  display: flex;
  flex-direction: column; /* Apila título, texto y botón verticalmente */
}

.tarjeta-pie {
  margin-top: auto;       /* Absorbe todo el espacio vertical sobrante empujando el botón al fondo */
}

⚡ Navbar Completa y Tarjetas de Altura Uniforme

Observa cómo los tres botones de compra quedan perfectamente alineados al pie de cada tarjeta, sin importar que los textos tengan diferente longitud:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Flexbox en la Práctica</title>
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      background-color: #f1f5f9;
      margin: 0;
      padding: 20px;
      color: #0f172a;
    }

    /* 1. Navbar con Flexbox */
    .mi-navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #ffffff;
      padding: 12px 24px;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
      margin-bottom: 25px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    }

    .nav-brand {
      font-weight: 800;
      font-size: 1.2rem;
      color: #0284c7;
      text-decoration: none;
    }

    .nav-menu {
      display: flex;
      gap: 16px;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .nav-menu a {
      color: #475569;
      text-decoration: none;
      font-size: 0.95rem;
      font-weight: 500;
    }

    .nav-menu a:hover {
      color: #0284c7;
    }

    /* 2. Rejilla de Tarjetas */
    .grid-tarjetas {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }

    .card {
      flex: 1 1 240px; /* Base de 240px que se adapta al espacio */
      display: flex;
      flex-direction: column;
      background: white;
      border: 1px solid #cbd5e1;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    }

    .card h4 {
      margin-top: 0;
      color: #0f172a;
    }

    .card p {
      color: #64748b;
      font-size: 0.9rem;
      line-height: 1.5;
    }

    /* El pie se ancla al fondo gracias a margin-top: auto */
    .card-footer {
      margin-top: auto;
      padding-top: 15px;
      border-top: 1px solid #f1f5f9;
    }

    .btn-comprar {
      width: 100%;
      background: #0284c7;
      color: white;
      border: none;
      padding: 10px;
      border-radius: 6px;
      font-weight: bold;
      cursor: pointer;
    }

    .btn-comprar:hover {
      background: #0369a1;
    }
  </style>
</head>
<body>

  <!-- Navbar -->
  <header class="mi-navbar">
    <a href="#" class="nav-brand">Kilopolis Academia</a>
    <ul class="nav-menu">
      <li><a href="#">Cursos</a></li>
      <li><a href="#">Manuales</a></li>
      <li><a href="#">Sandbox</a></li>
    </ul>
  </header>

  <!-- Tarjetas con alturas equilibradas -->
  <div class="grid-tarjetas">
    <div class="card">
      <h4>Plan Básico</h4>
      <p>Acceso a todos los manuales introductorios de HTML5 y CSS3.</p>
      <div class="card-footer">
        <button class="btn-comprar">Comenzar Gratis</button>
      </div>
    </div>

    <div class="card" style="border-color: #38bdf8;">
      <h4 style="color: #0284c7;">Plan Pro</h4>
      <p>
        Acceso ilimitado a manuales avanzados, consola de JavaScript ES6+, proyectos fullstack, bases de datos MySQL en vivo y soporte con Sócrates AI.
      </p>
      <div class="card-footer">
        <button class="btn-comprar" style="background:#2563eb;">Elegir Plan Pro</button>
      </div>
    </div>

    <div class="card">
      <h4>Plan Empresas</h4>
      <p>Capacitación técnica corporativa y métricas de avance de equipo.</p>
      <div class="card-footer">
        <button class="btn-comprar">Contactar Ventas</button>
      </div>
    </div>
  </div>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de CSS3, Flexbox y Grid y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno HTML/CSS/BS5 Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.