javascript - css flex - 最大化元素大小，同时保持它们填充不同大小的容器

Question

我正在尝试创建一个组件，该组件将在不同大小的容器中显示相同大小的元素(元素的数量可能会有所不同)的流动网格。我希望元素尽可能大(同时保持它们的比例)并尽可能填满容器，同时又能很好地容纳在里面。

我创建了一个带有硬编码比例值的片段，但我的问题是 - 这(比例)可以自动完成吗？或者至少您可以建议使用什么方法来进行计算？

到目前为止，我唯一能想到的就是尝试不同的比例并测量最终面积，但它似乎不是很优雅。

谢谢

function set_state(cls, scl) {
  document.getElementById("cont").className = cls;

  [].slice.call(document.getElementsByClassName("it"))
    .map((e) => {
      e.style.width = 50 * scl + 'px';
      e.style.height = 70 * scl + 'px';
    });

}

#cont {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  background-color: #00ff00;
}

.it {
  width: 50px;
  height: 70px;
  margin: 10px;
  background-color: #b33;
}

.shape1 {
  width: 300px;
  height: 200px;
}
.shape2 {
  width: 200px;
  height: 400px;
}
.shape3 {
  width: 300px;
  height: 500px;
}
.shape4 {
  width: 290px;
  height: 280px;
}
.shape5 {
  width: 210px;
  height: 380px;
}

No Scale
<button onClick='set_state("shape1", 1)'>shape 1</button>
<button onClick='set_state("shape2", 1)'>shape 2</button>
<button onClick='set_state("shape3", 1)'>shape 3</button>
<button onClick='set_state("shape4", 1)'>shape 4</button>
<button onClick='set_state("shape5", 1)'>shape 5</button>

<br/><br/>
Scale
<button onClick='set_state("shape1", .8)'>shape 1</button>
<button onClick='set_state("shape2", .92)'>shape 2</button>
<button onClick='set_state("shape3", 1.45)'>shape 3</button>
<button onClick='set_state("shape4", 1)'>shape 4</button>
<button onClick='set_state("shape5", 1)'>shape 5</button>

<br/><br/><br/><br/>

<div id="cont" class="shape5">
  <div class="it">&nbsp;</div>
  <div class="it">&nbsp;</div>
  <div class="it">&nbsp;</div>
  <div class="it">&nbsp;</div>
  <div class="it">&nbsp;</div>
  <div class="it">&nbsp;</div>
  <div class="it">&nbsp;</div>
  <div class="it">&nbsp;</div>
  <div class="it">&nbsp;</div>
  <div class="it">&nbsp;</div>
</div>

Answer 1

这是一个带有 flex : x x x; 和 max-width 和 min-width 的 css 演示 + 一个可以调整大小的包装容器像一个文本区域。

类似于您通过 javascript 设置的内容。

要设置的值是 flex-basis , max/min-width 和 vertical padding伪元素。

比率通过伪元素设置。

#cont {
  display: flex;
  flex-wrap: wrap;
  margin: 1em;
  padding: 15px;
  justify-content:center;
}

.it {
  background: tomato;
  margin:1em;
  flex:1 0 15%;
  max-width:15%;
  min-width:100px;
}
.it:before {
  content:'';
  display:block;;
  padding-top:100%;
}
/* demo purpose */
.resize {
  resize: both;
  border: solid;
  overflow: scroll;
  text-align:center;
}

<div class="resize">
<h1> to run in full page mode to test behavior</h1>
  <div id="cont">
    <div class="it">&nbsp;</div>
    <div class="it">&nbsp;</div>
    <div class="it">&nbsp;</div>
    <div class="it">&nbsp;</div>
    <div class="it">&nbsp;</div>
    <div class="it">&nbsp;</div>
    <div class="it">&nbsp;</div>
    <div class="it">&nbsp;</div>
    <div class="it">&nbsp;</div>
    <div class="it">&nbsp;</div>
  </div>
</div>

...如果我理解这个问题:)