使用Flexbox重新定位选择器

Question

使用Flexbox，这只是一个出色的CSS功能，我在某个地方读到它可以重新定位选择器。如果您没有选择用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

当然。。。简单，使用我们在flexbox下可用的order属性。

订单@MDN

CSS order属性指定用于在flex容器中布置flex项的顺序。元素按顺序值的升序排列。具有相同顺序值的元素按它们在源代码中出现的顺序排列。

默认情况下，弹性项目的order值为0，因此只需重新排列即可

        #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顺序保持不变。