html元素从左到右，在2列中没有间隙

Question

我在一个页面上工作，我将在2列中显示新闻。元素宽度将是相同的，如果视口较小，则应响应于1列，但是我已经知道如何做到这一点。＆amp;这是一个Angular2项目。

问题出现在这里，当元素的高度不等时，我需要这样的东西：

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

因此，我基本上需要一些东西，而不是保留线条，而是填补了html的空白。我已经找到了砖石，这可能是一个很好的解决方案，但不幸的是，我无法使用它，因为我与Angular2一起工作，并且已移植的Angular2-Masonry项目已经死了...有很多问题，而且我无法解决它们很遗憾..基于上一个的其他jQuery库是一个选择。如果没有移植版本的Angular2，它们几乎无法使用。（如果您知道应该有效的事情，我会尝试的！）另一个选项是魔术CSS 。我找到了替代方案，但是几乎所有人都将元素从上到下整理，这对我不利。经过很多研究之后，我发现的唯一一个是：https：//codepen.io/anon/pen/vegmgj，但不幸的是，我不知道该如何在解决方案中使用它...我的解决方案基本上没什么大不了的：我已经有一个ngfor的DIV（或您想要的）。

感谢您的答案！

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;
 }