¿Es posible espaciar uniformemente muchos elementos en un div con ancho variable?

Aquí estáno funciona ejemplo. Si utilizamos text-align: center; Los elementos estarán centrados, pero el margen: 0 auto; no está trabajando. Quiero lograr algo como justificar + centro:

|..<elem>..<elem>..<elem>..<elem>..|       // for one container width
|..<elem>..<elem>..<elem>..|               // for smaller container width
|....<elem>....<elem>....|                 // even smaller container

El contenedor será de tamaño variable para el usuario. Una imagen vale más que 1000 palabras:

Ancho del contenedor (caja roja): 100%; Así que el usuario puede cambiar su tamaño (ventana del navegador, js, lo que sea).
<--> representan espacios pares. En la segunda fila <--> son más grandes porque hay más espacio. Pude fingir con:

text-align:center;
word-spacing:3em;    // but any fixed value looses proportion