html - CSS：具有最小/最大宽度的正方形并换行

Question

我想得到两个 div，它们是根据设备宽度缩放的完美正方形。这些正方形有一个最小和一个最大宽度（显然也是高度，因为它们是正方形）。起初它们是一个相邻的，一旦它们包裹起来，我希望方块是 80vw。

我有一个几乎完美的解决方案，但我的方块直到包裹阈值才缩小。

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  background-color: #9e9ef8;
}

.square {
  min-width: 250px;
  max-width: 400px;
  min-height: 250px;
  max-height: 400px;
  height: 80vw;
  flex: 0 1 80vw;
  background-color:#cacaca;
}

<div class="container">
  <div class="square"></div>
  <div class="square"></div>
</div>

我确实认为这是因为 80vw，但我不明白如果没有媒体查询我怎么能​​做到这一点。

谢谢你的帮助。

标签： htmlcssflexbox

Answer 1

即使您以这种方式计算，您所拥有的也不是一个完美的正方形，但是，对您的要求的回答是：

.square {
width: 80vw;
height: 80vw;
background-color:#cacaca;

} 并且像这样，你不需要媒体查询。