面对css @media查询的一些问题

Question

当我将其应用于主体颜色或更改字体大小时，它工作正常，但是当涉及到元素float或flex-direction时，它根本不响应。千方百计地尝试一下，只是不确定是否在这里不起作用：请检查代码，我认为语法是正确的，因为它给了我提到的结果。

.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 a {
      flex-direction: column;
   }
}

Answer 1

正如@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;
   }
}