为什么我的输入没有占据我的 flexbox 容器的整个宽度

Question

我无法弄清楚为什么我的前三个输入没有占据整个宽度，有人可以帮我吗？或者给我一个更好的整体设置 反应更灵敏。

这是我的联系表格 scss：

&__contact-form {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
  height: 50%;
  flex-direction: column;
  padding: 3rem;
  &__input-row {
    width: 100%;
    height: 25%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    &__input-box {
      height: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      flex-direction: column;
      flex-grow: 1;
      & label {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
      }
      & input {
        height: 3rem;
        padding: 1.5rem;
        width: 90%;
        font-size: 3rem;
        border: 0.15rem solid #e51010;
      }
    }
  }
  & label {
    text-align: left;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    margin-top: 3rem;
  }
  & textarea {
    padding: 1.5rem;
    font-size: 3rem;
    resize: none;
    min-height: 60%;
    width: auto;
    border: 0.15rem solid #e51010;
  }
}

<div class="contact">
  <h1>Contact</h1>
  <div class="contact-container">
    <h2>Talk to Us!</h2>
    <form action="#" class="contact-container__contact-form">
      <div class="contact-container__contact-form__input-row">
        <div class="contact-container__contact-form__input-row__input-box">
          <label for="full-name">Full Name</label>
          <input type="text" name="full-name" id="FullName" placeholder="John Doe" />
        </div>
        <div class="contact-container__contact-form__input-row__input-box">
          <label for="subject">Subject</label>
          <input type="text" name="subject" id="Subject" placeholder="Booking Enquiry" />
        </div>
        <div class="contact-container__contact-form__input-row__input-box">
          <label for="email">Email</label>
          <input type="email" name="email" id="Email" placeholder="hello@me.com" />
        </div>
      </div>
      <label for="message">Message</label>
      <textarea name="message" id="Message" placeholder="How can we help?"></textarea>
    </form>
    <button class="contact-container__send-btn" type="submit">Send</button>
  </div>
</div>

我尝试将flex:1 添加到顶部的输入框中，但不起作用。我得到的最接近的是使用justify-content: space-evenly，但它仍然不完全存在。

问题也可能是textarea 而不是上述三个输入。如果我将width: 100% 应用于texarea，它就会超出整个表单。

这里是密码：https://codepen.io/squishyboots19996/pen/oNjawrv

Answer 1

有一个间隙，因为您在输入上指定了 width:90%，但它们的容器并不关心这一点，它们只是填充其 flex 父级的宽度。无论如何，输入元素的宽度总是很棘手。

你可以做什么：

• 删除输入的宽度规则
• 在 __input-box 上移除 flex-grow 规则，设置 flex: 0 1 33% 以限制宽度（并创建间隙）并移除 align-items 规则以便拉伸输入
• 在 __input-row 上设置 justify-content: space-between

喜欢：

&__input-row {
  width: 100%;
  height: 25%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  &__input-box {
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex: 0 1 33%;

    & label {
      font-size: 1.5rem;
      margin-bottom: 1.5rem;
    }

    & input {
      height: 3rem;
      padding: 1.5rem;
      font-size: 3rem;
      border: 0.15rem solid #e51010;
    }
  }
}

这是一个经过编辑的示例：https://codepen.io/rndmerle/pen/jObeaMV