水平布局上有一个伸缩因子，每次点击按钮，都往伸缩因子前面加上一个文本框

可以使用 Flexbox 布局来实现这个功能。首先需要设置一个容器，使用 `display: flex` 属性来声明这个容器使用 Flexbox 布局。然后设置容器中每个元素的伸缩因子，使用 `flex-grow` 属性来设置。在点击按钮时，可以通过 JavaScript 动态添加一个文本框，并设置它的伸缩因子为1，这样它就会自动占据容器中剩余的空间。以下是一个示例代码：

HTML 代码：

<div class="container">
  <input type="text" class="textbox">
  <button onclick="addTextbox()">Add Textbox</button>
</div>

CSS 代码：

.container {
  display: flex;
}

.textbox {
  flex-grow: 1;
}

JavaScript 代码：

function addTextbox() {
  const container = document.querySelector('.container');
  const textbox = document.createElement('input');
  textbox.setAttribute('type', 'text');
  textbox.classList.add('textbox');
  container.insertBefore(textbox, container.lastElementChild);
}

每次点击按钮时，会在最后一个元素（即按钮）前面添加一个文本框，并且新文本框会自动占据容器中剩余的空间。