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; 
    }
}
 

[LordGrande]

¿Nadie? :(

[javy7v]

Yo esto lo suelo hacer de la siguiente manera.

Pongo un div general que es donde van a estar todos los demas , en tu caso sería galería.

Le das un ancho a tu gusto , por ejemplo digamos el 90% del body para que quede un 5% a izquierda y derecha de espacio vacio y le damos position:relative y float:left;

Luego a los divs que estan dentro les aplicas a todos una misma clase que les haga ocupar por ejemplo un 16% de width para que sea 16*5 80% + un 2% de margen entre foto y foto el 90% y lo que veas de height y lo mismo float left.

De esta manera se te agruparan de izquierda a derecha de 5 en 5 y haran el salto de linea a la de abajo cuando no.

Por cierto yo antes también me comía la cabeza mucho con esto pero ahora usando bootstrap con su estructura de celdas te olvidas de todos estos problemas.

[LordGrande]

Hola , muchísimas gracias por la respuesta javy7v,

pero no es exactamente lo que busco, ya que si hago una fila de 5 quizás en un dispositivo pequeño no se puede leer bien el contenido por eso lo hice sin filas para que las imagenes vayan colocandose de 4 en 4 o de 2 en 2 dependiendo de la resolución de la pantalla.

Y claro lo malo de esto es que si la última fila que se ha formado solo hay 2 fotos y en las demas 6, estas 2 ocupan lo que ocupan 3 cada una, no se si me explico jaja

Dejo aqui un enlace de una página que estoy haciendo para un colega que esta aún en desarrollo: http://www.panikterrormusik.com/joomla/index.phP/orders en ella se puede ver el ejemplo que he puesto arriba en funcionamiento, nada mas que les he puesto a las fotos un tamaño predefinido para que no ocurra el problema que menciono, pero repito, no es lo que busco

Agrego fotos para que se vea lo que tengo y lo que busco:

Lo que tengo y no busco:
https://gyazo.com/2f4bf50904517092680abe2ac53387ff
https://gyazo.com/6012aef5afe577329a525ae47bc1a822

Lo que busco:
https://gyazo.com/e525b20166db4d1163b3a3589cdfc49b

Espero que ahora si se vea bien lo que quiero. Una galeria en que las fotos ocupen toda la página y si sobra alguna que se dimensione al mismo tamaño que tienen el resto y se adapte a cualqueir dispositivo.

Gracias de nuevo!

[liranan]

Una de las soluciones que tienes es la de darle un ancho máximo a los elementos de esa galería, de forma que nunca un elemento ocuparía todo el ancho.
Prueba algo así:

Código CSS:

section.galeria div { 
    flex: 1 1 auto;
    max-width: 300px;
}
 

Para que los elementos se alineen al centro como en la imagen que mandas puedes usar en el padre 'justify-content: space-around'

[liranan]

Una de las soluciones que tienes es la de darle un ancho máximo a los elementos de esa galería, de forma que nunca un elemento ocuparía todo el ancho.
Prueba algo así:

Código CSS:

section.galeria div { 
    flex: 1 1 auto;
    max-width: 300px;
}
 

Para que los elementos se alineen al centro como en la imagen que mandas puedes usar en el padre 'justify-content: space-around'