css - 如何使用 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) 你可以给container设置width并添加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>