【问题标题】：Display flex dynamic height mosaic grid显示 flex 动态高度马赛克网格
【发布时间】：2014-02-14 12:10:04
【问题描述】：

问题宽度显示弹性和动态高度。部分内的每个元素都是动态高度。如果在节中未定义高度，则每个元素仅显示在水平列表中。如果在部分设置高度，例如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;

【问题讨论】：

提供的答案有什么问题吗？

标签： javascript css grid

【解决方案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 列也会出现同样的问题。

【讨论】：

【解决方案2】：

您的问题源于这样一个事实：要使 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% 与 flex-box 79.47%），并且对于您的用例，列似乎更轻量级.

【讨论】：