Tema 15 · Flex Items

Flexbox: Elementos Hijos (grow, shrink, basis)

Aprende las propiedades individuales de los elementos flexibles: crecimiento con flex-grow, encogimiento con flex-shrink, flex-basis, el shorthand flex: 1, align-self y reordenamiento con order.

Flexbox: Alineación, Distribución y gap Flexbox en la Práctica: Navbar y Tarjetas

Propiedades de los Flex Items

Mientras que justify-content y align-items se aplican sobre el contenedor padre, CSS nos brinda propiedades de alta precisión para controlar el comportamiento individual de cada elemento hijo dentro del flujo flexible.

Propiedad Función Principal Valores Habituales
flex-grow Factor de crecimiento. Define qué proporción del espacio sobrante absorbe el elemento. 0 (defecto, no crece), 1, 2.
flex-shrink Factor de encogimiento. Define la resistencia del elemento a contraerse si falta espacio. 1 (defecto, se contrae), 0 (ancho fijo, nunca se comprime).
flex-basis El tamaño inicial del elemento antes de distribuir el espacio sobrante o contraerlo. auto (defecto), 200px, 25%.
align-self Sobrescribe la regla de align-items del padre solo para este elemento en particular. auto, flex-start, center, flex-end, stretch.
order Modifica el orden visual de renderizado sin alterar el árbol HTML del DOM. 0 (defecto), enteros positivos o negativos (ej. -1, 2).

El Gran Atajo: flex: 1

En el desarrollo del día a día casi nunca escribimos flex-grow, flex-shrink y flex-basis por separado. Usamos la sintaxis abreviada: 

/* Equivale a flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
.columna-flexible {
  flex: 1; /* Ocupa equitativamente todo el espacio disponible */
}

⚡ Barra de Búsqueda Flexible con flex: 1 y align-self

Observa cómo el campo central de búsqueda se expande automáticamente ocupando todo el ancho libre (flex: 1), mientras los botones laterales conservan su tamaño natural:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Flexbox: Elementos Hijos</title>
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      background-color: #f8fafc;
      margin: 0;
      padding: 30px;
      color: #0f172a;
    }

    /* Barra contenedora */
    .barra-navegacion {
      display: flex;
      align-items: center;
      gap: 12px;
      background: white;
      border: 1px solid #cbd5e1;
      border-radius: 12px;
      padding: 12px 18px;
      max-width: 600px;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
      margin-bottom: 25px;
    }

    .logo-fijo {
      flex: 0 0 auto; /* No crece ni se encoge */
      font-weight: 800;
      color: #0284c7;
      font-size: 1.1rem;
    }

    /* El input crece para ocupar todo el espacio disponible */
    .input-expandible {
      flex: 1; /* flex-grow: 1 */
      padding: 10px 14px;
      border: 1px solid #94a3b8;
      border-radius: 6px;
      font-size: 0.95rem;
      outline: none;
    }

    .input-expandible:focus {
      border-color: #0284c7;
      box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
    }

    .btn-fijo {
      flex: 0 0 auto;
      background: #0284c7;
      color: white;
      border: none;
      padding: 10px 18px;
      border-radius: 6px;
      font-weight: 600;
      cursor: pointer;
    }

    /* Demostración de order y align-self */
    .caja-align-self {
      display: flex;
      align-items: flex-start;
      height: 120px;
      background: #e2e8f0;
      border-radius: 8px;
      padding: 12px;
      gap: 12px;
      max-width: 600px;
    }

    .tag {
      background: #3b82f6;
      color: white;
      padding: 8px 12px;
      border-radius: 6px;
      font-weight: bold;
    }
  </style>
</head>
<body>

  <h3>1. Barra con Input Expandible (flex: 1)</h3>
  <div class="barra-navegacion">
    <div class="logo-fijo">Kilopolis</div>
    <input type="text" class="input-expandible" placeholder="Buscar manuales de programación...">
    <button class="btn-fijo">Buscar</button>
  </div>

  <h3>2. Sobrescribir Alineación con align-self</h3>
  <div class="caja-align-self">
    <div class="tag">Padre: flex-start</div>
    <div class="tag" style="background: #10b981; align-self: center;">align-self: center</div>
    <div class="tag" style="background: #ef4444; align-self: flex-end;">align-self: flex-end</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.