如何从最后一个子元素中删除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

取自this answer的类似请求并稍作修改，您可以使用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之外。

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