縦方向に拡張したコンテナで2列レイアウトを作成する

Question

2列レイアウト（CSSのみ、JavaScriptなし）を作成したいと考えています。

これは複雑にいくつかの要件があります。

1. コンテナは、特定の高さ（例えば200px）で始まる
2. が2列
3. 項目があります。より多くのスペースがあり、その後場合は、列1を埋めます必要な充填カラム2
4. カラム1 &カラム2がいっぱいの場合は、コンテナの高さを拡張します。

具体例here。

悪い

グッド

要素は、最初の列1埋める：

コンテナの分：要素が列2を満たし、

次へIMUMの高さに達したコンテナが膨張すると素子が2列の間にリフロー、：フレキシボックスで

Answer 1

flex-directionがrowあるとき、あなたは垂直方向にコンテナを展開することができます。あなたが注意したように、これはフレックスアイテムを水平方向に–（LTR書込みモードで）左から右に配置し、古いタイプライターのように戻します。

flex-direction: columnでは、アイテムは上から下に配置され、コンテナは水平に展開されます。

希望するもの上下に積み重ねる列に–を入れて、コンテナを垂直方向に拡張します（Pinterestレイアウトのように）–は現在フレックスボックスでは使用できません。

Answer 2

フレキシボックス+ CSS列あなたが本当に近づい...

http://codepen.io/simshanith/pen/ZLLvGB?editors=1100

HTML：

<div class="container"> 
    <div class="columns"> 
    <div class="item">1</div> 
    <!-- etc. --> 
    </div> 
</div> 

はCSS：

.container { 
    background: rgba(0,0,0,0.1); 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
    min-height: 200px; 
    width: 600px; 
} 

.columns { 
    column-count: 2; 
    column-gap: 0; 
    flex: 1; 
} 

.item { 
    display: block; 
    box-sizing: border-box; 
    padding: 10px; 
    border: 1px solid blue; 
    width: 100%; 
    -webkit-column-break-inside: avoid; 
    /* Chrome, Safari, Opera */ 
    page-break-inside: avoid; 
    /* Firefox */ 
    break-inside: avoid; 
    /* IE 10+ */ 
} 

しかし、最初の列が満たされていません〜200px CSS列は最短で最適化されるため、2番目の列には少なくとも2つの項目が表示されます。