Galeria responsive con flexbox

[LordGrande]

Hola muy buenas, estaba haciendo de galería de imagenes pero me surge un problema en las últimas fotos.

Si el ancho de página lo ocupan 4 fotos y la última fila de fotos es solo de 2, estas 2 me ocupan entre ellas todo el ancho y eso es lo que no quiero.

Mi solución fué colocar un max-width y un max-height pero quedan descentradas de las columnas y queda mucho peor. Además al estar descentradas, si añado texto debajo de ellas queda horrible.

Dejo el código html:

Código HTML:

<section  class="galeria">
    <div>
        <img src="imagenes/pokedex/1.png" />
        <span>Bulbasaur</span>
    </div>
    <div>
        <img src="imagenes/pokedex/2.png" />
        <span>Ivysaur</span>
    </div>
    <div>
        <img src="imagenes/pokedex/3.png" />
        <span>Venusaur</span>
    </div>
    <div>
        <img src="imagenes/pokedex/4.png" />
        <span>Charmander</span>
    </div>
    <div>
        <img src="imagenes/pokedex/5.png" />
        <span>Charmeleon</span>
    </div>
    <div>
        <img src="imagenes/pokedex/6.png" />
        <span>Charizard</span>
    </div>
    <div>
        <img src="imagenes/pokedex/7.png" />
        <span>Squirtle</span>
    </div>
    <div>
        <img src="imagenes/pokedex/8.png" />
        <span>Wartortle</span>
    </div>
    <div>
        <img src="imagenes/pokedex/9.png" />
        <span>Blastoise</span>
    </div>
 

Y css:

Código CSS:

body { 
    margin: 0 auto; 
    background: #333; 
}
section.galeria { 
    margin:0 auto;
    -ms-flex-wrap: wrap;
    -ms-flex-direction: column;
    -webkit-flex-flow: row wrap; 
    flex-flow: row wrap; 
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox; /*IE 10*/
    padding: 5%;
    padding-bottom: 2%;
}
section.galeria div { 
    -webkit-box-flex: auto;
    -ms-flex: auto;
    flex: 300px; 
    width: 300px; 
    padding: 0.2em; 
}
section.galeria div img { 
    width: 100%;
    height: auto; 
    max-height: 300px;
    max-width: 300px;
} 
section.galeria div span { 
    position: relative;
    display: block;
    text-align: center;
} 
 /*Media Queries*/
 @media screen and (max-width: 400px) {
    section.galeria div { 
        margin: 0; 
    }
    section.galeria { 
        padding: 0; 
    }
}