Hallo Selfler, ich habe folgendes Markup: ~~~html <div data-rel="100"> <div data-rel="70"></div> <div data-rel="30"> <div data-rel="40"></div> <div data-rel="60"></div> </div> </div> ~~~ * Die `data-rel`-Attribute von Geschwister-Knoten ergeben in der Summe immer 100. * Die Anzahl der Kind-Elemente ist beliebig. * Die Dimensionen des äußersten `<div>`s sind unbekannt und können vom Benutzer manuell variiert werden. Ich würde die Kind-Elemente gerne in Abhängigkeit des Seitenverhältnisses ihres jeweiligen Eltern-Elements entweder spaltenweise oder zeilenweise anordnen, und zwar so, dass sie sich immer an der längeren Achse ausrichten. Das `data-rel`-Attribut gibt die Fläche in Prozent an, die ein `div`-Element von seinem Elternelement einnehmen soll. Also, wenn bswp. die x-Achse länger als die y-Achse ist, sollen die `div`s wie folgt gelayoutet werden: ~~~ |--------------------| | | | | | 40 | | 70 |-----| | | 60 | | | | | | | ---------------------- ~~~ Die Proportienen der Flächen sind hier nur schematisch eingezeichnet. Falls die y-Achse die längere ist, dann so: ~~~ |-----------------| | | | | | | | 70 | | | | | | | |-----------------| | | | | 40 | 60 | | | | |-----------------| ~~~ Bei einem Seitenverhätlnis von `1` können die Kindboxen entlang einer beliebigen Achse angeordnet werden. Das ganze soll ein interaktives Diagramm zur Darstellung der [Wall Time](https://en.wikipedia.org/wiki/Elapsed_real_time) von Programmen werden. Eine Box repräsentiert bswp. wie lange sich das Programm in einer bestimmten Funktion aufgehalten hat. Meine erste Idee war, das mit Flexbox und `flex-direction` zu machen. Allerdings weiß ich nicht, wie ich die `flex-direction` in Abhängigkeit des Seitenverhältnisses setzen kann. Habt ihr eine Idee, wie ich das nach Möglichkeit ohne JS nur mit CSS und/oder SVG-Bordmitteln lösen kann?

Hallo Selfler, ich habe folgendes Markup: ~~~html <div data-rel="100"> <div data-rel="70"></div> <div data-rel="30"> <div data-rel="40"></div> <div data-rel="60"></div> </div> </div> ~~~ * Die `data-rel`-Attribute von Geschwister-Knoten ergeben in der Summe immer 100. * Die Anzahl der Kind-Elemente ist beliebig. * Die Dimensionen des äußersten `<div>`s sind unbekannt und können vom Benutzer manuell variiert werden. Ich würde die Kind-Elemente gerne in Abhängigkeit des Seitenverhältnisses ihres jeweiligen Eltern-Elements entweder spaltenweise oder zeilenweise anordnen, und zwar so, dass sie sich immer an der längeren Achse ausrichten. Das `data-rel`-Attribut gibt die Fläche in Prozent an, die ein `div`-Element von seinem Elternelement einnehmen soll. Also, wenn bswp. die x-Achse länger als die y-Achse ist, sollen die `div`s wie folgt gelayoutet werden: ~~~ |--------------------| | | | | | 40 | | 70 |-----| | | 60 | | | | | | | ---------------------- ~~~ Die Proportienen der Flächen sind hier nur schematisch eingezeichnet. Falls die y-Achse die längere ist, dann so: ~~~ |-----------------| | | | | | | | 70 | | | | | | | |-----------------| | | | | 40 | 60 | | | | |-----------------| ~~~ Bei einem Seitenverhätlnis von `1` können die Kindboxen entlang einer beliebigen Achse angeordnet werden. Das ganze soll ein interaktives Diagramm zur Darstellung der [Wall Time](https://en.wikipedia.org/wiki/Elapsed_real_time) von Programmen werden. Eine Box repräsentiert bswp. wie lange sich das Programm in einer bestimmten Funktion aufgehalten hat. Meine erste Idee war, das mit Flexbox und `flex-direction` zu machen. Allerdings weiß ich nicht, wie ich die `flex-direction` in Abhängigkeit des Seitenverhältnisses setzen kann. Habt ihr eine Idee, wie ich das nach Möglichkeit ohne JS nur mit CSS und/oder SVG-Bordmitteln lösen kann?