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 link with example

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

Answer 1

您要为错误的元素设置display: flex CSS属性，需要在表单而不是div上进行设置，当您在div上设置display: flex时，它们的形式成为弹性项目而不是输入，因此，弹性项目的行为都不会出现在输入字段上。

使用以下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 tutorial

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>的一半。 / p>

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

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

Answer 3

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

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

因此，如果您希望对display: flex使用相同的行为，请将flex: 1 0 0（又名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>

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

3 个答案: