Apply display:flex to a form

Question

I'm trying to apply display:flex on this form and failing. The structure of the HTML cannot be changed and I can't for the life of me figure out how to go about it. The only way they all inline (including the button) is to apply flex on both the form and .form-fields. But when the form wraps, the button stays in the first row, while the input field for the last name goes into second.

What am I doing wrong? And what can I do with CSS only, without touching the HTML? Thank you!

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>

@Michael_B So, if I apply flex to form, its children are .form-body and .form-footer. and those get flex properties, right? I'd need to apply flex to them too, separately? And control how they react to wrapping. Did I get any of that right? Haha — Retros, Nov 24 '17 at 13:45
What exactly are you trying to achieve? Why did you resort to using flexbox? — Rob Monhemius, Nov 24 '17 at 13:49
@RMo I'm trying to inline this form and make it so that when it wraps, it wraps as you'd expect it: all input fields first and then button at the end. Sorry if my explanation is a mess. And about flexbox, I'm not sure. I thought that would work best? — Retros, Nov 24 '17 at 13:52

score 3 · Answer 1 · answered Nov 24 '17 at 13:19

3

Adding flex-wrap sends the button to the end of the next row:

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

answered Nov 24 '17 at 13:19

dom_ahdigital

1,561
16
37

score 0 · Answer 2 · answered Nov 24 '17 at 14:01

I think this might be what you want to do. All I did was add: flex-direction: column;.

The default value for a flexbox is row. That will make the flex item a row and spread the children out over that row.

Setting value for a flexbox to column, will make the flex item a column and spread the children out over that column.

Hope it helps ;)

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>

Apply display:flex to a form

2 Answers2