嗨，我正在尝试使我的NAV_LIST类没有响应。我使用了以下代码，但是当我在浏览器上测试时，它没有响应会从视图中删除。
null
/*queries*/
@media only screen and (max-width: 1200px) {
.nav_list {
width: 100%;
padding: 0 2%;
}
}
/*css*/
.top_nav {
display: flex;
}
.nav_list {
display: inline-flex;
list-style: none;
margin-right: 150px;
}<header>
<nav>
<ul class="nav_list">
<li class="nav_list_item"><a>Sign in</a></li>
<li class="nav_list_item"><a>What is Shi</a></li>
<li class="nav_list_item"><a>Sign up</a></li>
</ul>
</nav>
</header>null
.nav_list{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
这应该很适合出发。
需要的是媒体查询和flex-direction:column。例如，如果768px中出现溢出，则需要将flex方向从行（默认）更改为列视图。
.nav_list {
display: flex;
}
@media (max-width: 767.98px) {
.nav_list {
flex-direction: column;
}
}
或者一种更聪明的flex-wrap方式:
.nav_list {
display: flex;
flex-wrap: wrap;
}
