javascript - 显示 flex 动态高度镶嵌网格

Question

问题宽度显示 flex 和动态高度。 section 里面的每个元素都是动态高度。如果 section 中没有定义高度，每个元素只显示在一个水平列表中。如果在部分上设置了高度，例如800px，每个元素都将显示在一个漂亮的网格中。有没有办法在不使用 js 而只使用 css 的情况下动态执行此操作？

使用

部分:

width: 100%
display: flex; 
flex-flow: column wrap; 
justify-content: flex-start; 
align-content:center; 
align-items:flex-start;

节内的元素

align-self: auto;
width: 250px;

Answer 1

问题是 flex 是从上到下的，因为您将 flex-direction 定义为 column，而不是 row。然后，当您不定义高度时，它会尽可能地插入高度。

我认为没有 Javascript 就不可能找到任何好的解决方案，但以下是使用纯 CSS 实现的一种方法。

多列 CSS 解决方案

你已经定义了固定宽度，所以我们可以使用multi-column CSS .此解决方案的问题是 div 将跟随到下一列，因此某些元素将一分为二。

#container {
  width: 100%;
  -webkit-column-count: auto;
  -webkit-column-gap: 10px;
  -webkit-column-fill: auto;
  -webkit-column-width: 50px;
  -moz-column-count: auto;
  -moz-column-gap: 10px;
  -moz-column-fill: auto;
  column-count: auto;
  column-gap: 15px;
  column-fill: auto;
  column-width: 50px;
}

#container > div
{
  background-color:#eee;
  margin:2px;
}

旁注:添加新元素(通过 javascript)

我很想知道新元素如何影响原始布局，所以我有 made an example of how items are pushed into the column .你可能想用 Javascript 更好地计算它，因为所有旧元素都将被推到左列而不是留在同一个地方。使用 flex column 也会发生同样的问题。