Problema con div allineati (h) e immagini responsive

[cristy86italy]

Salve a tutti! Domandina tecnica; sto realizzando un div con proprietà display:table per allineare cinque div "celle" (con proprietà table-cell).
A loro volta i div contengono delle immagini pulsante che, non essendo tutte delle stesse dimensioni per incomprensioni con il grafico, devono avere larghezza personalizzata per dare un'idea di unità. Quindi non ho potuto usare dimensioni in percentuale per renderle responsive, ma sarebbe il minore dei problemi.
Quello che vorrei ottenere tramite media queries è che, a una progressiva diminuzione dello schermo, le celle "scorrano" su più righe come farebbe del testo normale, fino ad arrivare nel caso di schermi piccolissimi a un display inline-flex con le immagini una sotto l'altra in verticale.
Quest'ultima parte l'ho realizzata senza problemi, ma non ho idea di come far "andare a capo" i div cella quando lo schermo non è grande abbastanza per averli tutti allineati, ma troppo grande per avere una sola linea verticale.
A parole mi spiego malissimo, lo so. Vi mostro due screen per capire.


In questa immagine ci sono i div allineati orizzontalmente per schermi con risoluzione alta. E fin qui tutto funziona. (L'altezza non è omogenea per il problema che vi dicevo sopra, con alcuni "bambolotti" di dimensioni diverse rispetto alle altre.)
Quello che vorrei fare sarebbe, nel caso in cui lo schermo non sia grande per mostrarli tutti e cinque, mandarne di volta in volta uno, due, tre "a capo", allineati in una seconda row.

Invece, su schermi piccoli (es. mobile) si presenta così, e anche in questo caso tutto funzionante, nessun problema.


Ma quello che voglio evitare è questo;

Ovvero che con una risoluzione comunque larga si ottenga il menu con display inline-flex (uno sotto l'altro), che a queste dimensioni è dispersivo con troppi "vuoti"; per questo mi chiedevo se fosse possibile ottenere l'allineamento sulla stessa riga solo dei div che "ci stanno" materialmente, da un massimo di 5 a un minimo di 1. Una via di mezzo, insomma. Però non ho la più pallida idea di come fare e il fatto di essere pure un bel po' arrugginita (da quasi cinque anni non mettevo mano a progetti di codice) non aiuta.

Mi aiutate a capire se c'è n modo per ottenere il risultato che vorrei? Grazie!

[KillerWorm]

Ciao, sì, un modo c'è, e forse anche più di uno.

Puoi provare ad applicare questa roba sul div principale:

display: flex;
flex-wrap: wrap;
justify-content: center;

In tal caso non avrai bisogno di nient'altro; rimuovi quindi le eventuali varie regole definite nelle media query e le proprietà table dai vari elementi.

Il contenitore definito in questo modo fa tutto il lavoro disponendo gli elementi al centro e distribuendoli su più righe se non dovessero stare più su un'unica riga.

Prova e fai sapere.

[cristy86italy]

Ciao, sì, un modo c'è, e forse anche più di uno.

Puoi provare ad applicare questa roba sul div principale:

display: flex;
flex-wrap: wrap;
justify-content: center;

In tal caso non avrai bisogno di nient'altro; rimuovi quindi le eventuali varie regole definite nelle media query e le proprietà table dai vari elementi.

Il contenitore definito in questo modo fa tutto il lavoro disponendo gli elementi al centro e distribuendoli su più righe se non dovessero stare più su un'unica riga.

Prova e fai sapere.

Ho seguito il tuo suggerimento e funziona perfettamente!! Grazie infinite! ^_^

[KillerWorm]

Bene
Buon proseguimento.