是否可以创建一个4x4 flexbox网格？

Question

我正在尝试创建一个4x4 flexbox网格。四个盒子中的每一个应该具有相同的垂直高度，但是从左到右每行堆叠两个。这可能吗？

（在960和640之间调整浏览器大小以查看我的尝试：http://www.joshuasortino.com/index-new或查看我希望它如何工作：http://www.joshuasortino.com/index）

编辑：通过创建两个容器（每行一个）可以实现这种效果，但我更愿意只使用一个包装器/容器。

Answer 1

你的盒子没问题。你刚刚遇到麻烦，因为你的svg图像渲染了很多额外的垂直空间。只需添加旧版本的高度/宽度样式。

改变这个：

<object data="public/images/charts/routine.svg" type="image/svg+xml" class="chart">

对此：

<object data="public/images/charts/routine.svg" type="image/svg+xml" class="chart" style="width: 482px; height: 265px;">

并改变这一点：

<object data="public/images/charts/skills.svg" type="image/svg+xml" class="chart"> 

对此：

<object data="public/images/charts/skills.svg" type="image/svg+xml" class="chart" style="width: 482px; height: 265px;">

理想情况下，您可以使用样式和CSS来设置这些属性，我只是为了演示目的而将它们内嵌

Answer 2

似乎有一个元素可以解决问题。毫无疑问，它目前尚未得到广泛支持。

-webkit-box-lines: multiple;

Supossedly允许flexbox DIV跨越多行。