Flexboxを使用した再配置セレクタ

Question

鮮やかなCSS機能であるFlexboxを使用して、どこかでセレクタを再配置できることを読んだ。あなたがHTMLやJavascriptでそれを行うオプションを持っていない場合、それを保存する。

Flexboxを使用して1,4,3,2などの異なる順序でこれらを配置することは可能でしょうか？

<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

確かに...簡単な、フレキシボックスの下で私たちに利用できるorderプロパティを使用して。

Order @ MDN

CSS順序プロパティは、そのフレックスコンテナ内のフレックス項目をレイアウトするために使用順序を指定します。エレメントは、オーダー値の昇順に配置されます。同じ順序値を持つ要素は、ソースコードに表示される順序で配置されます。デフォルトでは

フレックス項目が0のorder値を持っているので、それはただの再配置、それらの問題

 #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>

注...これは純粋にあります視覚効果... DOMの順序は変わりません。