将显示:flex应用于窗体

Question

我正在尝试申请显示:flex在这个表单上，但是失败了。HTML的结构是不能改变的，我不能在我的一生中想出如何去做。它们全部内联的唯一方法(包括按钮)是在表单和. form -字段上应用flex。但是，当表单包装时，按钮停留在第一行，而姓氏的输入字段则进入第二行。

我做错了什么？我只能用CSS做什么，而不触及HTML呢？谢谢!

​

form, .form-fields {
  display: flex;
}

<div class="form">
  <form>
    <div class="form-body">
      <ul class="form-fields">
        <li class="form-field">
          <div class="input-container">
            <span class="name_first">
              <input type="text" name="first_name" id="first_name" value="" placeholder="First Name *" required="">
            </span>
            <span class="name_last">
              <input type="text" name="last_name" id="last_name" value="" placeholder="Last Name *" required="">
            </span>
          </div>
        </li>
        <!--  name and last name -->

        <li class="form-field">
          <div class="input-container">
            <input name="email_address" id="email_address" type="email" value="" placeholder="Email *" required="">
          </div>
        </li>
        <!-- email adress -->
        <li class="form-field">
          <div class="input-container">
            <input name="phone_number" id="phone_number" type="tel" value="" placeholder="Phone *" required="">
          </div>
        </li>
        <!--  phone -->
      </ul>
      <input name="action" type="hidden" value="Request an Info Sheet">
    </div>
    <div class="form-footer">
      <button type="submit" class="form_button">
        <span>Contact Us</span>
      </button>
    </div>
    <!-- button -->
  </form>
</div>

​

Answer 1

添加flex-wrap将按钮发送到下一行的末尾：

form, .form-fields {
  display: flex;
  flex-wrap: wrap;
}

Answer 2

Flexbox只对直接儿童有效。因此，如果您对父母执行display:flex，那么所有直接的孩子都会受到影响。子代内的嵌套div不会受到影响。因此，表单上的display:flex将使.form-body和.form-footer表现为flex子函数，因此这两个div将排在一起。

将display:flex应用于.form-fields将使.form-fields的所有直接子级(即.form-field类)成为一个flex项。所以他们会水平地对齐。

包装的问题是因为第一个.input-container有两个非flex子程序。因此，在那里增加弹性，也会使它们保持在线状态。

因此，添加此css将对齐所有项：

 form {
  display: flex;
  justify-content:center;
  align-items:center;
}
.form-fields, .input-container{
  display:flex;
}

Answer 3

我想这可能是你想做的。我所做的就是添加：flex-direction: column;。

柔箱的默认值是行。这将使flex项目成为一行，并将孩子们分散到该行上。

将挠曲框的值设置为列，将使flex项成为一列，并将子列扩展到该列。

希望它有帮助;)

​

form, .form-fields {
  display: flex;
  flex-direction: column;
}

<div class="form">
  <form>
    <div class="form-body">
      <ul class="form-fields">
        <li class="form-field">
          <div class="input-container">
            <span class="name_first">
              <input type="text" name="first_name" id="first_name" value="" placeholder="First Name *" required="">
            </span>
            <span class="name_last">
              <input type="text" name="last_name" id="last_name" value="" placeholder="Last Name *" required="">
            </span>
          </div>
        </li>
        <!--  name and last name -->

        <li class="form-field">
          <div class="input-container">
            <input name="email_address" id="email_address" type="email" value="" placeholder="Email *" required="">
          </div>
        </li>
        <!-- email adress -->
        <li class="form-field">
          <div class="input-container">
            <input name="phone_number" id="phone_number" type="tel" value="" placeholder="Phone *" required="">
          </div>
        </li>
        <!--  phone -->
      </ul>
      <input name="action" type="hidden" value="Request an Info Sheet">
    </div>
    <div class="form-footer">
      <button type="submit" class="form_button">
        <span>Contact Us</span>
      </button>
    </div>
    <!-- button -->
  </form>
</div>

​