Wie man ein Element basierend auf seiner Flex Box order

Question

style Ich habe einige Elemente innerhalb einer DIV, die je nach der Größe des Bildschirms neu geordnet werden. Ich möchte jedes dieser Elemente je nach ihrer Flex-Box-Reihenfolge unterschiedlich gestalten. Da sich die Medienabfragen in einem Framework befinden, möchte ich lieber keine eigenen Medienabfragen schreiben, da ich nicht daran denken möchte, meine Medienabfragen zu ändern, wenn das Framework die Unterbrechungspunkte für ihre Medienabfragen ändert. Ich habe versucht, mit der + Geschwister Selektor, aber anscheinend gilt dies nur für die Reihenfolge der Elemente in der ursprünglichen Markup, nicht die Flexbox Renderreihenfolge. Gibt es eine Möglichkeit, ein Element basierend auf der Reihenfolge zu formatieren, in der es im gerenderten DOM angezeigt wird?

Answer 1

Wie in den Kommentaren erwähnt, können Sie nth-child nicht verwenden, da die Stile auf die Reihenfolge des tatsächlichen DOM und nicht auf das gerenderte DOM angewendet werden.

Sie müssen dem Markup zusätzliche Klassen hinzufügen, um dies zu tun. Anstatt mit nth-child neu zu ordnen, ordnen Sie die Reihenfolge mit den zusätzlichen Klassen neu an.

<div class="flexGrid"> 
    <div class="flexGrid__item flexGrid__item--alpha"></div> 
    <div class="flexGrid__item flexGrid__item--bravo"></div> 
    <div class="flexGrid__item flexGrid__item--charlie"></div> 
    <div class="flexGrid__item flexGrid__item--delta"></div> 
</div> 

Weitere Einzelheiten in dieser Geige: https://jsfiddle.net/pua5u8a4/1/