为什么输入字段宽度随输入数量(弹性盒)而增加? [英] Why does input field width grow with number of inputs (flexbox)?

问题描述

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

I'm implementing a form which has multiple sections with different numbers of input fields. When using display: flex on the parent div and 100% width on the input fields, I get different widths calculated, depending on the number of input fields inside the form.

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

When using display: block, everything works as intended.

<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行为吗?我想念什么吗? 感谢您的帮助！

Is this supposed to be normal flexbox behavior? Am I missing something? Thanks for any help!

推荐答案

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

Simply remove width:100% and you will better understand:

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%;的参考，从而使所有输入均为其全宽.

The inputs are defining the width of the blue box and then this width will be the reference of the width: 100%; making all the input to be full width of it.

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

Basically, a percentage value need a reference so the width of the blue box is first calculated considering the content and then the input will use that width as reference.

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

This can also happen with simple inline-block elements

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

More details about percentage sizing here: https://www.w3.org/TR/css-sizing-3/#percentage-sizing

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

You can find an explicit example of such behavior:

例如，在以下标记中:

For example, in the following markup:

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

计算外部<article>的宽度时，内部<aside>的行为与width: auto相同，因此<article>会将其自身设置为长字的宽度.但是，由于<article>的宽度并不取决于实际"布局，因此对于解析<aside>的宽度来说，它被视为是确定的，其宽度解析为<article>宽度的一半.

When calculating the width of the outer <article>, the inner <aside> behaves as width: auto, so the <article> sets itself to the width of the long word. Since the <article>’s width didn’t depend on "real" layout, though, it’s treated as definite for resolving the <aside>, whose width resolves to half that of the <article>.

---

使用display:块时，一切都会按预期进行.

When using display: block, everything works as intended.

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

Simply because the width calculation of block element is different and doesn't depend on the content unlike for inline-block elements or flex items where the content define the width

这篇关于为什么输入字段宽度随输入数量(弹性盒)而增加?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！