javascript - 创建具有不同 %width 的新 div

Question

我用一个 div 创建了一个部分。每次单击时，“单击”按钮都会添加新的 div。我需要的是:div 1 -> 100% 宽度(部分)当我点击:div 1 和 div2(div 2 新)-> 各获得 50% 的宽度。再次点击:div1、div2 和 div3 -> 每个宽度为 30%。再次点击:div 4 转到具有相同宽度的下一行

你有什么想法吗？ https://jsfiddle.net/Vova_Champion/tcyw64wq/6/

document.getElementById("button").onclick = function() {
  let ok = true;
  if (ok === true) {
    let div = document.createElement('div');
    div.className = 'new-div';

    document.getElementsByTagName('section')[0].appendChild(div);
  }
};

section {
  display: flex;
  height: 100px;
  width: 200px;
  background: red;
  flex-wrap: wrap;
  overflow: auto;
}

div {
  display: block;
  height: 30px;
  width: 100%;
  max-width: 30%;
  background: blue;
  margin: 5px 2px;
}

#button {
  color: red
}

<button id="button">Click button</button>
<section id="section">
  <div></div>
</section>

Answer 1

使用这个 div 样式:

div {
  flex-grow: 1;
  display:block;
  height: 30px;
  min-width: 30%;
  background: blue;
  margin: 5px 2px;
}

“Flex-grow”在 div 中赋予它们“权重”，具有相同 flex grow 的元素共享可用空间的相同部分。 Min-width 触发第 4 个 div 向下，因为将它添加到同一行会使它们的宽度变为 25%。

如果您需要任何进一步的解释，请询问!