Question

我创建了一个div分区。每次单击时，“单击”按钮都会添加新的div。我需要什么：div 1-> 100％width（section）当我单击时： 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;
}

“弹性增长”使它们在div内具有“权重”，具有相同弹性增长的项目共享可用空间的相同部分。最小宽度会触发第4个div下降，因为将其添加到同一行会使其宽度变为25％。

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

Answer 2

我还建议您使用flex-grow和一个条件类来固定3个项目后的宽度。这是我的尝试；）

我也使用过css calc。

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

Answer 3

放置flex：div上的1表示将占用其父级空间的1分之一。添加另一个div时，它将占用两个可用的空间分数之一，依此类推。弹性基准：30％；有效地表示，每个弹性项目最多可占用该行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;
}

创建具有不同％width

3 个答案: