使用响应从网格布局更改为 Flex 布局

Question

我想根据媒体分辨率排列 3 个元素。在桌面上，我希望它们是

box1  box2
      box3

并且在移动设备上处于响应模式（最大宽度：800px）我希望它们是

box1
box2
box3

为此，我认为我的代码需要在常规部分中包含

  .box-container {
    display: grid;
    grid-template-columns: 60% 40%;
    grid-auto-flow: column;
  }

和

  .box1 {
    grid-row: 1 / 3;
    background: lightblue;
  }

通过用

覆盖它来改变媒体查询部分

  @media only screen and (max-width: 800px) {
    .box-container {
      display: flex;
      grid-template-columns: 100%;
      flex-direction: column;
    }
  }

然而，这并没有被覆盖，元素仍保留在网格视图中。当我将此代码放在常规部分时，这些框会显示在彼此下方。

https://codepen.io/tobwun/pen/MWQOpjL

感谢您的帮助！

托比

Answer 1

只需颠倒 .box-container CSS 规则的顺序即可。先放网格规则，然后是带媒体查询的弹性规则在之后。

.box-container {
  display: grid;
  grid-template-columns: 60% 40%;
  grid-auto-flow: column;
}

@media only screen and (max-width: 800px) {
  .box-container {
    display: flex;
    flex-direction: column;
  }
}

将来，在您的问题中包含一个 snippet — 它是 Stack Overflow 版本的 Codepen 或 jsFiddle。

 .mydiv {
    height: 45%;
    background: #2f8466;
    color: white;
  }

  .box-container {
    display: grid;
    grid-template-columns: 60% 40%;
    grid-auto-flow: column;
  }

  @media only screen and (max-width: 800px) {
    .box-container {
      display: flex;
      grid-template-columns: 100%;
      flex-direction: column;
    }
  }

  .box1 {
    grid-row: 1 / 3;
    background: lightblue;
  }

  .box2 {
    background: lightgreen;
  }

  .box3 {
    background: lightyellow;
  }

<body>

  <div class="main" id="main1">
    Grid Layout Changes To Flex Layout
    <div class="box-container">
      <div class="box1">
        Text1
      </div>
      <div class="box2">
        Text2
      </div>
      <div class="box3">
        Text3
      </div>
    </div>
  </div>

</body>

使用响应从网格布局更改为 Flex 布局

Change from Grid Layout to Flex Layout with Responsive

html

css

flexbox

responsive-design

css-grid