CSS Flex: Probleme beim Anordnen von <div>s

[Gunnar Bittersmann]

@@Christian_85

Mit Display Flex möchte ich die Boxen dynamisch anordnen lassen.

Nö. Du möchtest nicht eine Schraube mit dem Hammer in die Wand hauen. Das gewünschte Ergebnis bestimmt das zu verwendende Werkzeug, nicht andersrum.

Vielleicht ist Flexbox das zu verwendende Werkzeug, vielleicht auch nicht. Das hängt davon ab, was du erreichen willst – und da sind Fragen offen. Mich wundert, dass die noch niemand gestellt hat. Vielleicht sind die bislang gegebenen Antworten richtig, vielleicht auch nicht.

Bei vierspaltigem Layout soll Box 5 unter Box 1 sein, 6 unter 2, 7 unter 3, und – wenn es sie gäbe – 8 unter 4, 9 unter 5? In anderen Worten: die Boxen 1, 5, 9, … in der ersten Spalte; 2, 6, … in der zweiten; 3, 7,µ… in der dritten; 4, 8, … in der vierten? D.h. die Boxen 4k + n in der n-ten Spalte? (n ∈ {1, 2, 3, 4}; k = 0, 1, 2, …)

Wenn die Breite des Browserfenster geringer wird, entsteht also eine neue Zeile

Du meinst: wenn die Breite des Browserfenster geringer wird, dann nur drei Spalten, d.h. die Boxen 3k + n in der n-ten Spalte? (n ∈ {1, 2, 3}; k = 0, 1, 2, …) Und wenn sie noch geringer wird, dann zweispaltig bzw. einspaltig?

Oder ist die Reihenfolge der Boxen ziemlich egal? Die Boxen sollen den Platz möglichst gut ausfüllen? (Was in deiner Skizze nicht der Fall ist. Box 6 müsste unter Box 4 sein.)

Kwakoni Yiquan