2つの列に空白を入れずに左から右へのHTML要素

Question

2つの列にニュースを表示するページで作業しています。要素の幅は同じです。ビューポートが小さければ1列になりますが、それを行う方法はすでにわかっています。 &これはangular2プロジェクトです。要素の高さが等しくないとき

問題は、ここに来て、私はこのようなものが必要です。

|AAA|BBB| 
|AAA|BBB| 
|AAA|CCC| 
|DDD|CCC| 
|DDD|EEE| 
...... 

をだから、基本的に私は、代わりにHTMLがギャップを埋めるラインを保つ何かを必要としています。 私はすでに大きなメリットがありましたが、残念ながらAngular2を使用していて、移植されたangle2-masonryプロジェクトが死んでいるので、残念ながら使用できません...多くの問題があり、修正できませんそれらは残念ながら.. これ以外のjqueryライブラリはオプションではありません。angular2に移植されていないバージョンはほとんど使用できません。 （あなたがうまくいくものを知っていれば試してみましょう） もう一つのオプションはです。魔法のcssです。私は選択肢を見つけましたが、それらのほとんどすべてが要素を上から下に並べ替えていますが、それは私には良いことではありません。多くの研究の後で私が見つけた唯一のものはhttps://codepen.io/anon/pen/veGmgJですが、残念ながら私は私のソリューションでどのように使うべきかわかりません... 私のソリューションは基本的に大きな問題ではありません。あなたが欲しいものは何でも）。

お返事ありがとう！

Answer 1

Flexboxがあなたの後になっている可能性があり、スタッキング列も処理できます。相続人例： https://codepen.io/anon/pen/aLmzVa

.flexContainer { 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
} 

.flexItem { 
    flex: 1 0 250px; 
    border: 1px solid; 
}