Boxdiagramm mit CSS Flexbox

[1unitedpower]

Hallo Selfler,

ich habe folgendes Markup:

<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 divs 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 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?

[Gunnar Bittersmann]

@@1unitedpower

Habt ihr eine Idee, wie ich das nach Möglichkeit ohne JS nur mit CSS und/oder SVG-Bordmitteln lösen kann?

Nö. AFAIS gar nicht. Es gibt @media (orientation: …), aber das bezieht sich auf den Viewport. Element queries (container queries) gibt’s nicht (und wer weiß, ob es die je geben wird).

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[1unitedpower]

Nö. AFAIS gar nicht. Es gibt @media (orientation: …), aber das bezieht sich auf den Viewport. Element queries (container queries) gibt’s nicht (und wer weiß, ob es die je geben wird).

Danke. Ich hab's befürchtet, ich habe mir jetzt einen Workaround mit JavaScript gebastelt.

Dafür benutze ich eine Custom Property --flex-direction, die von einem ResizeObserver wahlweise auf row oder column gesetzt wird, je nach Seitenverhätlnis.

Prototyp Source