css根据屏幕大小不同定位两个div

我有一个需要显示两个div的项目。两个div的宽度相同，此宽度为设定宽度。因此，它们的宽度与屏幕大小不成比例

我面临的问题是，当它们足够大，可以彼此相邻时，它们需要在中间留出空间。div的两个外侧都需要触摸屏幕的两侧

但当窗户缩小，使它们彼此相邻时，它们就变得太大了。然后，它们需要被放置在屏幕的中心，彼此下方

我试过使用flexbox、flex wrap和justify content:space between。但当窗口缩小时，它们都位于屏幕的左侧，而不是中间

以下是屏幕足够大时的外观：

当屏幕太小以至于无法相邻时：

---

不太清楚你想要实现什么。也许你可以做点什么：

---

使用

CSS网格

，这个问题可以非常干净地解决：

媒体查询设置得如此完美。不需要利润。我们只需要使用

minwidth

等于两个div的宽度之和

.wrap{
宽度：100vw；
高度：100vh；
显示：网格；
网格模板列：1fr；
背景：绿色；
}
.包裹部{
高度：200px；
宽度：200px；
背景：黑色；
自我辩护：中心；
}
@介质（最小宽度：400px）{
/*最小宽度由两个分区的宽度2*200计算*/
.包裹{
网格模板柱：1fr 1fr；
}
.wrap div:第一个孩子{
自我辩护：开始；
}
.wrap div:最后一个孩子{
自我辩护：结束；
}
}

---

Hey@Stephen:我们为您的问题提供了一个干净的解决方案。这将适用于所有场景。请给我的答案打分，并点击左侧答案开头的勾号图标接受。谢谢。：）

<div class="wrap">
  <div></div>
  <div></div>
</div>

.wrap{
  width: 100vw;
  /*   higher than 2 x box height */
  height: 100vh;
  display:flex;
  justify-content:space-between;
  background: green;
}

.wrap div{
  height: 200px;
  width: 200px;
  background: black;
}

@media (max-width: 450px ){
  /*   450px = 2 * box-size + min-gap-width(50) */
  .wrap{
    align-items:center;
    flex-direction: column;
  }
  
  .wrap div{
    margin: 50px;
  }
}