html - 如何制作 flex 盒子(不仅针对宽度)

Question

如您所知，w3schools 示例中有一个 Flex-Box https://www.w3schools.com/css/css3_flexbox.asp .我想在我的元素中的某个地方使用这个逻辑，并按照我的意愿改变了这个 flexBox 演示的一点点。当你通过鼠标光标使页面宽度变小时，框只会随着宽度而变小。我也希望它的高度变小盒子的宽度与宽度的比例越来越小。这就是 Google Material Grid 所做的，但我不能使用它，因为我将在 Mat-Menu 中使用它，而不是覆盖整个页面的 Grid。在这里我试图演示什么我想要图像并在下面的代码中添加了我所做的

我试过的 https://www.w3schools.com/code/tryit.asp?filename=G8UM6A52JZL9

当你缩小盒子时会发生什么(只有宽度变小)

这是我想要实现的(高度和宽度都对齐):

Answer 1

使用 viewport width(vw) 属性来调整行高。全屏运行结果并调整浏览器窗口大小并查看差异。

.flex-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100%;
  margin: 10px;
  text-align: center;
  font-size: 30px;
  line-height: calc(20px + 5vw)
}

<h1>Flexible Boxes</h1>

<div class="flex-container">
  <div>Something here</div>
</div>