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演示，可以像textarea一样调整大小。

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

要设置的值是伪元素的flex-basis，max/min-width和垂直 padding。

通过伪元素设置比率。

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

......如果我理解了这个问题：）

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

1 个答案: