html - 如何逐行动态创建div堆栈

Question

我在父 div 中创建的子 div 很少，因为我希望将子 div 放到底部。我使用 css 强制子 div 下降到底部，但是我也想要多个子 div 创建后，它们将逐行显示，但目前的结果是无论创建多少子div，它们都显示在同一行。如何让子div逐行显示？这是我的CSS。

 .myProgress {
  position: relative;
  display:flex;
  width: 100%;
  height: 30px;
  margin-top: auto;
  margin-bottom:150px;
  background-color: #ddd;
}

.myBar {
  position: relative;
  width: 1%;
  height: 100%;
  margin-top: auto;
  background-color: #4CAF50;
}

.nav {
    float: left;
    display:flex;
    width: 40%;
    margin: 0;
    padding: 1px;
}
<div class="nav">
    <div id="myProgress" class="myProgress" style="width:350px;">
       <div id="div01" class="myBar" style="width: 100%;"></div>
       <div id="div02" class="myBar" style="width: 100%;"></div>
       <div id="div03" class="myBar" style="width: 100%;"></div>
    </div>
</div>

而这里是三个div的结果，它们都落在了同一行，我想应该是强行放入bottom css造成的。有没有一种方法可以放入底部但逐行显示，例如如果三个子 div 则显示三行？

Answer 1

您正在 .myProgress 上使用 display:flex;

如果您还将 flex-direction: column; 添加到 .myProgress，那么它会将每个 div 添加到最后一个 div 的下面。

JS Fiddle

More info on Flexbox