Как убрать свойство flex у последнего ребенка?

Question

Я пытаюсь удалить свойство flex на последнем дочернем элементе, я хочу, чтобы кнопка находилась ниже полей формы.Есть идеи?

.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>

Answer 1

Взято из этого ответа для аналогичного запроса и немного адаптировано, вы можете использовать break-before (или page-break-before) для достижения того, что вы хотите.Вам также нужно установить flex-wrap: wrap на родительский элемент, чтобы он работал.В этом ответе упоминаются другие подходы, которые вы можете адаптировать к вашим потребностям.

.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>

Answer 2

Поместите кнопку за пределы области.

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