CSS - 使用媒体查询将 div 的显示从网格更改为 flexbox

Question

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

看笔 NYjOmL通过 biltimi@gmail.com ( @MeaningOf42 ) 在 CodePen .

/* The important part of the CSS*/

@media (max-width: 40em) {
    .image {
        visibility:hidden;
    }

    .grid-container {
        display: inline-flex;
    }
}

/* The Styling of the container class: */
.grid-container {
    display: grid;
    width: 75%;
    margin: auto;
    padding: 10px;
    height: 100px;
    grid-template-columns: 16.6% 16.6% 33% 16% 16%;
    grid-template-rows: 2fr 3fr 3fr 1fr;
    grid-template-areas:
      ". . Image . ."
      "blog bikes Image about links"
      "shop events Image contact team"
      ". . Image . ."
}

对于上下文，我正在尝试使用尽可能接近纯 Vanilla HTML 和 CSS 来复制聋鸽的网站 ( http://www.deafpigeon.co.uk ) 来练习页面布局。我希望我的 div 与聋鸽导航栏做同样的事情。

有人有解决办法吗？如果一定要让我知道，我可能会以错误的方式解决这个问题。

Answer 1

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

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

注意从 max-width 到 min-width 的变化，以确保当视口(viewport)大于 40em 时此覆盖开始