フレキシボックス：バイ・サイドカラムが、複数列スタック

Question

Current layout

こんにちは、iはフレキシボックスでレイアウトを作り、それがフレックス方向に設定した行。それから私は子供を幅：50％に設定しました（1.left）（2.right）（3.left）（4.right）を配置しました。

しかし、アーカイブする必要があるのはflex-direction：columnですが、項目の下半分が右に移動する2つの列があります。

Result desired

現在のコード：方向へ

.ds-content div{ 
     display: inline-flex; 
     flex-wrap: wrap; 
     align-items: flex-start; 
    } 

変更：カラム;

.ds-content div{ 
     display: inline-flex; 
     flex-wrap: wrap; 
     align-items: flex-start; 
     flex-direction: column; 
     width: 100%; 
     height: 150px; 
    } 

私が持っている問題は、私は（右下半分のコンテンツをプッシュする）このフレキシボックスの修正の高さを設定することはできませんで、コンテンツがユーザーadminからフェッチ動的です。コンテンツの長さと子供の量の点でダイナミックです。

ありがとうございます！

Answer 1

は私が solution in Codepen

私はalign-content: stretchを使用するためにflex-direction: rowを維持し、フレックス項目で同じ高さを持って確認してください。 これで、orderのプロパティでプレイするだけです。

Answer 2

私はこのために、それが列を使用する方が良いと思う：

.ds-content div { 
    width: 100%; 
    -webkit-column-count: 2; 
    -moz-column-count: 2; 
    column-count: 2; 
} 

ブラウザのサポートが問題になる可能性がありますあなたがコンテナの固定の高さを設定することができない場合は、しかし...