Hi,

Ben bezig met een aantal div's die ik met flexbox zo heb ingesteld dat ze groeien naarmate het scherm breder wordt maar wel een min-width.

Het probleem is dat als je het scherm breder/kleiner maakt de items per rij verschillen.
De 1e rij heeft bijvoorbeeld 4 items en de 2e rij 3 items waardoor ze niet mooi met elkaar uitlijnen omdat de breedte van de 2e rij breder is dan rij 1.

Het 2e probleem, gerelateerd aan het eerste probleem is dat als een item "alleen" in een rij staat, het item over de volledige breedte wordt getoond.
Dat is ook de bedoeling/werking van flexbox, maar in dit geval heeft het een paar tweaks nodig.

Het moet dus altijd een raster worden van items met dezelfde breedte, maar ze moeten wel meegroeien met het scherm.
Een max-width invullen heeft daardoor geen zin, want dan stretched het niet meer.

Dit is de testpagina:
https:// www. cloakform. com/test.html

Hopelijk weet iemand het antwoord?

Doe je er dan wel goed aan om een flexbox te gebruiken? Zou je niet gewoon float:left kunnen gebruiken met een ingestelde width in percentage?

Heb float al geprobeerd, maar dan stretched de div niet goed en dan heb je nog steeds het probleem dat 1 div die alleen staat te veel ruimte in beslag neemt. Of zie ik iets over het hoofd?

Je kunt lege divs toevoegen die zorgen dat wanneer er bijv. 4 en 3 getoond worden alles toch klopt. Ik stuur je een voorbeeld in je PM.

@Mattijs, dat werkt prima! Slimme oplossing ;)

@Matthijs, jammer dat je dat via PM doet. Ik had ook wel graag een codepen oid gezien :).

Gewoon lege divs zonder hoogte toevoegen. Works like magic.