是否可以创建 4x4 flexbox 网格？答案

【问题标题】：Is it possible to create a 4x4 flexbox grid?是否可以创建 4x4 flexbox 网格？
【发布时间】：2011-11-26 19:04:41
【问题描述】：

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

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

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

【问题讨论】：

【解决方案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 来设置这些属性，我只是将它们内联用于演示目的

【讨论】：

对不起，我应该清楚的。我所指的框是“服务”框（“开发”、“设计”等）。SVG 是另一个问题。
@JoshuaSortino，我看不出问题所在。对我来说，使用适用于 Ubuntu 的最新稳定版 Google Chrome，这四个框在两种布局中看起来完全一样。
哦，等等，我以前不明白你的“调整大小”评论。现在我明白了。
现在我在工作，所以我没有时间更深入地研究它。

【解决方案2】：

似乎有一个元素可以解决这个问题。不幸的是，它目前并未得到广泛支持。

-webkit-box-lines: multiple;

可能允许 flexbox DIV 跨越多行。

【讨论】：