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

Question

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

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