Flexbox Layout

[Tronjer]

Ich muss eine Anzahl verschachtelter responsiver Templates erstellen, die etwa so wie auf dem Bild aussehen sollen. Bin mir jetzt aber nicht sicher, wie ich die als Flexbox-Grid richtig wrappe, ob lieber Rows oder Columns, etc.

Hätte da jemand einen Ansatz?

 

[MrMurphy]

Hallo

Das kann dir niemand seriös beantworten.

Grundsatz: Erst Inhalt, dann Layout.

Zudem ist überhaupt nicht klar wie sich das Layout bei schmalerem Fenster verhalten soll.

Vom Grundsatz her ist das nach der Skizze mit Flexbox lösbar.

Gruss

MrMurphy

 

[Tronjer]

@MrMurphy

Hintergrund-Info:
Das ist ein Schema für die Aufstellung bei einem Fußballspiel. 1x Torwart, 4x Verteidiger, 3x Mittelfeld, 2x Flügelspieler, 1x Stürmer. Der Inhalt jedes gelben Containers ist gleich: ein Trikot (Image) mit Nr und darunter der Spielername; die grünen Container bleiben leer. Das Ganze ist rein für mobile Devices und die Anordnung der Container verschiebt sich nicht bei unterschiedlichen Viewports.

Problem:
Es gibt 23 unterschiedliche Aufstellungen, deren Container-Anordnung ähnlich aber nicht identisch zu obigem Bild ist. Ich will nun nicht für jede Aufstellung ein ein eigenes HTML-Template schreiben, sondern es auf ein einziges abstrahieren, das fallweise aus einem JavaScript-Objekt konstruiert wird. Deshalb soll dieses Template möglichst wenige Wrapper enthalten. Flexbox ist minimalistischer als Floats.

Mein Ansatz:
Ich würde wahrscheinlich auf der ersten Ebene vertikal unterteilen und ein flex-direction: column nehmen, den mittleren Container splitten und mit flex-direction: row unterteilen.

Frage:
Ich wollte mir zusätzlichen Input von den CSS-Spezis hier im Forum holen, wie sie das Flex-Grid ausschließlich anhand des obigen Bildes bauen würden, und deshalb hatte ich die ganzen Hintergrund-Infos auch bewusst weg gelassen. Vielleicht fällt jemandem ja noch ein besserer Ansatz als mir ein.

 

[scbawik]

@MrMurphy

Hintergrund-Info:
Das ist ein Schema für die Aufstellung bei einem Fußballspiel. 1x Torwart, 4x Verteidiger, 3x Mittelfeld, 2x Flügelspieler, 1x Stürmer. Der Inhalt jedes gelben Containers ist gleich: ein Trikot (Image) mit Nr und darunter der Spielername; die grünen Container bleiben leer. Das Ganze ist rein für mobile Devices und die Anordnung der Container verschiebt sich nicht bei unterschiedlichen Viewports.

Problem:
Es gibt 23 unterschiedliche Aufstellungen, deren Container-Anordnung ähnlich aber nicht identisch zu obigem Bild ist. Ich will nun nicht für jede Aufstellung ein ein eigenes HTML-Template schreiben, sondern es auf ein einziges abstrahieren, das fallweise aus einem JavaScript-Objekt konstruiert wird. Deshalb soll dieses Template möglichst wenige Wrapper enthalten. Flexbox ist minimalistischer als Floats.

Mein Ansatz:
Ich würde wahrscheinlich auf der ersten Ebene vertikal unterteilen und ein flex-direction: column nehmen, den mittleren Container splitten und mit flex-direction: row unterteilen.

Frage:
Ich wollte mir zusätzlichen Input von den CSS-Spezis hier im Forum holen, wie sie das Flex-Grid ausschließlich anhand des obigen Bildes bauen würden, und deshalb hatte ich die ganzen Hintergrund-Infos auch bewusst weg gelassen. Vielleicht fällt jemandem ja noch ein besserer Ansatz als mir ein.

Hoffe ich bekomme dafür jetzt keine Prügel aber ich würde sogar behaupten dass sich hier absolute Positionierung recht gut anbietet? Auch bei gleichbleibendem HTML Template gäbe es damit eigentlich keine Einschränkungen.

 

[Tronjer]

Ich bin heute etwas tiefer eingestiegen und so wie ursprünglich gedacht geht es leider nicht. Eine Aufstellung von 4-3-3 entspricht technisch einem Array [4,3,3], wobei der Index für die Reihen und die Elemente für die Anzahl der Spieler pro Reihe steht. Allerdings können das auch 4 oder 5 Reihen sein, und die Spieler müssen dann halbversetzt auf den Flügeln positioniert werden.

@scbawik
position: absolute wäre in diesem Fall sogar zu erwägen, weil man dadurch aus der Markup-Struktur ausbrechen könnte. Allerdings muss die Darstellung vom schmalen Viewport des iPhone 4 bis zum großen Tablet ordentlich aussehen und da wäre wahrscheinlich viel fine-tuning notwendig.