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

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

带有flex的内联表单元素

1 个答案: