flex: 1

 

flex: 1 explicado de forma sencilla

flex: 1 es una propiedad mágica en CSS Flexbox que le dice a un elemento: "ocupa todo el espacio que puedas".

---

🔍 ¿Qué significa exactamente?

flex: 1 es una abreviatura de tres propiedades:

css

flex: 1;
/* Es equivalente a: */
flex-grow: 1;    /* Puede crecer */
flex-shrink: 1;  /* Puede encogerse */
flex-basis: 0%;  /* Empieza desde 0 */

---

📊 Analogía visual

Imagina que tienes una mesa y 3 personas:

text

Sin flex: 1 (todos toman solo su espacio):
┌─────────────────────────────────┐
│ [Yo] [Tú]           [Él]        │
│ 30px  20px          40px        │
└─────────────────────────────────┘
       ↑ Mucho espacio vacío

Con flex: 1 (todos se reparten el espacio):
┌─────────────────────────────────┐
│ [    Yo    ] [    Tú    ] [    Él    ] │
│    1/3        1/3         1/3       │
└─────────────────────────────────┘
       ↑ Todos ocupan lo mismo

---

🎨 Ejemplo práctico con tu código

En tu tarjeta, tenías esta estructura:

css

.card-uno {
    display: flex;
    flex-direction: column;  /* Apila verticalmente */
    height: 400px;  /* Supongamos que la tarjeta mide 400px */
}

.card-header {
    /* Altura natural: 50px */
}

.card-body {
    flex: 1;  /* ← OCUPA TODO EL ESPACIO RESTANTE */
}

.card-footer {
    /* Altura natural: 40px */
}

Visualización:

text

Tarjeta de 400px de altura:
┌─────────────────┐
│Header: 50px     │ ← Altura fija
├─────────────────┤
│                 │
│Body: 310px      │ ← flex: 1 (ocupa lo que sobra)
│(se expande)     │
│                 │
├─────────────────┤
│Footer: 40px     │ ← Altura fija
└─────────────────┘

Cálculo: 400px - 50px - 40px = 310px para el body

---

🧪 Experimentos para entender

Prueba este código y cambia los valores:

html

<div class="contenedor">
    <div class="elemento-1">Elemento 1</div>
    <div class="elemento-2">Elemento 2</div>
    <div class="elemento-3">Elemento 3</div>
</div>

<style>
.contenedor {
    display: flex;
    height: 200px;
    background: #eee;
    gap: 5px;
}

/* PRUEBA CAMBIANDO LOS VALORES */
.elemento-1 {
    background: lightblue;
    flex: 1;  /* Cambia a 2, 3, o quítalo */
}

.elemento-2 {
    background: lightgreen;
    flex: 1;  /* Cambia a 2, 3, o quítalo */
}

.elemento-3 {
    background: lightcoral;
    flex: 1;  /* Cambia a 2, 3, o quítalo */
}
</style>

Pruebas:

1. Todos con flex: 1 → Ocupan el mismo espacio (33.33% cada uno)

2. Uno con flex: 2 y otros con flex: 1 → El de flex: 2 ocupa el doble

3. Uno sin flex → Solo ocupa su contenido, los demás se reparten el resto

---

📐 Fórmula de distribución

Cuando varios elementos tienen flex, el espacio se reparte según el factor de crecimiento:

css

/* Fórmula: */
Espacio total = 1000px
Elemento A: flex: 1 → (1/4) de 1000px = 250px
Elemento B: flex: 1 → (1/4) de 1000px = 250px  
Elemento C: flex: 2 → (2/4) de 1000px = 500px
Total: 4 partes (1+1+2=4)

---

🎯 Casos comunes de uso

1. Body que ocupa todo (tu caso)

css

.card {
    display: flex;
    flex-direction: column;
    height: 300px;
}
.header { flex-shrink: 0; }  /* Altura fija */
.body { flex: 1; }           /* Ocupa resto */
.footer { flex-shrink: 0; }  /* Altura fija */

2. Columnas iguales

css

.contenedor {
    display: flex;
}
.columna {
    flex: 1;  /* Todas ocupan lo mismo */
}

3. Sidebar + contenido principal

css

.sidebar {
    width: 250px;  /* Fijo */
}
.contenido {
    flex: 1;  /* Ocupa todo lo que sobra */
}

---

🔑 Propiedades individuales

Propiedad	Qué hace	Valores
flex-grow	Capacidad de crecer	0 (no crece), 1 (crece), 2 (crece el doble)
flex-shrink	Capacidad de encogerse	0 (no se encoge), 1 (se encoge)
flex-basis	Tamaño base antes de crecer/encoger	auto, 0%, 100px

---

💡 Ejemplo con tu código

Así es como funciona en tu tarjeta:

css

.card-uno {
    display: flex;
    flex-direction: column;
    /* No tiene altura definida, la decide el contenedor padre */
}

.card-header {
    flex-shrink: 0;  /* No se encoge aunque falte espacio */
    /* flex-grow: 0 (implícito) - no crece */
}

.card-body {
    flex: 1;  /* = flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
    /* Esto hace que el body OBLIGATORIAMENTE ocupe todo el espacio */
}

.card-footer {
    flex-shrink: 0;  /* No se encoge */
}

¿Qué pasa si no pones flex: 1?

css

.card-body {
    /* Sin flex: 1 */
}

El body solo ocuparía la altura de su contenido:

text

┌─────────────────┐
│Header (50px)    │
├─────────────────┤
│Body (30px)      │ ← Solo su contenido
│(espacio vacío)  │
│                 │
├─────────────────┤
│Footer (40px)    │
└─────────────────┘
¡Hay espacio vacío entre body y footer!

---

📝 Resumen rápido

• flex: 1 = "ocupa todo el espacio disponible"

• En vertical (column) → ocupa toda la altura restante

• En horizontal (row) → ocupa todo el ancho restante

• Es la forma más fácil de hacer elementos elásticos

• Combínalo con flex-shrink: 0 en elementos que no quieres que se encojan

Regla mnemotécnica: *"flex 1 = ocupa 1 parte del pastel"*

¿Te gustaría que profundice en algún aspecto específico, como la diferencia entre flex: 1 y flex: auto, o cómo funciona con flex-wrap?