如何使用resize CSS缩小容器内的每个项目

Question

所以我想知道这种方法是否可行以及如何实现。

我有一个看起来像这样的容器。

当我使用

时

#wrapperGrid {
    display: inline-block;
    resize: both;
    overflow: auto;
    z-index: 10000;
    padding: 2px;
}

我希望wrapperGrid中的每个元素都相对于wrapperGrid的高度缩小。

现在，EQCSS似乎是最佳选择，并使用其元素查询来检测wrapperGrid中的更改并分别更改高度和宽度。

@element #wrapperGrid {
    .box {
        width: 100%;
        height: 100%;
    }
}

使用EQCSS是解决此问题的正确方法吗？如何才能获得宽度和高度变化的提示？

Answer 1

您可以使用flexbox执行类似操作。通过使用align-items:stretch;，您可以使子元素垂直和水平调整大小。

我添加了另一层div作为行，否则你将在滚动条的宽度上产生溢出问题：

＆＃13;

＆＃13;

.container {
  border: 1px solid #007;
  resize: both;
  overflow:scroll;
  height:200px;
  width:200px;
  padding: 15px;
  
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
}

.row {
  flex: 1 0 100%;
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
}

.row > * {
  border: 1px solid red;
  flex: 1 1 auto;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;