Flex mit variablen Elementen

[brainstuff]

Kann man dieses Seiten Layout mit FLEX erzeugen:

Ich finde nur einen FLEX-Generator, der alle "Fenster" gleich einstellt (Höhe - Breite) Da wird nur das letzte Fenster eventuell so breit wie die Seite wenn Sie auf dem Monitor dargestellt wird.

Bei meinem Layout soll zudem die erste Zeile immer sichtbar sein. Am liebsten soll sie auf einem Monitor ganz normal angezeigt werden, aber auf einem Smartphone in reduzierter Größe (damit diese Menu-Zeile auch auf Devices mit einer kleineren Breite nur eine Zeile ist) Das Accordeon soll auch nur in der Box aufklappen, wenn es auf einem Monitor angezeigt wird (dann ist das so hoch wie das Video/Bild daneben) auf dem Smartphone darf das aber dann auch die Zonen darunter überlappen ...

Ich habe auf https://codepen.io/3dhavok/pen/ZEeXKOM ein Beispiel gefunden wo es in der zweiten Reihe zwei Breitere Zonen hat ... aber das kommt nur davon, dass es kein weiteres Bild drin hat.

Kann man mein Problem eventuell damit lösen, dass man da mehrere FLEX Layouts hintereinander hängt?

Danke, brainstuff

[Rolf B]

Hallo brainstuff,

du kannst das mit zwei Flex-Layouts lösen: Eins für die vertikale Aufteilung, eins für Accordeon und Video.

Aber: Flex ist eindimensional. Für eine zweidimensionale Aufteilung ist display:grid gedacht, das ist die sinnvollere Lösung. Vor allem, wenn man das Layout durch Media Queries umbauen will.

Über Media-Queries kannst Du bei schmaleren Displays das Layout ändern.

• Flexbox
• Grid
• Media Queries

Rolf