html - Flexbox - 如何自动跳转到下一列？

Question

我想构建一个带有方向列的 flexbox。我的问题是，当第一列( View )充满列时，元素应该跳到下一列。元素将被动态添加。

  <div class="container">
  <div class="item">
   TEST
  </div>
  <div class="item">
   TEST
  </div>
  <div class="item">
   TEST
  </div>
  <div class="item">
   TEST
  </div>
  <div class="item">
   TEST
  </div>
</div>

    .container{
  display: flex;
  flex-direction: column;
}

.item{
  display: table;
  border: 1px solid blacK;
  height: 200px;
  width: 200px;
}

https://jsfiddle.net/snrz7td3/1/

像这样。

Answer 1

您需要将您的内容包装在 flex 容器中。请记住，您的容器高度需要固定。

.container{
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   max-height: 800px; // set height according to your need
}