¿Cómo centrar una cuadrícula de div en un contenedor flexible?

Estoy tratando de alinear en el centro la cuadrícula de 3 columnas (que está compuesta por 6 flex- item flex-container ) colocados en un div flex-container . (Consulte la imagen adjunta)

Cansaba muchas variaciones de float y align-content . También traté de colocar los elementos flexibles en un contenedor secundario pero no pude hacerlo funcionar.

Esto es lo que tengo actualmente:

 .flex-container { flex-direction: row; display: -webkit-flex; display: inline-flex; background-color: #f5f7f9; width: 100%; align-content: center; flex-flow: row wrap; margin-top: 100px; } .flex-item { width: 23%; height: 360px; margin: 10px; order: 1; border-radius: 3px; padding: 0 10px 40px 10px; } .colour-1 { background-color: #8c72cb; } .colour-2 { background-color: #54c7ec; } .colour-3 { background-color: #a3cedf; } .colour-4 { background-color: #b9cad2; } .colour-5 { background-color: #6bcebb; } .colour-6 { background-color: #a3ce71; } 
 

IMAGEN

Gracias.

Puede usar justify-content en el contenedor flexible para alinear elementos sobre su eje principal. Eche un vistazo a este ejemplo: https://jsfiddle.net/eL650y3e/

Fuentes:

Intentaría establecer margin: auto; `

 .flex-item { width: 23%; height: 360px; margin: 10px; order: 1; border-radius: 3px; padding: 0 10px 40px 10px; margin:auto; }`