在调整大小或特定分辨率下将面板从浏览器视图中推出

Question

此处，在较小的分辨率下，当切换面板B或面板A（显示/隐藏）时，它不会在没有水平滚动的情况下将面板A推离屏幕 。

同样，Panel-C或Panel-B一次可见。

类似地，当使用小分辨率时，Panel-C不会将Panel-A推向右侧。

当在较小的分辨率上切换相应的Panel-A或Panel-B时，如何在屏幕外的Panel-B之间（仅需要该部分）推div，以便Panel-C或Panel-B可以占用最小宽度并正确可见。

当显示panel-c或panel-b（一次应同时显示其中之一）时，当分辨率较低时，panel-A应分别推至屏幕左侧或右侧屏幕：

 Panel-C            Panel- A              Panel-B

<div style="display:flex;width:100%;">
  <div style="display:flex;width:100%;justify-content:center;">
    <div style="min-width:300px;max-width:500px;margin-right:30px;display:none;">
      Panel C
    </div>
    <div style="min-width:520px;max-width:668px;">
      Panel A
    </div>
    <div style="min-width:300px;max-width:500px;margin-left:30px;display:block;">
      Panel B
    </div>
  </div>
</div>

Answer 1

我发现这个问题特别令人困惑，但是从标题中读取后，我认为您正在寻找的是一种基于视口大小（分辨率）更改元素样式的解决方案。这可以通过使用media queries来实现。

以下是一个示例，该示例基于您的代码，但CSS被提取到其自己的文件中并经过简化以使其简短：

div {
  box-sizing: border-box;
  border: 1px solid red;
}

.container {
  display: flex;
  width: 100%;
}

.group {
  display: flex;
  width: 100%;
  justify-content: center;
}

.pan {
  min-width: 100px;
  max-width: 200px;
}

@media (max-width: 300px) {
  .pan__b {
    display: none;
  }
}

@media (max-width: 400px) {
  .pan__c {
    display: none;
  }
}

<div class="container">
  <div class="group">
    <div class="pan pan__a">
      Panel A
    </div>
    <div class="pan pan__b">
      Panel B
    </div>
    <div class="pan pan__c">
      Panel C
    </div>
  </div>
</div>

让我知道您打算这样做还是我理解错了。