将 Flexbox 与媒体查询结合使用来设置样式 <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;
    }
}

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

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

我对如何重新设置此元素的样式感到非常困惑。我尝试将 flex 方向从列更改为行，但没有任何反应。

我也尝试过订购所有的 li's，但这似乎也不起作用。

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

将 window 的宽度调整为小于 500 像素以查看效果。

将 Flexbox 与媒体查询结合使用来设置样式 <ul>

Using Flexbox with Media Queries to style <ul>

css

flexbox