应用媒体查询时 Flex 项目消失

Question

更新使用 Ezra Siton 答案中的链接，我将媒体查询显示更改为阻止，问题就解决了！

在我的 html 代码中，我有一个父列 flexbox 有两个孩子。 第二个孩子本身就是另一个具有四个 div 的 flexbox。

我在每个 div 中放置了一个 canvas 并且我将在其中显示一些图表。 子 flexbox 被包裹在大屏幕中，因此显示 2x2 网格。 但在较小的屏幕中，例如平板电脑或智能手机，flexbox 装饰应更改为无换行列：

 .inst-data { padding: 20px; position: fixed; width: 90%; height: 90vh; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(255, 255, 255, 1); border-radius: 15px; border: 2px dotted orangered; z-index: 100; }.grid-container { display: flex; align-content: center; justify-content: center; width: 100%; height: 80vh; flex-wrap: wrap; }.grid-item { border-radius: 15px; margin: 10px; width: 45%; height: 45%; background-color: orchid; } @media (max-width: 800px) {.grid-container { overflow-y: auto; flex-direction: column; flex-wrap: nowrap; justify-items: center; align-items: center; }.grid-item { width: 90%; } }

 <div class="inst-data shadow"> <div class="d-flex flex-column justify-content-center align-items-center"> <h2 class="text-center border-bottom my-2" style="height: 10%; width: 100%;">Title</h2> <div class="grid-container" id="ch-div"> <canvas id="buy-chart" width="200" height="200" class="grid-item"></canvas> <canvas id="net-chart" width="200" height="200" class="grid-item"></canvas> <canvas id="stock-chart" width="200" height="200" class="grid-item"></canvas> <canvas id="price-chart" width="200" height="200" class="grid-item"></canvas> </div> </div> </div>

当我测试媒体查询时，顶部 canvas 消失了，即使使用滚动条也无法访问。 我应该怎么办？

Answer 1

首先，您的代码是“脏的”（无尽的想法/技巧/溢出/弹性任何属性:) -对于非常简单的网格布局=意外错误）

为什么不使用简单的 flexbox 网格？ https://css-tricks.com/dont-overthink-flexbox-grids/

关于您的“混乱错误” - 之前 - 由于这两行，蓝卡（First col）从屏幕上消失了：

  align-content: center;
  justify-content: center;

片段

 .grid-container { display: flex; align-content: center; justify-content: center; width: 100%; height: 80vh; border: 5px solid red; flex-wrap: wrap; overflow-y: auto; }.grid-item { border-radius: 15px; margin: 10px; width: 100%; height: 45%; background-color: orchid; }

 <h2>The blue box out of the screen</h2> <div class="inst-data shadow"> <div class="d-flex flex-column justify-content-center align-items-center"> <h2 class="text-center border-bottom my-2" style="height: 10%; width: 100%;">Title</h2> <div class="grid-container" id="ch-div"> <canvas id="buy-chart" style="background: blue;" width="200" height="200" class="grid-item">1</canvas> <canvas id="net-chart" width="200" height="200" class="grid-item">2</canvas> <canvas id="stock-chart" width="200" height="200" class="grid-item">3</canvas> <canvas id="price-chart" style="background: red;" width="200" height="200" class="grid-item">4</canvas> </div> </div> </div>

更改为顶部==> 解决您的问题（但可能再次使用差异代码方法）：

  align-content: top;
  justify-content: center;

 .grid-container { display: flex; align-content: top; justify-content: center; width: 100%; height: 100vh; border: 5px solid red; flex-wrap: wrap; overflow-y: auto; }.grid-item { border-radius: 15px; margin: 10px; width: 100%; height: 45%; background-color: orchid; }

 <div class="inst-data shadow"> <div class="d-flex flex-column justify-content-center align-items-center"> <h2 class="text-center border-bottom my-2" style="height: 10%; width: 100%;">Title</h2> <div class="grid-container" id="ch-div"> <canvas id="buy-chart" style="background: blue;" width="200" height="200" class="grid-item">1</canvas> <canvas id="net-chart" width="200" class="grid-item">2</canvas> <canvas id="stock-chart" width="200" class="grid-item">3</canvas> <canvas id="price-chart" style="background: red;" class="grid-item">4</canvas> </div> </div> </div>