html - 如何在 div parent 中先左后对齐 div？

Question

这可能看起来很愚蠢，但我不知道如何使用 CSS 来做到这一点。

我想把里面所有的div都靠左边对齐，出来的时候从最上面重新开始

因此在下面的 cyan div(包含)示例中，div 应该再次显示在从顶部开始的第二列上。

这是可以实现的吗？

#container {
  height: 300px;
  width: 300px;
  background-color: lightgray;
}
.element {
  height: 60px;
  width: 60px;
  margin: 2px;
}

<div id="container">
  <div class="element" style="background-color: red;"></div>
  <div class="element" style="background-color: orange;"></div>
  <div class="element" style="background-color: yellow;"></div>
  <div class="element" style="background-color: pink;"></div>
  <div class="element" style="background-color: cyan;"></div>
  <div class="element" style="background-color: blue;"></div>
  <div class="element" style="background-color: green;"></div>
  <div class="element" style="background-color: lightgreen;"></div>
</div>

Answer 1

是的，使用 flexbox

#container {
    height: 300px;
    width: 300px;
    background-color: lightgray;
    display: flex;
    flex-direction: column;
    flex-wrap:wrap;
    align-content:flex-start;
}
.element {
    height: 60px;
    width: 60px;
    margin: 2px;
}

<div id="container">
    <div class="element" style="background-color: red;"></div>
    <div class="element" style="background-color: orange;"></div>
    <div class="element" style="background-color: yellow;"></div>
    <div class="element" style="background-color: pink;"></div>
    <div class="element" style="background-color: cyan;"></div>
    <div class="element" style="background-color: blue;"></div>
    <div class="element" style="background-color: green;"></div>
    <div class="element" style="background-color: lightgreen;"></div>
</div>