CSS-更改div'；使用媒体查询从网格显示到flexbox

我有一个div，它是一个css网格容器。当页面宽度降到某个大小以下时，我希望网格的所有元素都放在一条线上。我认为您应该能够将显示类型更改为flex box，我尝试过这样做，网格保持不变。以下是我正在使用的代码：

看见笔了吗biltimi@gmail.com（）继续

在上下文中，我试图复制聋哑鸽的网站（），使用尽可能接近纯香草的HTML和CSS来练习页面布局。我想让我的div做和聋哑鸽子导航栏一样的事情

---

有人有解决办法吗？如果是这样的话，我可能会走错方向。请务必让我知道。

只需将媒体查询声明移到文件末尾即可。您定义的媒体查询规则正在执行，但随后的

.grid container

规则正在覆盖它。

正如Pete所说，您的媒体查询需要遵循基本规则，以便在满足条件时覆盖。首选的方法是先声明移动风格，然后在媒体查询中进行桌面覆盖

.grid-container {
    display: inline-flex;
}
@media all and (min-width: 40em) {
    .grid-container {
        display: grid;
    }
}

---

请注意从“最大宽度”到“最小宽度”的更改，以确保当视口大于40em时，此覆盖开始生效。

媒体查询应遵循原始规则，以便它们覆盖它们，只是希望包括所有可以完成的操作。编辑。

.grid-container {
    display: inline-flex;
}
@media all and (min-width: 40em) {
    .grid-container {
        display: grid;
    }
}