0

I am trying to remove the flex property on the last child, I want the button to be below the form fields. Any ideas?

.formbody {
  display: flex;
}
<div class="formbody">
  <input type="hidden" name="FORM_SUBMIT" value="">
  <input type="hidden" name="" value="">
  <div class="widget widget-text mandatory">
    <label for="ctrl_2" class="mandatory">Postleitzahl<span class="mandatory">*</span></label>
    <input type="number" name="plz" id="" class="text mandatory" value="" required="" step="any" min="1000" max="9999">
  </div>
  <div class="widget widget-text mandatory">
    <label for="" class="mandatory">E-Mail<span class="mandatory">*</span></label>
    <input type="email" name="email" id="" class="text mandatory" value="" required="">
  </div>
  <button type="submit" id="" class="submit" name="submit">Weiter</button>
</div>
Georgi Hristozov
  • 3,899
  • 2
  • 17
  • 23
felixo
  • 1,453
  • 6
  • 33
  • 60

2 Answers2

3

Taken from this answer for a similiar request and slightly adapted, you can use break-before (or page-break-before) to achieve what you want. You'll also have to set flex-wrap: wrap on the parent element for it to work. There are some other approaches mentioned in that answer that you could adapt to your needs.

.formbody {
  display: flex;
  flex-wrap: wrap;
}

.formbody :last-child {
  page-break-before: always; /* CSS 2.1 syntax */
  break-before: always; /* New syntax */
}
<div class="formbody">
  <input type="hidden" name="FORM_SUBMIT" value="">
  <input type="hidden" name="" value="">
  <div class="widget widget-text mandatory">
    <label for="ctrl_2" class="mandatory">Postleitzahl<span class="mandatory">*</span>
</label>
    <input type="number" name="plz" id="" class="text mandatory" value="" required="" step="any" min="1000" max="9999">
  </div>
  <div class="widget widget-text mandatory">
    <label for="" class="mandatory">E-Mail<span class="mandatory">*</span>
</label>
    <input type="email" name="email" id="" class="text mandatory" value="" required="">
  </div>
  <button type="submit" id="" class="submit" name="submit">Weiter</button>
</div>
Constantin Groß
  • 10,719
  • 4
  • 24
  • 50
1

Put the button outside the div.

    <div class="formbody">
      <input type="hidden" name="FORM_SUBMIT" value="">
      <input type="hidden" name="" value="">
      <div class="widget widget-text mandatory">
        <label for="ctrl_2" class="mandatory">Postleitzahl<span class="mandatory">*</span></label>
        <input type="number" name="plz" id="" class="text mandatory" value="" required="" step="any" min="1000" max="9999">
      </div>
      <div class="widget widget-text mandatory">
        <label for="" class="mandatory">E-Mail<span class="mandatory">*</span></label>
        <input type="email" name="email" id="" class="text mandatory" value="" required="">
      </div>
    </div>
    <button type="submit" id="" class="submit" name="submit">Weiter</button>
Eagle95
  • 36
  • 7