CSS Flexbox不能用于导航(移动屏幕)

Question

首先，我对CSS非常陌生，并且正在学习在线课程。

我试图创建一个导航栏，从行到列的变化时进入移动设备。我正在使用flexbox和@media查询，然而，似乎我的代码不做任何改变导航方向时去移动。请帮助!)

.container {
display: flex;
color: white;
justify-content: flex-end;

}

.box {
width: 90px;
height: 3rem;
margin: 0.5rem;
background-color: black;
text-align: center;
}
.box-four {
width: 100px;
}

@media screen and (max-width: 600px) {
.container {
flex-direction: row;
justify-content: center;
flex-grow: 2rem;
flex-wrap: wrap;
flex-basis: 10%;
}
}

Answer 1

不能确切地说你有什么问题没有看到一些例子HTML工作，但乍一看，似乎你应该使用flex-direction:column为您的移动视图。

注意:在这种情况下，媒体查询中的内容是您的移动样式。你可以知道，因为你已经指定了max-width，这意味着它将适用于宽度(600px)以下的所有屏幕尺寸。

请看下面的例子，它结合了你提供的CSS和一些我做的基本HTML。(调整浏览器窗口大小以进行测试)。

.container {
display: flex;
color: white;
}

.box {
width: 90px;
height: 3rem;
margin: 0.5rem;
background-color: black;
text-align: center;
}
.box-four {
width: 100px;
}

@media screen and (max-width: 600px) {
.container {
flex-direction: column;
justify-content: center;
flex-grow: 2rem;
flex-wrap: wrap;
flex-basis: 10%;
}
}

<div class="container">
<div class="box">Entry 1</div>
<div class="box">Entry 2</div>
<div class="box">Entry 3</div>
<div class="box">Entry 4</div>
</div>

您也可以在MDN Web Docs中阅读更多关于flex-direction的信息