CSS Flex: Probleme beim Anordnen von <div>s

[Matthias Scharwies]

Herzlich willkommen bei SELFHTML,

Ich habe eine dynamische Anzahl von <div>-Boxen, die allerdings alle die gleiche Breite haben. Die Höhe ist dynamisch. Mit Display Flex möchte ich die Boxen dynamisch anordnen lassen. Wenn die Breite des Browserfenster geringer wird, entsteht also eine neue Zeile (siehe Skizze).

Genau! Dafür ist Flexbox da.

Ich würde gerne dass in der Vertikalen kein Abstand zwischen den Boxen entsteht (wie auf der Skizze). Bekomme ich das irgendwie dynamisch hin?

Nicht mit Flexbox. Bei anderen Viewport-Breiten würden ja auch andere Boxen in der zweiten und dritten Reihe unterhalb von Box_1, …_2, …_2 stehen.

Flexbox oder Grid Layout?

„Flexbox dient im Wesentlichen dem Layout von Objekten in einer Zeile oder einer Spalte.
Grid ist für ein Layout in zwei Dimensionen - Zeilen und Spalten.“
Rachel Andrew

Schau Dir mal dieses Tutorial an.

CSS/Tutorials/Grid/responsive Raster ohne Media Queries

Die masonry Tiles gibt es halt noch nicht in allen Browsern.

Herzliche Grüße

Matthias Scharwies