html - 如何在移动视口将弹性框导航分成两行

Question

当在移动屏幕上看到这个时，我想将顶部导航栏分成两行@media screen and (max-width: 480px

这是我的小提琴 http://jsfiddle.net/cancerian73/7PuCc/

.index nav{display: -ms-flexbox;
    /*display: -webkit-inline-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;*/
    display: -webkit-box;
    -webkit-box-pack: justify;
    display: flex; display: -ms-flexbox; }

Answer 1

一种可能的方法是将列表分成两个。

移动视口可以得到 aflex-direction: column和任何比它更宽的东西flex-direction: row。

查看示例：http ://codepen.io/anon/pen/lnpfu