CSS中的动态图块windows-8样式

Question

我目前正在努力为mimic Windows 8 tiles寻找一个好的解决方案。我不关心100％的浏览器支持，所以我选择flexbox方法。 这是我的草稿： http://jsfiddle.net/8fo5qj9z/

目标是：

需要：

• 每个瓷砖应该是正方形
• 所有瓷砖应具有相同的尺寸（宽度，高度）
• 我们声明每行要显示多少个图块
• 方形大小动态更改，以适合父级div宽度，每行的广告数量与我们刚宣布的数量相同

• 我们得到多少行取决于我们创建的多少个图块

• 单个图块中的内容会动态缩小/增长（达到合理程度）

• 低于/高于我们使用的合理程度，例如@media only screen更改磁贴内容
• 内容主要是文字，但也可能更复杂
• 如果是文字，我们想在多行文字上使用overflow: hidden; text-overflow: ellipsis;之类的内容，这样如果文本到达图块的末尾就会被修剪。

可选的：

• 如果单个图块的内容需要更多空间（可使用例如填充进行控制），则允许其增长到单个标题的多个尺寸，但最大可达单行尺寸。

正如您在上面的草稿中所看到的，我目前正在努力解决多种问题：

• 文本修剪到达图块的末尾而没有图块生长
• 因此瓷砖并不总是正方形
• 我目前正在使用33vw来确保每行有3个图块但是在某些浏览器中放入div时似乎不能很好地工作，例如Firefox浏览器。瓷砖占洞页面的33％而不是父级div的33％。我想知道是否有一个更好的解决方案，最大的每行/每行瓦片。
• 不知道如何做可选部分