html - 应用显示 :flex to a form

Question

我尝试在此表单上应用 display:flex 但失败了。 HTML 的结构无法更改，我终究无法弄清楚如何去做。 它们全部内联(包括按钮)的唯一方法是在表单 和 .form-fields 上应用 flex。但是当表单换行时，按钮停留在第一行，而姓氏的输入字段进入第二行。

我做错了什么？在不触及 HTML 的情况下，我可以只使用 CSS 做什么？谢谢!

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;
}