我正在尝试使用flexbox创建一个网站。在创建导航菜单时，我遇到的问题是我的导航链接没有在较小的屏幕中垂直显示，尽管它在大屏幕中水平显示。能否请你纠正我错过了什么？这是我的CSS JS和HTML供您参考。
<body>
<nav>
<div id="brand">
<img src="logo.svg" id="brandImg">
</div>
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</div>
</nav>
<script type="text/javascript" src="js/main.js"></script>
</body>
这是我的CSS代码，包括媒体查询。
html,body{
margin: 0;
padding: 0;
}
nav{
display: flex;
}
#brand{
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background-color: #333;
}
#brandImg{
height: 4em;
flex: 1;
}
#myTopnav{
flex: 5;
background-color: #333;
}
.topnav{
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.topnav a {
color: #f2f2f2;
text-align: center;
padding: 2em 4em;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
#brandImg{
height: 3em;
}
.topnav a{display: none;}
.topnav a.icon {
padding: 2em;
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive a {
flex-flow: column;
}
}
我的JS：
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
在媒体查询中为较小的设备添加此额外的CSS
@media screen and (max-width: 600px) {
.topnav.responsive {
flex-direction: column;
}
}