特定の数の要素の後に列を折り返すようにflexboxに指示する方法はありますか？

Question

私は、単一の列に項目1-5を、次の列に項目6-10を持つビューを実現しようとしています。フレックスコンテナの明示的な高さを設定したり、JQueryを使用したりせずに、これを実現する簡単な方法はありますか？私は一番上に非作業用のバージョンがあり、下に行く予定です（ただしこれは明示的な高さを使用しています）。

https://jsfiddle.net/h6s9ds5a/

CSS

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

.wrapper div { 
    width: 50%; 
} 

次の2人のラッパーを使用することによって、このようにそれを行うことができますが、それはあなたのために動作しない場合がありますHTML

<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/

0あなたが必要なもの

.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>