Los items: grow, shrink, basis, self y order

El reparto del espacio sobrante

El contenedor pone las reglas generales —dirección y alineación—; los items deciden cómo se reparten el espacio del eje principal. Piensa en ellos como comensales repartiéndose la cuenta: unos pagan a partes iguales, otro insiste en poner siempre lo mismo. Eso se gobierna con tres propiedades que casi siempre se escriben juntas mediante el atajo flex.

flex-basis: el tamaño de partida

flex-basis es el tamaño base del item en el eje principal antes de repartir sobras o recortes. Es como un width (o height en columna) que flexbox usa como punto de partida:

.item {
  flex-basis: 200px;   /* parte de 200px; auto usa el contenido */
}

flex-grow: cómo crecer si sobra espacio

Si tras colocar todos los items con su flex-basis sobra espacio, flex-grow decide quién se lo queda. Es un factor de proporción, no un tamaño:

.lateral { flex-grow: 0; }  /* no crece (por defecto) */
.centro  { flex-grow: 1; }  /* absorbe TODO el espacio sobrante */

Si dos items tienen flex-grow: 1 y otro flex-grow: 2, el último recibe el doble de las sobras que cada uno de los otros.

flex-shrink: cómo encoger si falta espacio

Al revés: si falta espacio, flex-shrink decide quién cede. Su valor por defecto es 1 (todos encogen). Ponlo a 0 para que un item nunca se encoja por debajo de su base, útil para logos o iconos:

.logo { flex-shrink: 0; }   /* mantiene su tamaño aunque falte sitio */

El atajo flex: grow shrink basis

En la práctica casi nunca escribes las tres por separado, sino el atajo flex: <grow> <shrink> <basis>:

.item { flex: 1; }            /* = flex: 1 1 0  → reparten todo a partes iguales */
.item { flex: 0 0 200px; }    /* tamaño fijo de 200px, ni crece ni encoge */
.item { flex: 1 1 300px; }    /* parte de 300px y reparte el resto */

⚠️ TRAMPA CLÁSICA: el shorthand flex confunde porque flex: 1 no significa "ancho 1", sino flex: 1 1 0 (crece, encoge y parte de cero). Quédate con dos de memoria: flex: 1 ("repártete el espacio") y flex: 0 0 auto ("quédate con tu tamaño") y vas sobrado.

flex: 1 es el patrón estrella: un panel que ocupa "todo lo que quede" junto a otros de tamaño fijo.

align-self: la excepción a align-items

align-self permite que un solo item se alinee distinto al resto en el eje cruzado, sobreescribiendo el align-items del contenedor:

.contenedor { display: flex; align-items: flex-start; }
.destacado  { align-self: center; }  /* solo este se centra */

order: reordenar sin tocar el HTML

order cambia el orden visual de los items (por defecto todos valen 0; los menores van antes). Útil para reordenar en responsive, aunque hay que usarlo con cuidado porque el HTML sigue igual para lectores de pantalla:

.primero-visual { order: -1; }  /* aparece antes que los demás */