La trampa de flex: 1

flex: 1 es la declaración más escrita de todo flexbox y una de las peor entendidas. No es una forma corta de flex-grow: 1: cambia además el tamaño base a cero, y ese cambio es el que decide si tus columnas salen iguales o proporcionales al contenido. Con las abreviaturas de flex pasa lo mismo que con background o font: reinician propiedades que no mencionaste, y ahí es donde se pierden las tardes.

Las expansiones

flex es una abreviatura de tres propiedades y tiene reglas de expansión que no son intuitivas, porque los valores omitidos no toman su valor inicial: toman valores específicos de la abreviatura.

La fila crítica es la primera. flex: 1 pone la base a 0%. Si en lugar de eso escribes flex-grow: 1 a secas, la base se queda en su valor inicial, que es auto.

/* Base cero: las tres columnas acaban idénticas */
.a > * { flex: 1; }

/* Base auto: las tres columnas parten de su contenido */
.b > * { flex-grow: 1; }

Con contenidos de longitudes distintas, el primer bloque da tres columnas exactamente iguales y el segundo da tres columnas desiguales que solo se reparten el sobrante. Son layouts distintos escritos con dos declaraciones que parecen sinónimas.

Un número no es una longitud

La regla de desambiguación de la abreviatura es la fuente de un error silencioso: un valor sin unidad se interpreta como flex-grow, y un valor con unidad como flex-basis.

.a { flex: 1; }      /* grow 1, base 0%  */
.b { flex: 1px; }    /* grow 1, base 1px */
.c { flex: 0; }      /* grow 0, base 0%  */
.d { flex: 0px; }    /* grow 1, base 0px */

Compara .c y .d. Un solo carácter de diferencia y comportamientos opuestos: .c no crece en absoluto, .d crece con factor 1. Es un error tipográfico que no produce ningún aviso y cuyo síntoma aparece a metros de distancia en el layout.

La regla mnemotécnica: si lleva unidad, hablas de tamaño; si no la lleva, hablas de proporción. Y el 0% de la expansión de flex: 1 es un porcentaje precisamente porque necesitaba una unidad para no ser ambiguo consigo mismo.

Los cuatro nombres

Los valores nombrados existen porque cubren los cuatro patrones que se repiten. Merece la pena usarlos por lo que comunican.

flex: initial es lo que tienes sin escribir nada: el elemento no crece, encoge si hace falta, y parte de su tamaño natural. Es el comportamiento de un elemento que solo quiere estar ahí.

flex: auto es initial más la capacidad de crecer. Reparte el sobrante entre los elementos en proporción a nada —todos con factor 1— pero cada uno conserva su tamaño de partida. Es el valor para menús donde cada opción debe ocupar al menos su texto.

flex: none es rigidez total: ni crece ni encoge, y parte de su tamaño natural. Iconos, avatares, botones con texto que no debe partirse.

flex: 1 es la rejilla: base cero, todos iguales. Columnas de un panel, celdas de una fila de estadísticas, paneles de igual peso.

/* Cuatro elementos, cuatro comportamientos */
.icono     { flex: none; }      /* nunca se toca */
.etiqueta  { flex: initial; }   /* cede si hace falta */
.opcion    { flex: auto; }      /* crece desde su contenido */
.panel     { flex: 1; }         /* una fracción exacta */

Cuándo escribir las tres propiedades

Hay dos situaciones en las que la abreviatura estorba y conviene ser explícito.

La primera es cuando quieres una base concreta con un comportamiento asimétrico. Un panel que crece libremente pero no encoge por debajo de su base se escribe mejor sin ambigüedad:

.panel { flex-grow: 1; flex-shrink: 0; flex-basis: 18rem; }
/* o, equivalentemente y más corto */
.panel { flex: 1 0 18rem; }

La segunda es cuando la base tiene que venir del contenido pero quieres crecimiento proporcional. Ahí flex: 2 no sirve porque anula la base:

/* Este panel crece el doble que sus hermanos, pero parte de su contenido */
.destacado { flex-grow: 2; flex-shrink: 1; flex-basis: auto; }
/* forma corta */
.destacado { flex: 2 1 auto; }

La regla práctica: si vas a tocar la base, escribe las tres partes. La abreviatura de un solo valor está bien para flex: 1 y flex: none, que son declaraciones de intención reconocibles; en cuanto aparece un tercer número, ser explícito ahorra más tiempo del que cuesta.