CSS Flex: Probleme beim Anordnen von <div>s

[Christian_85]

Guten Abend,

ich bin bzgl. HTML und CSS unerfahren und knoble gerade an einem Problem.

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).

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

Hier mein bisheriges CSS für die Boxen:

.box{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position:relative;
  align-items:
  flex-start;
  align-content:flex-start;
} 

Liebe Grüße

Christian

[ottogal]

Guten Abend,

Hallo Christian_85,

Hier mein bisheriges CSS für die Boxen: .box{ display: flex; flex-direction: row; flex-wrap: wrap; position:relative; align-items: flex-start; align-content:flex-start;}

Code im Forum lässt sich formatieren - hier vor den Codeblock eine Zeile mit "~~~ css" eingefügt und danach eine Zeile mit "~~~".
(Siehe https://wiki.selfhtml.org/wiki/Hilfe:Forum/Bedienung#Code )

.box{ 
	display: flex; 
	flex-direction: row; 
	flex-wrap: wrap; 
	position:relative; 
	align-items: flex-start; 
	align-content:flex-start;
}

Damit die Boxen wie gewünscht angeordnet werden, muss schon das ihnen gemeinsame Eltern-Element, z.B. main, entsprechend formatiert werden:

main {
  display: flex; 
  flex-direction: row; 
  flex-wrap: wrap; 
}

.box{ 
  display: flex; 
  flex: 0 0 12rem;
 
  margin: 0.4rem;
  border: 2pt solid black;
}

Hier angenommen, dass der HTML-Code so aussieht:

<main>
    <div class="box">
		...
    </div>
    <div class="box">
		...
	</div>
    <div class="box">
		...
    </div>
	
	...
</main>

Die .box brauchen nur die Angabe display: flex; und zur Festlegung der fixen Breite die Angabe flex: 0 0 12rem;. Dabei ist 12rem die Basis-Breite, und die beiden Nullen schreiben vor: Weder breiter noch schmäler ist erlaubt. Die Höhen werden ohne weiteres Zutun automatisch angeglichen (jeweils an die höchste Box einer Zeile).

position-Angaben werden bei flexbox ignoriert - weglassen.
Die align-Werte sind default und können daher auch wegbleiben.

Zum Lernen sehr zu empfehlen:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Viel Erfolg!

ottogal

Edit:
Zum Ausprobieren https://codepen.io/ottogal/pen/GRbNawE
(Die Blindtexte sollten natürlich besser in <p></p> gepackt werden.)

[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

[ottogal]

„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

Auch interessant:
Stop the Flexbox for 1D, Grid for 2D layout nonsense

Wobei ich hier "nonsense" schon etwas hart finde. (Und Rachel Andrew schätze...)

[Matthias Scharwies]

Servus!

„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

Auch interessant:
Stop the Flexbox for 1D, Grid for 2D layout nonsense

Wobei ich hier "nonsense" schon etwas hart finde. (Und Rachel Andrew schätze...)

So einen Titel nennt man click-bait - Aber der Inhalt ist gut!

1. Grid wird nur über das Elternelement definiert. Flexbox erfordert Regelsätze für Eltern-Container und Flex-Items

2. Bin grad bei 3:11: „Grid might be better for some 1D-Layouts!“

Das ist imho der Kasus Knaxus: Ich mach fast alles in Grid, Anfänger bleiben irgendwie beim Begriff Flex hängen und wollen nicht noch etwas Neues lernen.

Herzliche Grüße

Matthias Scharwies

[Christian_85]

Vielen Dank erstmal für die bisherigen Hinweise und auf den Tipp mit dem Grid-Layout. Ich werde mir das Tutorial für ein Grid-Layout durcharbeiten und hoffe, dass ich mein Problem lösen kann. Christian

[Rolf B]

Hallo Matthias,

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

Ohne about:config-Manipulation gibt es sie in gar keinem Browser. Es gibt sie noch nicht einmal als Spezifikation. CSS Grid Level 3 ist nach wie vor bei der CSSWG im "Editor's Draft" Status und kein W3C "Working Draft", was bedeutet: Aus Sicht des W3C ist es bestenfalls eine interessante Idee und noch nicht im Prozess der Standardisierung.

Status of this document

This is a public copy of the editors’ draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. Don’t cite this document other than as work in progress.

Fettsatz von mir. Aus diesem Grund haben die Chromia es bisher nicht implementiert und die Feuerfüchse verstecken es hinter einem about:config-Schalter.

Ana Tudor bei CSS-Tricks hat aber einen leichtgewichtigen Masonry-Polyfill gebaut

Rolf

[Matthias Scharwies]

Guten Morgen,

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

Ohne about:config-Manipulation gibt es sie in gar keinem Browser. Es gibt sie noch nicht einmal als Spezifikation. CSS Grid Level 3 ist nach wie vor bei der CSSWG im "Editor's Draft" Status und kein W3C "Working Draft", was bedeutet: Aus Sicht des W3C ist es bestenfalls eine interessante Idee und noch nicht im Prozess der Standardisierung.

Grad gefunden: https://bildung.social/@[e-mail]/113119843990111227

The CSSWG as agreed to publish a first Working Draft for Masonry layout – with the two major proposals merged where possible, and otherwise presented side by side. Most of the differences are syntax only.

Here's the Editor's Draft that will be published:

https://drafts.csswg.org/css-grid-3/

And the discussion:

https://github.com/w3c/csswg-drafts/is

Herzliche Grüße

Matthias Scharwies

[ottogal]

Sorry - ich war wohl noch nicht recht wach.
Jetzt, nach einem ersten Kaffee, sehe ich, dass ich das eigentliche Ziel verkannt habe...

Ich denke auch, dass das Gewünschte nur mit Grid zu realisieren ist.

Viele Grüße
ottogal

P.S. Brauch jetzt einen zweiten Kaffee...

[ottogal]

Hallo in die Runde,

bei einem Masonry-Layout kommt es oft (z.B. bei einer Foto-Galerie) nicht auf die genaue Reihenfolge der Boxen an. Dann könnte man so mit Flex eine Annäherung an das Gewünschte versuchen:

https://codepen.io/ottogal/pen/VwJPEVe

Dabei erzwingt eine max-height-Angabe für den flex-container (hier das main-Element) beim Verbreitern des Viewports das Umbrechen in weitere Spalten.

Durch overflow: auto; für den flex-container wird ein Scrollbalken gezeigt, wenn die Zahl der Spalten zu groß wird. (Ich habe jetzt keine Idee, wie man die Höhenbeschränkung so dynamisieren kann, das der Überlauf vermieden wird.)

Viele Grüße
ottogal

[Matthias Scharwies]

Servus!

Hallo in die Runde,

bei einem Masonry-Layout kommt es oft (z.B. bei einer Foto-Galerie) nicht auf die genaue Reihenfolge der Boxen an. Dann könnte man so mit Flex eine Annäherung an das Gewünschte versuchen:

Ja, oder eben wie in der 1. Antwort verlinkt:

Beispiel:CSS-grid-gallery.html

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
	gap: 10px;
	grid-auto-flow: dense;
}

nur ein Regelsatz für's Elternelement

Keine Klassen für Kindelemente

Responsiv und automatisch

Herzliche Grüße

Matthias Scharwies

[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