带有flex的内联表单元素[重复]

Question

我目前正在尝试创建一个表单，理想情况下使用 flex 响应一组输入的数量，

所以我有一个这样的表单设置：

<fieldset class="form__group">
     <input type="text" class="form_input" />
     <input type="text" class="form_input" />
 </fieldset>
 <fieldset class="form__group">
     <input type="text" class="form_input" />
     <input type="text" class="form_input" />
     <input type="text" class="form_input" />
 </fieldset>
 <fieldset class="form__group">
     <input type="text" class="form_input" />
 </fieldset>

我想要实现的是容器不关心它有多少孩子，但会允许他们在一行中均匀地填充可用空间。

所以 2 个项目获得 50%（减去一个但对于边距/填充），3 个项目获得 33.3% 和 1 个项目获得 100% 等等等等，

我的 CSS 看起来像这样，

.form__group {
    display: flex;
}

.form__input {
    flex: 1 1 0;
    background: #fff;
    color: #939598;
    border-radius: 30px;
    box-shadow: none;
    border: 1px solid #f1f2f2;
    padding-left: 15px;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
}

我认为哪个可以让我将子代内联放在同一行并允许 flex 整理宽度和间距？

这是我目前的 WIP，

https://codepen.io/87Development/project/editor/AoNJzN/

那么使用 flex 如何在不知道每个 form__group 中有多少元素的情况下创建一行等距和宽度的内联表单输入？

Answer 1

fieldset 可能会出现一些渲染问题...改用div。

Fieldset @ MDN

* {
  box-sizing: border-box;
}

.form__group {
  display: flex;
}

.form_input { /* note the single underscore */
  flex: 1;
  background: lightgrey;
  color: #939598;
  border-radius: 30px;
  box-shadow: none;
  border: 1px solid #f1f2f2;
  padding-left: 15px;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
}

<div class="form__group">
  <input type="text" class="form_input" />
  <input type="text" class="form_input" />
</div>
<div class="form__group">
  <input type="text" class="form_input" />
  <input type="text" class="form_input" />
  <input type="text" class="form_input" />
</div>
<div class="form__group">
  <input type="text" class="form_input" />
</div>