Html 面对css@media query的一些问题

当我将其应用于车身颜色或更改字体大小时，它工作正常，但当涉及到使元素

浮动

或

弯曲方向

时，它根本没有响应。尝试了各种可能的方法，只是不确定这里什么不起作用：请检查代码，我认为语法是正确的，因为它给出了我提到的结果

navbar先生{
背景色：#333；
溢出：隐藏；
显示器：flex；
}
navbar先生{
文字装饰：无；
颜色：白色；
填充：24px；
显示：块；
文本对齐：居中；
}
@媒体屏幕和屏幕（最大宽度：600px）{
纳瓦尔先生{
弯曲方向：立柱；
}
}

正如@Krusader所说，

a

标记不是flex容器，因此要使用列布局，您需要设置它的父级

.navbar {
    background-color: #333;
    overflow: hidden;
    display: flex;
}

.navbar a  {  
    text-decoration: none;
    color: white;
    padding: 24px;
    display: block;
    text-align: center;
}

@media screen and (max-width:600px) {
    .navbar {
      flex-direction: column;
   }
}

---

a

在您的例子中是一个flex子级，而不是flex容器，因此它本身没有

flex direction

属性。如果要更改

柔性方向

请在柔性容器上更改它，在您的情况下，柔性容器是

.navbar