使用不同的 %width 创建新的 div

Question

我用一个 div 创建了一个部分。每次单击按钮 'click' 都会添加新的 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

将 flex: 1 放在 div 表示它将占用其父级 space 的 1 部分。当添加另一个 div 时，它将取 space 的两个可用分数之一，依此类推。弹性基础：30%；实际上是说每个弹性项目最多可以占用该行可用 space 的 30%。希望这能解决您的问题！

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

div {
  display: block;
  height: 10px;
  flex: 1;
  flex-basis: 30%;
  background: blue;
  margin: 5px 2px;
}

#button {
  color: red;
}

Answer 2

使用这种 div 风格：

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

"Flex-grow" 在 div 内给它们 "weight"，具有相同弹性增长的项目共享可用的相同部分 space。最小宽度触发第 4 个 div 下降，因为将其添加到同一行会使它们的宽度变为 25%。

如需进一步说明，请追问！

Answer 3

我还建议使用一些 flex-grow 和条件 class 来固定 3 个项目后的宽度。这是我的尝试 ;)

我也用过css计算

(function() {
  const section = document.getElementById('section');

  function addDiv() {
    const div = document.createElement('div');
    div.className = 'new-div';
    section.appendChild(div);

    if (section.childNodes.length > 3) {
      section.classList.add("fixedWith");
    }
  }

  document.getElementById("button").onclick = function() {
    addDiv();
  };

  document.addEventListener("DOMContentLoaded", function() {
    addDiv();
  });
})();

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

div {
  flex-grow: 1;
  min-width: calc(100% / 3 - 4px);
  height: 30px;
  background: blue;
  margin: 5px 2px;
}

section.fixedWith div {
  max-width: calc(100% / 3 - 4px);
}

#button {
  color: red;
}

<html>

<body>
  <button id="button">Click button</button>
  <section id="section"></section>
</body>
<html>

使用不同的 %width 创建新的 div

Create new div with different %width

javascript

css

width