Jquery 表格备选方案：网格列表

我有一个包含10-20个输入类型文本字段及其标签的表单。元素的数量各不相同，因此我正在寻找一种解决方案，以输出所有字段和标签，并让它们自动调整为网格：

Label1: [________] Label2: [____] Label3: [________]
Label4: [___]      Label5: [__________]   
Label6: [_______________]         Label7: [________]
Label8: [________________________________]

标签和输入字段的长度也不同，因此我无法定义每行的最大字段数为3

css（即flexbox）可以实现这一点吗？或者我必须使用jquery吗？

您可以执行以下操作：

   <div class="wrap">
  <div>
    <div class="formElement"><label>label</label><input type="text"  /></div>
    <div class="formElement custom"><label>label</label><input type="text"  size="4" /></div>
    <div class="formElement"><label>label</label><input type="text" /></div>
  </div>

  <div>
    <div class="formElement"><label>label</label><input type="text" /></div>
    <div class="formElement"><label>label</label><input type="text"/></div>
  </div>

  <div>
    <div class="formElement"><label>label</label><input type="text" /></div>
  </div>

</div>

---

Codepen here:

图片是否位于所需输出布局上方？这只是一个示例。布局应该是动态的。对你的问题的回答应该是“是”。任何进一步的解释都会导致“应答者为您编写代码”-1是的，几乎完美，但我想更改输入字段的宽度（即邮政编码应短于城市字段）。编辑我的答案以允许自定义大小输入（“formElement上的自定义”类）。只需在激发的输入上添加size=“4”或您想要的任何内容。如果答案解决了问题，请随意将其标记为正确（绿色勾号）：）

   .wrap{
  width: 600px;
}

.wrap > div{
  display:flex;
  margin: 5px 0
}

.formElement{
  flex: 1 1 auto;
  display: flex;
}

label{
  margin:0 5px;
}

input{
  flex: 1 1 auto;
}

.custom{ 
  flex: 0 1 auto;
}