html - 面对 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;
   }
}