为什么输入字段宽度随输入数量（弹性盒）而增加？

Question

我正在实现一个包含多个具有不同数量输入字段的部分的表单。 当在父div上使用display: flex并在输入字段上使用100％宽度时，根据表单内输入字段的数量，我得到的宽度会有所不同。

使用display: block ，一切都会按预期进行。

<section>
  One input field.
  <div>
    <form action="">
      <input type="text">
    </form>
  </div>
</section>
<section>
  Two input fields.
  <div>
    <form action="">
      <input type="text"> <!-- each input field is double as wide as in the first section! -->
      <input type="text">
    </form>
  </div>
</section>

section {
  background: lightgrey;
  width: 1100px;
}

div {
  background: red;
  display: flex;
}

form {
  background: blue;
  box-sizing: border-box;
}

input {
  box-sizing: border-box;
  width: 100%;
  margin: 0.3125em 0 0.625em;
}

Codepen链接示例

这应该是正常的flexbox行为吗？ 我想念什么吗？ 谢谢你的帮助！

Answer 1

您正在将display: flex CSS属性设置在错误的元素上，需要在表单上而不是在div上进行设置，而在display: flex在div上进行设置时，它们的表单将成为flex项目而不是输入，因此没有flex-item行为输入字段。

使用以下CSS可以正常工作

 section {
      background: lightgrey;
      width: 1000px;
    }

    div {
      background: red;
      display: flex;
    }

    form {
      background: blue;
      display:flex;
      box-sizing: border-box;
    }

    input {
      box-sizing: border-box;
      width: 100%;
      margin: 0.3125em 0 0.625em;
    }

有关更多详细信息，请参阅Flex教程。

Answer 2

只需删除width:100% ，您就会更好地理解：

 section { background: lightgrey; width: 1000px; } div { background: red; display: flex; } form { background: blue; box-sizing: border-box; } input { box-sizing: border-box; margin: 0.3125em 0 0.625em; } 

 <section> One input field. <div> <form action=""> <input type="text"> </form> </div> </section> <section> Two input fields. <div> <form action=""> <input type="text"> <input type="text"> </form> </div> </section> <section> Three input fields. <div> <form action=""> <input type="text"> <input type="text"> <input type="text"> </form> </div> </section> <section> Four input fields. <div> <form action=""> <input type="text"> <input type="text"> <input type="text"> <input type="text"> </form> </div> </section> 

输入定义了蓝色框的宽度，然后该宽度将作为宽度的参考width: 100%; 使所有输入变为全宽。

---

基本上，百分比值需要参考，因此首先考虑内容计算蓝框的宽度，然后输入将使用该宽度作为参考。

简单的内联块元素也可能发生这种情况

 section { background: lightgrey; width: 1000px; } div { background: red; display: inline-block; } form { background: blue; box-sizing: border-box; } input { box-sizing: border-box; width:100%; margin: 0.3125em 0 0.625em; } 

 <section> <div> <form action=""> <input type="text"> </form> </div> </section> <section> <div> <form action=""> <input type="text"> <input type="text"> </form> </div> </section> <section> <div> <form action=""> <input type="text"> <input type="text"> <input type="text"> </form> </div> </section> <section> <div> <form action=""> <input type="text"> <input type="text"> <input type="text"> <input type="text"> </form> </div> </section> 

有关百分比大小调整的更多详细信息，请参见： https : //www.w3.org/TR/css-sizing-3/#percentage-sizing

您可以找到此类行为的明确示例：

例如，在以下标记中：

<article style="width: min-content">
  <aside style="width: 50%;">
  LOOOOOOOOOOOOOOOOOOOONG
  </aside>
</article>

在计算外部<article>的宽度时，内部<aside>表现为width: auto ，因此<article>会将自身设置为长字的宽度。 但是，由于<article>的宽度不依赖于“实际”布局，因此将其视为解析<aside> ，其宽度解析为<article>一半。

---

使用display：block时，一切都会按预期进行。

仅仅是因为块元素的宽度计算是不同的，并且不依赖于内容，与内联块元素或弹性项目不同，其中内容定义宽度

Answer 3

在主容器（ div ）上display: block时， form元素– div的子元素–自动占据其父元素的100％宽度。

在主容器上使用display: flex时， form元素默认为flex-basis: auto ，即其内容的宽度。

因此，如果您希望与display: flex表现相同的行为，请将flex: 1 0 0 （aka flex: 1 ）添加到form元素。 这告诉他们要占据父母的全部宽度，例如display: block 。

 section { background: lightgrey; width: 1000px; } div { background: red; display: flex; } form { flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */ background: blue; box-sizing: border-box; } input { box-sizing: border-box; width: 100%; margin: 0.3125em 0 0.625em; } 

 <section> One input field. <div> <form action=""> <input type="text"> </form> </div> </section> <section> Two input fields. <div> <form action=""> <input type="text"> <input type="text"> </form> </div> </section> <section> Three input fields. <div> <form action=""> <input type="text"> <input type="text"> <input type="text"> </form> </div> </section> <section> Four input fields. <div> <form action=""> <input type="text"> <input type="text"> <input type="text"> <input type="text"> </form> </div> </section>