是否有一种方法可以告诉flexbox在一定数量的元素之后包装列？

Question

我试图实现这样一个观点，即在一列中有项目1-5，在下一列中有项目6-10。是否有一种使用flex实现这一目标的简单方法，而无需在flex容器上设置显式高度或使用JQuery？我有一个摆弄不工作的版本在顶部，我要在底部(但这是使用一个明确的高度)。

https://jsfiddle.net/h6s9ds5a/

CSS

.wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.wrapper div {
  width: 50%;
}

<div class="wrapper">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
  <div>Item 8</div>
  <div>Item 9</div>
  <div>Item 10</div>
</div>

Answer 1

您可以这样做，通过使用两个包装，但这可能不适用于您：https://jsfiddle.net/h6s9ds5a/2/

​

.wrapper {
  display: flex;
}
.wrapper .column {
  flex: 1 1 0;
}

.column div {
  flex-direction: column;
  }

<div class="wrapper">
  <div class="column">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
  </div>
  <div class="column">
    <div>Item 6</div>
    <div>Item 7</div>
    <div>Item 8</div>
    <div>Item 9</div>
    <div>Item 10</div>
  </div>
</div>

​

Answer 2

您需要的是两个列的包装器。

​

.wrapper {
  display: flex;
}
.wrapper div {
  width: 50%;
}

<div class="wrapper">
  <div class="col1">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
  </div>
  <div class="col2">
    <div>Item 6</div>
    <div>Item 7</div>
    <div>Item 8</div>
    <div>Item 9</div>
    <div>Item 10</div>
  </div>      
</div>

​