从网格布局更改为弹性布局，响应迅速

发布于 2025-02-01 15:18:08 字数 881 浏览 2 评论 0原文

我想根据媒体决议安排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/pen/pen/pen/pen/mwqopjl

感谢您的任何帮助！

托比

原文

I would like to have 3 elements arranged based on the media resolution. On Desktop I would like them to be

box1  box2
      box3

and in responsive mode on mobile (max-width: 800px) I would like them to be

box1
box2
box3

For this I thought I need in my code to have in the general section

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

and

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

with this changing in the media query section by overwriting this with

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

However somehow this is not overwritten and elements stay in Grid view. When I put this code in the general section the boxes show up below each other.

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

Thanks for any help!

Toby

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

苹果你个爱泡泡 2025-02-08 15:18:08

只需扭转.box-container CSS规则的顺序即可。将网格规则放在首先，然后在之后使用媒体查询 flex规则。

.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;
  }
}

将来，在您的问题中包括一个摘要 - 它是堆栈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>

Just reverse the order of your .box-container CSS rules. Put the grid rule first, then the flex rule with the media query after it.

.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;
  }
}

And in future, include a snippet in your question — it’s Stack Overflow's version of a Codepen or 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>

回复收藏 0 原文

~没有更多了~