使用带有媒体查询的Flexbox来设置<ul> </ul>的样式

Question

我正在使用flexbox（和Sass）和媒体查询来设置我的网站的样式。这是我用过的第一个网站。

桌面版和平板电脑版的导航版是ul，样式如下：

nav#main-nav {
width: 30%;
padding-right: 3em;

ul {
    list-style-type: none; 
    flex-direction: column;

    li {
        padding: 0;
        margin: 0;
    }
}

导航显示垂直列表，这正是我想要的。

但是，在移动设备上，我希望列表从垂直列表切换到水平列表。

我对如何重新设计这个元素感到非常难过。我试过从一列到另一行改变弹性方向，没有任何反应。

我也试过订购所有的李，但这似乎也没有用。

This一直是我的主要参考点，但我不太清楚如何解决这个问题。

有什么想法吗？

Answer 1

这样的东西？

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
    margin: 0;
    padding: 0;
}

@media(max-width: 500px) {
    ul {
        display: flex;
        width: 100%;
        justify-content: space-between;
    }
}

http://codepen.io/littleguy230/pen/wBrBvP

将窗口大小调整为小于500px宽，以查看效果。