显示弹性动态高度拼接网格

Question

发布宽度显示flex和动态高度。部分内的每个元素都是动态高度。如果未在部分中定义高度，则每个元素仅显示在水平列表中。如果在部分上设置高度，例如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-direction: column工作，您必须在Flex容器上指定height或max-height。

您有两种选择：

<强> 1。使用css多列。 http://jsfiddle.net/marionebl/95Z5r/3/

.grid {
  columns: 250px;
}

<强> 2。在您的部分设置（百分比）高度。（http://jsfiddle.net/marionebl/Tpb8v/）：

html, body {
  height: 100%;
}

.section {
  height: 75%;
  ...
}

我建议您使用css多列：广泛支持基本功能（多列：82.93%与弹性框79.47%）并且列似乎更轻量级为您的用例。

Answer 2

问题在于，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列会发生同样的问题。