如何使用柔性显示容器使div转到下一行

Question

如何使最后一个div转到下一行？内联行div 具有柔性显示。

<div class="row inline-row">
  <div class="input-cost">
    <label>Cost</label>
    <div class="input-description"></div>
    <input class="input-number" formControlName="cost">
  </div>
  <div class="input-discount">
    <label>Discount (%)</label>
    <div class="input-description"></div>
    <input class="input-number" formControlName="cost">        
  </div>
  <div>
    <div class="form-helper">This div to new line</div>
  </div>
</div>

.CSS

.inline-row {
  display: flex;
  justify-content: flex-start;
}

Answer 1

有两种方法可以实现此目的。

1）您可以设置width container并添加flex-wrap:wrap;，以便最后一个元素将自动换行到下一行。

.inline-row {
  display: flex;
  justify-content: flex-start;
  width:400px;
  flex-wrap: wrap;
}

<div class="row inline-row">
  <div class="input-cost">
    <label>Cost</label>
    <div class="input-description"></div>
    <input class="input-number" formControlName="cost">
  </div>
  <div class="input-discount">
    <label>Discount (%)</label>
    <div class="input-description"></div>
    <input class="input-number" formControlName="cost">        
  </div>
  <div>
    <div class="form-helper">This div to new line</div>
  </div>
</div>

2）如果您不想为容器设置宽度，则可以手动将最后一个div的width设置为100%，以便将其换行到下一行

.inline-row {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.inline-row div:nth-child(3){width:100%;}

<div class="row inline-row">
  <div class="input-cost">
    <label>Cost</label>
    <div class="input-description"></div>
    <input class="input-number" formControlName="cost">
  </div>
  <div class="input-discount">
    <label>Discount (%)</label>
    <div class="input-description"></div>
    <input class="input-number" formControlName="cost">        
  </div>
  <div>
    <div class="form-helper">This div to new line</div>
  </div>
</div>