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属性。

Order @ MDN

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

默认情况下，flex-items的order值为0，因此只需重新排列它们

＆＃13;

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

＆＃13;

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

＆＃13;

注意......这纯粹是视觉效果...... DOM顺序保持不变。

使用Flexbox重新定位选择器

1 个答案: