CSS 列中的视频排列不正确答案

【问题标题】：Videos in CSS columns not arranging correctlyCSS 列中的视频排列不正确
【发布时间】：2018-01-30 06:27:21
【问题描述】：

我有一个 3 列布局，我想要填充可变数量的视频（通常是 3 的倍数）。我希望视频以每列高度相等的方式分布在各列中。

如果我使用 6、9 或 12 作为视频数量，这不是问题，但如果我将其设置为 3，则列分布不正确，如下所示：

Column 1 | Column 2 | Column 3
[video 1]  [video 3]
[video 2]

它应该在哪里：

Column 1 | Column 2 | Column 3
[video 1]  [video 2]  [video 3]

这是我应该用桌子代替的东西吗？过去我遇到过麻烦，这就是为什么我在这种情况下选择列的原因，但现在我遇到了一些困难......我目前正在使用列宽来保持响应友好，我不确定这在表格布局中究竟是如何工作的。

我的 HTML 是这样的：

<div id="videoContainer">
  <iframe src="https://www.youtube.com/embed/ScMzIvxBSi4"></iframe>
  <iframe src="https://www.youtube.com/embed/ScMzIvxBSi4"></iframe>
  <iframe src="https://www.youtube.com/embed/ScMzIvxBSi4"></iframe>
</div>

使用这样的 CSS：

#videoContainer {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-width: 300px;
  -moz-column-width: 300px;
  column-width: 300px;
}

【问题讨论】：

标签： html css video-streaming css-multicolumn-layout

【解决方案1】：

Link to JSFiddle

如果您将以下内容添加到#videoContainer，它应该可以工作

display: flex;

【讨论】：

刚刚尝试过，它似乎可以工作 - 除了它看起来与 column-width 不兼容，现在调整窗口大小时列不会折叠...更新了原始问题中的 CSS反映这一点（这可能是比我想象的更重要的细节）
实际上，这确实让我找到了一个解决方案——我只是取消了列并完全切换到弹性盒布局。 Here's 帮助我的 Codepen。