Neupositionieren des Selektors mit Flexbox

Question

Mit Flexbox, das nur eine brillante CSS-Funktion ist, habe ich irgendwo gelesen, dass es Selektoren repositionieren könnte. Um es zu speichern, wenn Sie nicht die Möglichkeit haben, es in HTML oder Javascript zu tun.

Wäre es möglich, diese in einer anderen Reihenfolge als 1,4,3,2 mit Flexbox zu setzen?

<div id="cssmenu"> 
    <ul> 
      <li><a href="link1">First Menu Item</a> 
      </li> 
      <li><a href="link2">Second Menu Item</a> 
      </li> 
      <li><a href="link3">Third Menu Item</a> 
      </li> 
      <li><a href="link4">Fourth Menu Item</a> 
      </li> 
     </ul> 
    </div> 

    #cssmenu ul { 
     flex-direction: row; 
     justify-content: space-around; 
     display: flex; 
     flex-wrap: wrap; 
    } 

https://jsfiddle.net/fewk5o7d/

Answer 1

Sicher ... einfach, mit der order Eigenschaft unter Flexbox uns zur Verfügung.

Order @ MDN

Die CSS um Eigenschaft gibt den Auftrag legen flex Elemente in ihren flex-Container verwendet. Elemente werden in aufsteigender Reihenfolge des Auftragswerts angeordnet. Elemente mit demselben Bestellwert werden in der Reihenfolge angeordnet, in der sie im Quellcode erscheinen.

standardmäßig die Flex-Elemente haben einen order Wert von 0, so ist es nur eine Frage der Neuanordnung sie

 #cssmenu ul { 
 
      flex-direction: row; 
 
      justify-content: space-around; 
 
      display: flex; 
 
      flex-wrap: wrap; 
 
     } 
 
     li:nth-child(2) { 
 
      order: 2 
 
     } 
 
     li:nth-child(3) { 
 
      order: 3 
 
     } 
 
     li:nth-child(2) { 
 
      order: 4 
 
     }

<div id="cssmenu"> 
 
    <ul> 
 
    <li><a href="link1">First Menu Item</a> 
 
    </li> 
 
    <li><a href="link2">Second Menu Item</a> 
 
    </li> 
 
    <li><a href="link3">Third Menu Item</a> 
 
    </li> 
 
    <li><a href="link4">Fourth Menu Item</a> 
 
    </li> 
 
    </ul> 
 
</div>

Hinweis ... dies ist eine reine visuelle Wirkung ... die DOM-Reihenfolge bleibt gleich.