没点击一次按钮，都生成一个文本框，文本框水平布局，最后一个文本框加上伸缩因子

好的，我来给你讲一下具体的实现方法：

首先，在HTML中，你需要一个按钮，点击它就会生成一个文本框。可以像下面这样写：

<button onclick="addInput()">添加文本框</button>
<div id="input-wrapper"></div>

然后，在JavaScript中，你需要编写一个函数`addInput()`，在这个函数中创建一个新的文本框，并将其添加到一个容器中。容器可以是一个`<div>`元素，用于包含所有的文本框。可以像下面这样写：

function addInput() {
  // 创建一个新的文本框
  var input = document.createElement("input");
  input.type = "text";
  
  // 将新的文本框添加到输入框容器中
  var inputWrapper = document.getElementById("input-wrapper");
  inputWrapper.appendChild(input);
  
  // 设置文本框的样式
  input.style.width = "100px";
  
  // 如果不是最后一个文本框，添加一个间隔符
  if (inputWrapper.children.length > 1) {
    var separator = document.createElement("span");
    separator.innerHTML = " | ";
    inputWrapper.insertBefore(separator, input);
  }
  
  // 如果是最后一个文本框，设置伸缩因子
  if (inputWrapper.children.length > 1) {
    input.style.flexGrow = "1";
  }
}

在上面的代码中，我们首先创建一个新的文本框，然后将其添加到一个容器中。我们还设置了文本框的样式，使其具有适当的宽度。如果不是第一个文本框，我们还添加了一个间隔符（这里使用了一个`<span>`元素）。如果是最后一个文本框，我们设置了伸缩因子，使其占据剩余的空间。

注意，上面的代码只是一个简单的示例。你可以根据自己的需求进行修改和扩展。