css - 是否可以创建 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;

可能允许 flexbox DIV 跨越多行。