HTML元素从左到右，两列

Question

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

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

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

所以基本上我需要一些东西而不是保持线条html填补空白。 我已经找到了Masonry，这可能是一个很好的解决方案，但不幸的是我无法使用它，因为我使用Angular2并且移植的angular2-masonry项目已经死了......有很多问题我无法解决它们不幸.. 基于前一个jquery库的其他jquery库不是一个选项..如果没有一个移植版本到angular2它们几乎不可用。 （如果你知道应该有用的东西我会试试！） 另一个选项是 magic css 。我找到了替代品，但几乎所有的都是从上到下排列的元素，这对我来说并不好。经过大量研究后我发现的唯一一个是：https://codepen.io/anon/pen/veGmgJ但不幸的是我不知道如何在我的解决方案中使用它... 我的解决方案基本上不是什么大问题：我有一个div（或任何你想要的）与ngFor ..

感谢您的回答！

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