移动版上的菜单项目顺序（浮动问题）

Question

当我的菜单进入汉堡菜单项时，获得display:block值。 但由于最后3项的float:right属性，我的商品订单不正确。

我坚持想法，我可以制作2个菜单，但我认为这不是正确的方法。

codepen preview here

Answer 1

如果您想要不同的订单而不创建两个菜单，请查看使用flexbox和订单属性：http://wiki.imacros.net/EVAL

在移动设备视图中的内容：

header ul {
    display: flex;
    flex-direction: column;
}

header ul li:nth-child(5) {
    order: 7;
}

header ul li:nth-child(6) {
    order: 6;
}

Answer 2

正如itodd所说，您可以使用Flexbox order属性。或者你可以简单地将项目包装在一些容器中，然后float: right。因此，当您使用移动设备时，您将拥有相同的商品订单。

修改

通过我不会采用绝对定位布局，例如使用带有3个包装的Flexbox，第1个和第3个用于项目，第2个用于徽标。然后你可以简单地使用align-items: flex-end（或justify-content: flex-end;;我永远不知道）来获得一个很好的定位菜单。