CSSで要素の垂直ラップを実装できますか？

Question

私はドラッグアンドドロップシステムを実装して、要素をコンテナdivに転送しています。私はこれらの転送された要素が、コンテナの高さに当たってから次の列に移動するまで、単一の列にとどまることを望みます。

残念ながら、アイテム数はあらかじめ決められていません。あなたがここにそれらを参照してくださいするために、コンテナにロードされた要素を持つ...

：効果的に私は、レイアウトのこの種に要素をラップ何かで終わるしたいと思います。

プロパティはいいアイデアですが、利用可能な高さを埋め込む前にコンテンツを他の列に広げているようです。

Answer 1

あなたは「あなたはフレックス使用することができますが、あなたはおそらく、あなたのドンので、JavaScriptで設定する必要がありますコンテナ、の最大の高さを設定する必要がflex-box

.container { 
 
    width:200px; 
 
    height:300px; 
 
    display:flex; 
 
    flex-direction:column; 
 
    flex-wrap: wrap; 
 
} 
 
.container div { 
 
    text-align:center; 
 
    width:50px; 
 
    height:50px; 
 
    background:red; 
 
    color:white; 
 
    margin:10px; 
 
}

<div class="container"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
    <div>6</div> 
 
    <div>7</div> 
 
</div>

Answer 2

を使用してそれを行うことができますリストの長さを知っている。

代わりにCSSの列を使用できます。これは、事前に項目の数を知る必要はありません。欠点は、IE10以下のサポートが不足していることです。

.container { 
 
    display: block; 
 
    width: 50%; 
 
    -webkit-column-count: 3; 
 
    -moz-column-count: 3; 
 
    column-count: 3; 
 
    column-gap: 2em; 
 
    -webkit-column-gap: 2em; 
 
    -moz-column-gap: 2em; 
 
} 
 

 
.container div { 
 
    text-align: center; 
 
    width: 100%; 
 
    padding: 2em 0; 
 
    background: #2980b9; 
 
    color: white; 
 
    -webkit-column-break-inside: avoid; 
 
    page-break-inside: avoid; 
 
    break-inside: avoid; 
 
    margin-bottom: 2em; 
 
}

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